その他の要件

マピオンFlash Maps APIとは

マピオンFlash Maps APIとはドラッグ&ドロップによるフリースクロール可能な地図をFlashアプリケーション内に埋め込むことができる地図APIです。ActionScript3.0をベースに、Flexフレームワークで利用できるコンポーネントとして提供されているため、FlexベースのWebアプリケーションやAIRアプリケーションで利用することが可能です。

このAPIの特徴として、Flexコンポーネントとして利用できる点があげられます。データバインディングやイベント、カスタムコンポーネントを利用することにより、かんたんかつスピーディーに地図アプリケーションが構築できます。また、Flexフレームワークにあるデータ通信コンポーネントやUIコントロールを組み合わせることでマピオンのように、動的にデータを取得し地図とリストへ表示するアプリケーションなどもかんたんに作成できます。

このマピオンのような動的データ取得&表示を行なう地図アプリケーションの構築方法を、APIの利用方法と共に説明します。

API利用にあたって

マピオンFlash Maps APIは非営利目的であれば個人・法人問わずご自由にお使い頂けます。利用するにあたっては利用規約に同意いただき、APIキーを発行する必要があります。APIキーの発行および詳細については以下ページをご参照ください。

またマピオン Flash Maps APIを商用サイト・イントラネットで使用する場合は、マピオン地図ASPサービスをご利用下さい。

AIRプロジェクトの作成

AIRプロジェクトにてAPIを利用する場合、APIキー発行時にメインswfファイル名を入力する必要があります。FlexBuilderを利用した場合、デフォルトではメインswfファイル名は「プロジェクト名.swf」となります。このサンプルではプロジェクト名を「AirTest」とします。

SDKファイルをプロジェクトに取り込む

マピオンAPIページよりSDKファイルをダウンロードし、中に含まれる「FlexMapionMap_v1_x_x.swc」をプロジェクト内libフォルダへコピーします。

APIキーの発行

APIキーの発行ページよりAPIキーを発行します。このサンプルでは、入力内容は以下のようになります。

地図の表示

以上でAPIを利用する用意ができました。APIキー発行後に表示される画面に、地図を表示するだけのサンプルソースが表示されます。試しにそれをコピー&ペーストして実行してみましょう。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mapion="http://www.mapion.co.jp/mmap/flex"> <mx:Panel title="sample of Flash Maps API" width="100%" height="100%"> <mapion:FlexMapionMap width="100%" height="100%" mode="labs" key="発行したAPIキー" latitude="35.6800" longitude="139.7500" zoomLevel="7" /> </mx:Panel> </mx:WindowedApplication>

以下の通りPanelコンポーネント内に地図が表示されればOKです。ドラッグ&ドロップで地図スクロールも行なえます。

地図への基本操作

FlexMapionMapがAPIのメインコンポーネントです。表示座標や縮尺レベルの指定はこのコンポーネントに対して操作を行ないます。座標系や縮尺レベル、地図への基本操作に関してはマピオンAPIドキュメントページに記載がありますので、そちらをご参考ください。

外部データの取得および地図へのプロット

緯度経度情報を持ったデータを動的に読み込み、地図上へプロットします。読み込むデータは以下とします。

data.xml

 

<datas> <data> <latitude>35.68716</latitude> <longitude>139.76093</longitude> <title>データ1</title> <description>1個目のサンプルデータです</description> </data> <data> <latitude>35.68064</latitude> <longitude>139.74742</longitude> <title>データ2</title> <description>2個目のサンプルデータです</description> </data> <data> <latitude>35.67373</latitude> <longitude>139.75899</longitude> <title>データ3</title> <description>3個目のサンプルデータです</description> </data> </datas>

上記xmlデータを読み込み地図上へプロットするサンプルは以下の通りです。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mapion="http://www.mapion.co.jp/mmap/flex" width="600" height="450"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; private function resultHandler(event:ResultEvent):void { map.dataProvider = event.result..data; } ]]> </mx:Script> <mx:HTTPService id="hs" url="data.xml" resultFormat="e4x" result="resultHandler(event)" /> <mx:Panel title="sample of Flash Maps API" width="100%" height="100%"> <mapion:FlexMapionMap id="map" width="100%" height="100%" mode="labs" key="発行したAPIキー" latitude="35.6800" longitude="139.7500" zoomLevel="6" map_ready="hs.send()" /> </mx:Panel> </mx:WindowedApplication>

