マーカーを表示する
表示された地図に、緯度情報と経度情報を含むデータを取り込み、マーカーを表示します。本稿では筆者が自作したJSON形式のデータを取り込みますが、公開APIより情報を取り込むことも可能です。
以下のように、jQueryのgetJSONメソッドを利用して、JSON形式のデータを指定したパスのファイルより取得します。今回使用する外部ファイルは、こちらからダウンロードしてご使用ください。
var earthquakeData = null;
$.ajaxSetup({async: false}); //同期通信
$.getJSON("data.json", function(data){
earthquakeData = data;
});
$.ajaxSetup({async: true});
また、バインドしているJSONデータは下記のようなフォーマットになっております。
[
{ "Magnitude": 4.6, "Depth": 493, "Latitude": 24.037, "Longitude": 150.1689 },
~ 省略 ~
{ "Magnitude": 6.8, "Depth": 281, "Latitude": 34.037, "Longitude": 141.9065 }
]
左から、震度、震源の深さ、緯度、経度の情報を保持しています（※注意：このデータは、サンプルとして筆者が生成したデータであり、実際の値とは異なります）。
本稿では、JSONデータを外部ファイルより取得し、igMapコントロールにバインドしていますが、単純なJavaScript配列やシェープファイルをバインドできます。取得したJSON形式のデータを以下のように設定します。
series: [{
type: "geographicSymbol",
name: "worldCities",
dataSource: earthquakeData,
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "circle"
}],
上記のコードでは、seriesに対して下記のプロパティ設定を行なっています。
- dataSource：取得したJSONデータを設定
- latitudeMemberPath：バインドしたデータの緯度にあたるフィールド名を設定
- longitudeMemberPath：バインドしたデータの経度にあたるフィールド名を設定
- markerType：表示するマーカーの形を設定（その他、三角形：triangleや星形：pentagramなど設定可能）
ここでHTMLソースを保存して、ブラウザで確認すると、以下の図ようにマーカーが表示されます。
ツールチップを追加する
表示されたマーカーに対して、ツールチップを付加します。バインドしたデータには緯度、経度のほかにマグニチュードと震源の深さを保持しているので、これらの情報をチールチップ上に表示させます。
まず、ツールチップのテンプレートを以下のように定義します。震度、深さ、緯度、経度の4つの情報を表示するテンプレートをTableタグで構成し、それぞれの項目では”${item.フィールド名}”といった形で対応するデータのフィールド名を指定しています。
<script id="quakeTemplate" type="text/x-jquery-tmpl">
<table>
<tr>
<td>震度:</td><td>${item.Magnitude}</td>
</tr>
<tr>
<td>深さ:</td><td>${item.Depth}km</td>
</tr>
<tr>
<td>緯度:</td><td>${item.Latitude}</td>
</tr>
<tr>
<td>経度:</td><td>${item.Longitude}</td>
</tr>
</table>
</script>
続いて、上記で定義したツールチップのテンプレートを使用することを宣言します。
series: [{
～省略～,
showTooltip: true,
tooltipTemplate: "quakeTemplate"
}],
上記のコードでは、seriesに対して下記のプロパティ設定を追加しています。
- showTooltip：ツールチップの使用有無を設定
- tooltipTemplate：ツールチップのテンプレートを定義しているスクリプトIDを設定
実行すると以下の図のように、マーカーにマウスホバーした時にツールチップが表示されるようになりました。
以上で、地震分布図が完成しました。
今回は詳しく紹介できませんでしたが、他のIgnite UIコントロールと組み合わせてデータフィルタリング機能を付加することもできます。こちらで紹介しているオンラインサンプルでは、igDialogコントロール、igEditorコントロールを使用して、今回作成したようなデータポイントの分布図に、ユーザ操作でフィルタリングできる機能を付加しています。
最後に
今回はigMapコントロールを用いて、地震データをプロットした分布図を作成しました。コード量も少なく、かなりシンプルに作成できたのではないかと思います。今回はすでに用意されたデータを使用しましたが、地理情報を含むAPIはさまざまなところで公開されていますので、今回の記事を参考に公開APIを活用したマッシュアップアプリを作成されてみてはいかがでしょうか。
また、Ignite UIではマップ以外にも、グリッドやチャートをはじめとしたさまざまなコントロールが用意されています。ぜひこれらのコントロールを活用し、リッチなデータ表現を実現してください。
