高機能なYahoo! Maps ActionScript 3.0コンポーネント*を使えば、FlashまたはFlexに基づく地図アプリケーションを簡単に作成できます。ただし、Flex開発者にとっては、使用モデルがFlexのデータグリッドやリストなどのデータ駆動型コントロールとまったく違うと感じられるかもしれません。

Flexデータマップコントロールは、Yahoo! Mapコンポーネントに基づいて作成された無料のオープンソースコンポーネントであり、データグリッドやタイルリストコントロールと同じデータプロバイダーから入力を取得して、Locationまたはカスタマイズ可能なフィールドに基づいてそのデータを地図上にプロットします。地図上のマーカーをクリックすると、アイテムレンダラーがポップアップして、その場所に関連するデータを表示します。

このほかに、データプロバイダーに対する変更が自動的に反映される、Ctrlキーを押すことで複数の項目をボックス選択できる（図1を参照）、マップ上に自由に描画できる（描画はズームレベルに応じて拡大縮小されます）、描画を保存して復元できるといった機能があります。

注意：データマップコントロールは、MPL 1.1オープンソースライセンスに基づいてライセンスされています。

このコントロールの主な使用法は、場所情報を含むデータがある場合に、地図上にそのデータをプロットし、その場所に関連するデータをクリック1つで表示できるようにすることです（私は当初、「データグリッドの地図化」コントロールと呼んでいました）。

図1：Flexデータマップコントロール

この記事では、データマップコントロールの機能を説明し、次のような機能を持つ単純で強力なアプリケーションを、わずか数行のコードで作成する手順を紹介します。

• データグリッドと地図上に同じデータを表示します。
• データグリッドで行った変更を地図上に反映します。
• 地図上の複数の項目をボックス選択できます。
• 地図上に自由に描画して、保存したり復元したりできます。

必要条件

この記事を最大限に活用するには、次のソフトウェアとファイルが必要です。

Flex Builder 3

• 体験版
• 購入

サンプルファイル：

• flex_datamap.zip（ZIP、450K）

この記事に必要な予備知識

• Flexに関する一般的な知識。
• データグリッドやリストなどのデータ駆動型コントロールに関する基本的な理解。

データマップコントロールの機能

Flexデータマップコントロールは、リストコントロールやデータグリッドコントロールと同様にデータプロバイダーから入力を受け取り、各オブジェクトのmapFieldプロパティ（デフォルトではLocation）を調べ、地図上の該当する場所にマーカーをプロットします。データプロバイダーのArrayCollectionが変更された場合、地図にも反映されます。データグリッドコントロールやリストコントロールと同様に、オブジェクトの追加、編集、削除、フィルタリングを行って、地図を自動的に更新させることができます。これは簡単そうに思えるかもしれませんが、いくつか注意すべき点があります。まず、地図の境界とズームレベルは、すべてのマーカーが表示されるように自動的に調整されます。データマップコントロールには、地図上にプロットされた場所がカバーする領域を視覚的に示すためのオーバーレイを描画する機能もあります（このためのAPIはYahoo! Mapsコンポーネントに用意されています）。視覚表現を見やすくするため、このオーバーレイは、APIを直接使用した場合よりも広い領域を囲むようになっています。

アイテムレンダラーとマーカーレンダラー

マーカーをクリックすると、アイテムレンダラーがポップアップします（アイテムレンダラーは独自に設定できます）。これは地図と一緒に（多少の遅れはありますが）移動し、地図の境界で正しくクリッピングされます。マーカーレンダラーを指定して、各マーカーの表示方法を制御することもできます。この機能は、Yahoo! Mapsコンポーネントに組み込まれています。

マーカー選択

マーカーをクリックして選択すると、selectedObjectがそのマーカーに関連付けられたデータを指すようになります。Ctrlキーを押しながらクリックすると複数のマーカーを選択できます。これらにはselectedObjectsからアクセスできます。マーカーを選択するもう1つの方法として、Ctrlキーを押しながらマウスをドラッグして、選択ボックスを作成することができます。選択ボックス内部にあるマーカーが選択されます。これはトグルになっており、選択されているマーカーがボックス内に入ると、選択が解除されます。

地図上のフリーフォーム描画

地図上に描画するには、Shiftキーを押しながらマウスを動かします。描画は経度と緯度に基づいて記録されるので、地図と共に正しく拡大縮小および移動されます。このデータは、データマップコントロールのfreeformLinesBase64プロパティを取得または設定することによって、Base64エンコードされた文字列で保存したり復元したりできます。