外部データの取得にはHTTPServiceコンポーネントを利用しています。地図コンポーネントの初期化を待つ必要があるため、map_readyイベントをトリガにデータ取得を行なっている点に注意してください。外部データ取得後、データのコレクションオブジェクト(上記サンプルではXMLListオブジェクト)をFlexMapionMapコンポーネントのdataProviderプロパティに渡しています。dataProviderプロパティはFlexにあるList系コンポーネントが持つdataProviderプロパティと似ています。緯度経度はデータプロバイダアイテム内の特定フィールドから取得され、デフォルトのフィールド名は「latitude」「longitude」です。これを変更するにはFlexMapionMapコンポーネントの「markerDataLatitude」「markerDataLongitude」を変更してください。

上記サンプルを実行するとデータ内の緯度経度地点を指すマーカーが3つ、地図上にプロットされます。

座標系の変換

dataProviderへ入力する緯度経度データは日本測地系である必要があります。ただしデータによっては世界測地系となっている場合もあります。厳密な精度は保障していませんが、世界測地系座標と日本測地系座標を相互に変換するユーティリティ関数がAPIに含まれています。

日本測地系→世界測地系   AdapterUtil.j2w(p:Point):Point 世界測地系→日本測地系   AdapterUtil.w2j(p:Point):Point
var w_lat:Number; // 世界測地系緯度 var w_lon:Number; // 世界測地系経度 : var w_point:Point = new Point(w_lon, w_lat); var j_point:Point = AdapterUtil.w2j(w_point); var latitude:Number = j_point.y; // 日本測地系緯度 var longitude:Number = j_point.x; // 日本測地系経度

データ項目の表示

前述のサンプルでは、データプロバイダアイテム内のテキスト情報などが表示されていません。プロットされたマーカーをクリックすることにより、情報ウィンドウを開いてデータプロバイダアイテム内のテキスト情報などを表示させることが可能です。サンプルコードは以下です。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mapion="http://www.mapion.co.jp/mmap/flex" width="600" height="450"> <mx:Script> <![CDATA[ import jp.co.mapion.mmap.overlay.flex.MOverlay; import jp.co.mapion.mmap.event.MMapEvent; import mx.rpc.events.ResultEvent; private function resultHandler(event:ResultEvent):void { map.dataProvider = event.result..data; } private function markerClickHandler(event:MMapEvent):void { var markerObj:MOverlay = event.clickedOverlay as MOverlay; var data:* = markerObj.extra; markerObj.openInfoWindowHTML(data.title.toString()+":" +data.description.toString()); } ]]> </mx:Script> <mx:HTTPService id="hs" url="data.xml" resultFormat="e4x" result="resultHandler(event)" /> <mx:Panel title="sample of Flash Maps API" width="100%" height="100%"> <mapion:FlexMapionMap id="map" width="100%" height="100%" mode="labs" key="発行したAPIキー" latitude="35.6800" longitude="139.7500" zoomLevel="6" map_ready="hs.send()" markerClickFunction="{markerClickHandler}" /> </mx:Panel> </mx:WindowedApplication>

FlexMapionMapコンポーネントのmarkerClickFunctionプロパティにイベントハンドラとなる関数参照を渡すことで、プロットされたマーカーのクリックイベントを制御することができます。イベントハンドラ内ではイベントオブジェクト経由でマーカーオブジェクトとデータプロバイダアイテムにアクセスすることができます。マーカーオブジェクトはMOverlayクラスを継承したクラスのオブジェクトで、マーカーを操作するメソッドを持ちます。このサンプルではその中のopenInfoWindowHTMLメソッドを利用してテキスト情報を情報ウィンドウに表示します。

カスタムコンポーネントの利用

