FlashMapsAPIで地図アプリ

こんにちは、中村です。

前回のエントリーに続きまして、FlashMapsAPIの利用方法についてエントリーを書かせていただきます。今回は「FlashMapsAPIを利用した地図アプリケーション開発方法」といったところをサンプルアプリケーションを作りながら説明したいと思います。

サンプルアプリケーションの要件

さて今回サンプルとして作成するものはマピオン地図ページのような地図上に情報を表示するアプリケーションを想定したいと思います。機能をまとめると以下の通りです。

• 地図操作を行なうコントロールを追加する
• 外部XMLデータを動的に取得する
• 取得したデータを地図へプロットする
• 地図表示変更でデータの再取得を行なう
• 地図の表示範囲に対するデータのクエリーを構築する

地図操作を行なうコントロールを追加する

さて、前回はAPIキー生成時に出力されるサンプルを動かしましたので、これに対して機能を追加していきます。前回のサンプルでは地図をスクロールすることしか出来ず、表示縮尺を変えることが出来ませんでしたので、ユーザーが任意の表示縮尺を選択できるようコントローラーを追加します。メインコンポーネントであるFlexMapionMapのcontrolsプロパティへ追加します。

<mapion:FlexMapionMap id="map"
   width="100%" height="100%" mode="labs"
   key="[enter your API-key]"
   latitude="35.6800" longitude="139.7500"
   zoomLevel="6"
   >
  <mapion:controls>
     <mapion:MSliderControl
        anchor="{MControlPosition.M_ANCHOR_TOP_LEFT}"
        offsetX="10"
        offsetY="10" />
  </mapion:controls>
</mapion:FlexMapionMap>

外部XMLデータを動的に取得する

次は外部XMLデータを取得します。取得するXMLはこちらとします。ここはFlexフレームワークにあるHTTPServiceコンポーネントを利用してみましょう。そしてデータを取得するタイミングですが、FlexMapionMapコンポーネントに初期化完了時に送出されるmap_initialloadイベントが定義されていますのでそちらを利用します。

<mx:HTTPService id="hs"
   url="station.xml"
   resultFormat="e4x"/>

<mapion:FlexMapionMap
   :
   map_initialload="hs.send()"
   >
   :
</mapion:FlexMapionMap>

取得したデータを地図へプロットする

FlexMapionMapコンポーネントにデータをプロットする方法はいくつかありますが、今回は一番簡単なdataProviderプロパティを利用します。これにコレクションデータを与え、緯度・経度となる属性名を指定することで自動的に地図へデータがプロットされます。

<mx:HTTPService id="hs"
   :   
   result="map.dataProvider=XML(event.result)..station"/>

<mapion:FlexMapionMap id="map"
   :
   markerDataLongitude="longitude"
   markerDataLatitude="latitude"
   :
   >
   :
</mapion:FlexMapionMap>

これによりデフォルトのマーカーで地図上にデータがプロットされます。プラスしてマーカーがクリックされた場合にそのデータの名称をインフォウィンドウにて表示する動作も加えておきましょう。

<mx:Script>
   <![CDATA[
      import jp.co.mapion.mmap.overlay.flex.MOverlay;
      import jp.co.mapion.mmap.event.MMapEvent;
      private function markerClickHandler(event:MMapEvent):void
      {
         var ov:MOverlay = event.targetOverlay;
         ov.openInfoWindowHTML(ov.extra.name);
      }
   ]]>
</mx:Script>

<mapion:FlexMapionMap id="map"
   :
   markerClickFunction="{markerClickHandler}"
   :
   >
   :
</mapion:FlexMapionMap>

地図表示変更でデータの再取得を行なう

通常の地図アプリケーションの場合、現在表示している範囲の情報を地図上にプロットし、表示範囲が変更となった場合にデータの再取得を行ないます。FlexMapionMapコンポーネントには多くのイベントが定義されており、地図の表示範囲変更は地図が移動したmap_moveendイベント、地図の表示縮尺が変更したmap_zoomイベントにてハンドリング可能です。

<mapion:FlexMapionMap id="map"
   :
   map_moveend="hs.send()"
   map_zoom="hs.send()"
   >
   :
</mapion:FlexMapionMap>

地図の表示範囲に対するデータのクエリーを構築する

さて、今回はデータ取得を静的なXMLファイルに対して行なっておりますが、一般的な地図へ表示するデータ取得のWeb-APIには、緯度経度範囲を指定するなどしてデータ取得を行ないます。FlexMapionMapには緯度経度に関するプロパティがデータバインディング可能なソースとして定義されています。HTTPServiceコンポーネントと組み合わせればデータバインディングだけでクエリー構築は解決できちゃいます。

<mx:HTTPService
   :
   >
   <mx:request>
      <minX>{map.boundsLatLng_minX}</minX>
      <minY>{map.boundsLatLng_minY}</minY>
      <maxX>{map.boundsLatLng_maxX}</maxX>
      <maxY>{map.boundsLatLng_maxY}</maxY>
   </mx:request>
</mx:HTTPService>

最終的なソース

というわけで最終的なメインMXMLファイルは以下となります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns:mapion="http://www.mapion.co.jp/mmap/flex">

   <mx:Script>
      <![CDATA[
         import jp.co.mapion.mmap.control.MControlPosition;
         import jp.co.mapion.mmap.overlay.flex.MOverlay;
         import jp.co.mapion.mmap.event.MMapEvent;
         private function markerClickHandler(event:MMapEvent):void
         {
            var ov:MOverlay = event.targetOverlay;
            ov.openInfoWindowHTML(ov.extra.name);
         }
      ]]>
   </mx:Script>

   <mx:HTTPService id="hs"
      url="station.xml"
      resultFormat="e4x"
      result="map.dataProvider=XML(event.result)..station">
   	  <mx:request>
         <minX>{map.boundsLatLng_minX}</minX>
         <minY>{map.boundsLatLng_minY}</minY>
         <maxX>{map.boundsLatLng_maxX}</maxX>
         <maxY>{map.boundsLatLng_maxY}</maxY>
   	  </mx:request>
   </mx:HTTPService>

   <mx:Panel title="sample of Flash Maps API" width="100%" height="100%">

      <mapion:FlexMapionMap id="map"
         width="100%" height="100%" mode="labs"
         key="[enter your API-key]"
         latitude="35.6800" longitude="139.7500"
         zoomLevel="6"
         map_initialload="hs.send()"
         markerDataLongitude="longitude"
         markerDataLatitude="latitude"
         markerClickFunction="{markerClickHandler}"
         map_moveend="hs.send()"
         map_zoom="hs.send()"
         >
        <mapion:controls>
           <mapion:MSliderControl
              anchor="{MControlPosition.M_ANCHOR_TOP_LEFT}"
              offsetX="10"
              offsetY="10" />
        </mapion:controls>
      </mapion:FlexMapionMap>
   </mx:Panel>

</mx:Application>

実際に動作するアプリケーションもこちらに置いておきますのでご参考ください。今回は静的なXMLファイルをデータソースとしているため地図上のデータは固定のままで面白みに欠ける部分はありますが、これを参考にWeb-APIとうまくマッシュアップすれば簡単に地図アプリケーションが作成できると思いますのでぜひチャレンジしてみてください。