はじめに
Webページに地図を貼り付けられるBing Maps AJAX Controlの2回目です。今回は地図上にプッシュピン(図1)や図形を表示してみましょう。
Bing Maps AJAX Controlを利用すると地図上にプッシュピンの表示や、線や領域の描画などが可能です。多機能ではありませんが、簡単に使えます。
プッシュピン
最初は、プッシュピンを地図に追加してみましょう。プッシュピンを追加するコードを記述した、Webページ全体のHTMLファイルの内容を示します。
BingMapsKeyの部分は、Bing Maps Keyに置き換えてください。このWebページを表示した結果は図2の通りです。
プッシュピンはPushpinクラスで表します。Pushpinオブジェクトの生成時に経緯度(Locationオブジェクト)とオプションを指定します。そして、Mapクラスにあるコレクション型のentitiesプロパティにPushpinオブジェクトを追加することで、地図上に表示します。プッシュピンやこの後に紹介するポリラインなどはすべて、Mapクラスのentitiesプロパティにオブジェクトを追加することで、そのオブジェクトを地図上に表示します。
オプションは、上記のコードのようにキーと値のペアを中括弧で括ったJSONのデータ形式を用います。Mapオブジェクトの生成時にも同形式のオプションを作成して使用しています。Bing Maps AJAX Controlでは、このようなオプションの指定方法を多用しています。
プッシュピンに指定できるオプションは次の通りです。
オプション |
説明 |
anchor |
プッシュピンが指し示す地点
Pointオブジェクトを指定 |
icon |
プッシュピンの画像のURL |
height |
プッシュピンの縦幅
規定値は39 |
text |
プッシュピンに表示するテキスト |
textOffset |
プッシュピンのテキストの表示位置
Pointオブジェクトを指定
規定値は(0, 5) |
typeName |
プッシュピンの種類を任意に指定でき、指定した名前がプッシュピンを構成するHTMLタグのclass属性に指定される |
visible |
表示・非表示をtrue, falseで指定 |
width |
プッシュピンの横幅
規定値は25 |
zIndex |
プッシュピンとほかのオブジェクトとの重ね合わせ順序(Zインデックス)を指定 |
指定可能なオプションは以上です。標準機能だけではあまり凝ったことはできませんが、画像を用意して、以下のようにiconオプションを用いると自由な形のプッシュピンが作れます。
上記コードの結果は図3の通りです。プッシュピンは、地図のズームの倍率によらず大きさは変わりません。
コンストラクタ以外でオプションの値を変更したり参照したい場合はPushpinクラスのメソッドを使用します。たとえば、textの値を取得するためにgetTextメソッドが用意されています。オプションの内容を変更したい場合は、setOptionsメソッドを使用します。
ほかのオプションに対しても同様にgetから始まるメソッドが用意されています。
ポリライン
ポリライン(polyline)(図4)を使用すると地図上に経路などの線を描画できます。
ポリラインを使用したコードは次のようになります。
ポリラインはPolylineクラスで表します。オブジェクトの生成時に、Locationオブジェクトの配列をコンストラクタ引数に渡します。
指定できるオプションは次の通りです。
オプション |
説明 |
strokeColor |
線の色
Colorオブジェクトを指定 |
strokeThickness |
線の太さ |
visible |
表示・非表示をtrue, falseで指定 |
プッシュピンと比べかなりシンプルです。Colorオブジェクトはコードで使用したように不透明度とRed、Green、Blueの4値を指定する方法以外にも16進数の値からも生成できます。
ポリゴン
ポリゴン(polygon)(図5)を使用すると地図上に領域を示す多角形を描画できます。
使い方は、ポリラインとほぼ同様で、指定した複数のLocationオブジェクトの地点を頂点とした多角形が描画されます。
指定できるオプションは次の通りです。ポリラインには無かった面の塗りつぶす色があります。
オプション |
説明 |
fillColor |
面を塗りつぶす色
Colorオブジェクトを指定 |
strokeColor |
線の色
Colorオブジェクトを指定 |
strokeThickness |
線の太さ |
visible |
表示・非表示をtrue, falseで指定 |
コレクションの追加
さて、これまでMapオブジェクトのentitiesプロパティにPushpinオブジェクトなどを直接 追加してきました。このentitiesプロパティはEntityCollectionクラスというコレクション型です。entitiesプロパティのコレクションには、複数のプッシュピンなどを追加したEntityCollectionオブジェクト自身を追加し、各オブジェクトの表示も可能になっています。
Bing Maps AJAX Controlには地図上にレイヤーを管理する機能はありませんが、コレクションの追加を利用して地図上の表示オブジェクトを任意の単位で管理が可能です。
以下にEntityCollectionオブジェクトをentitiesプロパティに追加する例を示します。ふたつのEntityCollectionオブジェクトにそれぞれ、プッシュピンとポリゴンを追加しています。また、Webページにボタンを追加しボタンがクリックされると、entitiesプロパティからEntityCollectionオブジェクトを取得しコレクションに含まれているオブジェクトの表示を切り替えています。
結果は図6のようになります。
おわりに
今回はここまでです。いかがでしたでしょうか。今回は紹介しませんでしたが、地図上にはズームによって大きさの変わるタイル画像の描画も可能です。タイル画像については次の機会に紹介します。
また、今回の内容ではプッシュピンやポリゴンは地図上に表示されているだけで、クリックしても何も反応しません。地図のアプリケーションでよくあるようなプッシュピンに対して吹き出しの表示やダイアログの表示などの機能は、Bing Maps AJAX Controlには用意されていません。これらは自前で実装する必要があります。より実践的な処理は次回以降に紹介します。