dataProviderにてプロットされるマーカーおよび情報ウィンドウ内に表示される内容はカスタムコンポーネントに置き換えることが可能です。マーカーにカスタムコンポーネントを利用するにはFlexMapionMapコンポーネントのmarkerItemRendererプロパティにアイテムレンダラーを設定します。また情報ウィンドウ内にカスタムコンポーネントを適用するには、情報ウィンドウを開くopenInfoWindowメソッドへ表示したいカスタムコンポーネントのインスタンスを渡します。サンプルコードは以下となります。

MarkerItemRenderer.mxml

 

<?xml version="1.0" encoding="utf-8"?> <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" implements="jp.co.mapion.mmap.overlay.flex.marker.IMarkerComponent" borderStyle="solid" backgroundColor="0xFFFFFF" x="{-this.width/2}" y="{-this.height/2}" click="clickHandler(event)"> <mx:Script> <![CDATA[ import jp.co.mapion.mmap.FlexMapionMap; import jp.co.mapion.mmap.overlay.MOverlay; import jp.co.mapion.mmap.IMapionMap; import jp.co.mapion.mmap.overlay.flex.marker.IMarkerComponent; private var _map:IMapionMap; private var _marker:MOverlay; public function get map():IMapionMap { return _map; } public function set map(value:IMapionMap):void { _map = value; } public function get marker():MOverlay { return _marker; } public function set marker(value:MOverlay):void { _marker = value; } private function clickHandler(event:MouseEvent):void { var renderer:InfoWindowItemRenderer = new InfoWindowItemRenderer(); renderer.data = data; _marker.openInfoWindow(renderer); } ]]> </mx:Script> <mx:Label text="{data.title}" /> </mx:Box>

InfoWindowItemRenderer.mxml

 

<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="240" height="80"> <mx:HBox width="100%"> <mx:Label text="{data.title}" /> </mx:HBox> <mx:HBox width="100%"> <mx:Label text="{data.description}" /> </mx:HBox> <mx:HBox width="100%"> <mx:Button label="button1" /> <mx:Button label="button2" /> <mx:Button label="button3" /> </mx:HBox> </mx:VBox>
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mapion="http://www.mapion.co.jp/mmap/flex" width="600" height="450"> <mx:Script> <![CDATA[ import jp.co.mapion.mmap.overlay.flex.MOverlay; import jp.co.mapion.mmap.event.MMapEvent; import mx.rpc.events.ResultEvent; private function resultHandler(event:ResultEvent):void { map.dataProvider = event.result..data; } ]]> </mx:Script> <mx:HTTPService id="hs" url="data.xml" resultFormat="e4x" result="resultHandler(event)" /> <mx:Panel title="sample of Flash Maps API" width="100%" height="100%"> <mapion:FlexMapionMap id="map" width="100%" height="100%" mode="labs" key="発行したAPIキー" latitude="35.6800" longitude="139.7500" zoomLevel="6" map_ready="hs.send()" markerItemRenderer="MarkerItemRenderer"/> </mx:Panel> </mx:WindowedApplication>

MarkerItemRendererコンポーネントはIMarkerComponentインターフェースの実装により、マーカーオブジェクトにアクセスすることが可能になります。データプロバイダアイテムにはカスタムコンポーネントのdataプロパティよりアクセス可能です。マーカーにカスタムコンポーネントを適用した場合、マウスイベントはそのカスタムコンポーネント内で制御する必要があることに注意してください。

Listコンポーネントとの連携