データマップを使った単純で強力なアプリケーションの構築

データマップによる地図アプリケーションの作成は、きわめて簡単です。最初の目標は、地図上にデータをプロットすることです。その後、同じデータにバインドされた編集可能なデータグリッドを追加し、データの表示方法をカスタマイズして、アプリケーションに対話機能を持たせます。

地図上へのデータのプロット

1. 新規Flexプロジェクトを作成します。
2. Yahoo! Maps SWC*ファイルをダウンロードし、libsディレクトリにコピーします。

3. この記事のサンプルファイルの中のDataMap SWCファイルを、libsディレクトリにコピーします。

   注意：サンプルファイルには、アプリケーションの完成版MXMLファイルが用意されたFlex Builderプロジェクトも含まれています。

4. メインMXMLファイルで、表示するデータを宣言します。

   private var mapData:Array = [
        {Name: "Joe", Location:"Agra"},
        {Name: "Sam", Location:"Delhi"},
        {Name: "Ram", Location:"Mumbai"},
        {Name: "Shyam", Location:"Chennai"},
        ];
        [Bindable]
        private var mapColl:ArrayCollection = new ArrayCollection(mapData);

   注意：HTTPService、WebService、またはRemoting呼び出しを使ったサーバーサイド要求を実行することで、この配列にライブデータを入力することもできます。

5. データマップコントロールをインスタンス化するために、Flex Builderで<DataMapと入力してCtrl+スペースキーを押し、コンテンツアシストを起動します。上で宣言したデータをこれにバインドします。

   <controls:DataMap
        id="mapGrid"
        yahooAppID="yourappidhere" 
        dataProvider="{mapColl}" 
        enableDrawMode="true"
        geocoderFailure="Alert.show('failed to geocode' + event)"    
        width="75%" height="100%" />

   注意：Ctrl+スペースキーが動作するのは、libsフォルダーにDatamapLib.swcが存在する場合だけです。

6. Yahoo! APIキー*を取得し、yahooAppID属性を使ってコンポーネントに割り当てます。

   この時点でアプリケーションをコンパイルして実行すると、地図が表示され、Agra、Delhi、Mumbai、Chennaiにマーカーがプロットされます。マーカーをクリックして、対応する名前を表示してみてください。先に述べたように、Ctrlキーを押しながら複数のマーカーをボックス選択したり、Shiftキーを押しながら地図上にフリーフォームを描画したりできます（図2を参照）。

   

   図2：データマップコントロールを使って作成したサンプルアプリケーション

機能の拡張

1. 同じデータを編集可能なデータグリッドに割り当てることによって、Locationフィールドの値を変更すると地図上のマーカーが即座に更新されるようにします。

   <mx:DataGrid id="dg" dataProvider="{mapColl}" editable="true" width="25%" /> 

   <mx:Application>のlayout属性をhorizontalに設定することで、データグリッドと地図を横に並べて表示します。

2. マーカーをクリックしたときにデータが表示される方法をカスタマイズするには、アイテムレンダラーを設定します。

   <controls:DataMap id="mapGrid"
         <!-- other attributes omitted for brevity -->
         >
           <controls:itemRenderer>
             <mx:Component>
               <mx:Canvas>
              <mx:TextArea editable="false" text="This guy's name is {data.Name}" />
               </mx:Canvas>
             </mx:Component>
           </controls:itemRenderer>
         </controls:DataMap>

3. 地図上のマーカーをクリックするかボックス選択したときに動作を実行するには、itemClickまたはboxSelectイベントを待ち受けます。イベントハンドラーでは、イベントオブジェクトのselectedObjectまたはselectedObjectsプロパティを使用して、選択されたアイテムを判定できます。

   <controls:DataMap id="mapGrid" itemClick="dg.selectedItem = event.selectedObject"
         <!-- other attributes omitted for brevity -->
   > 

   これで、マップ上のアイテムをクリックすると、対応するオブジェクトがデータグリッドで選択されます。

次のステップ

データマップコントロールを使うことで、地図を利用したFlexアプリケーションの開発効率が大幅に向上するはずです。データマップコントロールには、この記事で説明していない他の設定可能なプロパティもあります。これについては、データマップコンポーネントのデモ*を参照してください。

Yahoo! Maps Flash APIをデータマップなしで使用したい場合は、Adobe Developer Connectionの記事Yahoo! Maps Flash APIの使用*を参照してください。

この記事は、Creative Commons Attribution-Noncommercial 3.0 Unported Licenseのもと提供しています。

著者について