取得したデータの一覧をListコンポーネントで表示し、地図と連動するサンプルを示します。FlexMapionMapのdataProviderにはセットされたデータプロバイダアイテム毎に紐づいているマーカーオブジェクトの参照がセットされるので、それを利用します。サンプルコードは以下です。MarkerItemRendererコンポーネントとInfoWindowItemRendererコンポーネントは前述のサンプルと同一です。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mapion="http://www.mapion.co.jp/mmap/flex" width="600" height="450"> <mx:Script> <![CDATA[ import mx.utils.ObjectProxy; import mx.events.ListEvent; import jp.co.mapion.mmap.overlay.flex.MOverlay; import jp.co.mapion.mmap.event.MMapEvent; import mx.rpc.events.ResultEvent; private function resultHandler(event:ResultEvent):void { var datas:XMLList = event.result..data; var dp:Array = []; for(var i:int=0;i<datas.length();i++){ dp.push(new ObjectProxy({ latitude :datas[i].latitude ,longitude :datas[i].longitude ,title :datas[i].title ,description:datas[i].description })); } map.dataProvider = dp; list.dataProvider = map.dataProvider; } private function listClickHandler(event:ListEvent):void { var marker:MOverlay = list.selectedItem.markerReference as MOverlay; var renderer:InfoWindowItemRenderer = new InfoWindowItemRenderer(); renderer.data = list.selectedItem; marker.openInfoWindow(renderer); } ]]> </mx:Script> <mx:HTTPService id="hs" url="data.xml" resultFormat="e4x" result="resultHandler(event)" /> <mx:Panel title="sample of Flash Maps API" width="100%" height="100%"> <mx:HBox width="100%" height="100%" horizontalGap="0"> <mapion:FlexMapionMap id="map" width="100%" height="100%" mode="labs" key="発行したAPIキー" latitude="35.6800" longitude="139.7500" zoomLevel="6" map_ready="hs.send()" markerItemRenderer="MarkerItemRenderer"/> <mx:List id="list" width="100" height="100%" labelField="title" itemClick="listClickHandler(event)" /> </mx:HBox> </mx:Panel> </mx:WindowedApplication>

FlexMapionMapコンポーネントのdataProviderプロパティに渡すコレクションオブジェクトはXMLListではなくArrayとし、コレクションアイテムをObjectProxyに変更している点に注意してください。コレクションアイテムがXML(XMLList)の場合、データプロバイダアイテムからマーカーオブジェクトの参照へはアクセス出来ません。

以下コードにてFlexMapionMapのdataProviderをListのdataProviderへ渡しています。

list.dataProvider = map.dataProvider;

紐づいたマーカーはFlexMapionMapコンポーネントによって、データプロバイダアイテムのmarkerReferenceプロパティにセットされているため、Listのアイテムクリックイベントでそのアイテムに紐づいたマーカーオブジェクトを取り出し、openInfoWindowメソッドで情報ウィンドウを開いています

マップイベントとデータバインディング

これまでのサンプルでは外部データを静的なファイルとしていますが、緯度経度情報よりデータ取得を行なう一般的なWebAPIからデータ取得を行なう場合、マップイベントとデータバインディングを利用すると簡単にデータ取得を制御することが出来ます。例えば緯度経度などはFlexMapionMapコンポーネントでデータバインディング可能なソースして定義されています。下記サンプルでは地図中心緯度経度が変更する毎に、その緯度経度をパラメータとして外部データ取得が行なわれます。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mapion="http://www.mapion.co.jp/mmap/flex" width="600" height="450"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; private function resultHandler(event:ResultEvent):void { map.dataProvider = event.result..data; } ]]> </mx:Script> <mx:HTTPService id="hs" url="WebAPIのURL" resultFormat="e4x" result="resultHandler(event)"> <mx:request> <latitude>{map.latitude}</latitude> <longitude>{map.longitude}</longitude> : :(その他パラメータ) : </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="発行したAPIキー" latitude="35.6800" longitude="139.7500" zoomLevel="6" map_ready="hs.send()" map_moveend="hs.send()"/> </mx:Panel> </mx:WindowedApplication>

おわりに

駆け足となってしまいましたが、APIを利用した地図アプリケーションの構築方法の一例を説明しました。Flexコンポーネントを組み合わせることでかんたんかつスピーディーに開発することができ、かつAIRアプリケーションであれば外部データの通信におけるクロスドメインの制約も発生せず、既存Webサービスとのマッシュアップもやりやすいと思います。

ぜひマピオンFlash Maps APIを利用した地図アプリケーションの構築にチャレンジしてみてください。