CodeZine(コードジン)

特集ページ一覧

jQueryで地震分布図を作成しよう

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/04/25 15:45
目次

地図の表示

 実際に、igMapコントロールを配置し、簡単な地図を表示します。

<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>earthquakeMap</title> 
        <!-省略(ここでjQuery, jQuery UI, Modernizr など先述のスクリプトを読み込んでいる。) --> 
    <script type="text/javascript">
			$.ig.loader({
			scriptPath: 'Scripts/js/',
			cssPath: 'Scripts/css/',
			resources: 'igMap'
		});
 
    $.ig.loader(function () {
        $("#earthquakeMap").igMap({
            width: "700px",
            height: "500px",
            backgroundContent: {
                type: "openStreet"
            },
            series: [{
                type: "geographicSymbol",
                name: "worldCities"
            }]
        });
    });
    </script>
 
    </head>
    <body>
        <div id="earthquakeMap"></div>
    </body>
</html>

 上記のコードでは、igMapに対して主に以下のプロパティ設定を行なっています。

  • backgroundContent:マッププロバイダーの種類
  • series:マップの表示形式

 マッププロバイダーの指定について、Open Street Mapを利用する場合はtypeに”OpenStreet”と設定するだけで利用することができますが、Bing MapsやCloud Made Mapsを使用する場合は、それぞれのサービスでアカウントを取得し、発行されたキーを下記のように設定する必要があります。

backgroundContent: {
    type: "bing",
    key: "sample123"
}

 また、今回は地震の分布をデータポイントとして表現したいので、seriesのtypeプロパティに”geographicSymbol”を指定し、表示形式を地図シンボルシリーズに設定しています。

 ここで、一度保存したHTMLファイルをブラウザで表示すると、以下のように世界地図が表示されます。

図11 実行結果1
図11 実行結果1

 続いて、表示範囲の絞り込みを行います。以下のコードをseriesプロパティ設定の後ろに挿入します。

windowRect: {
    left: 0.67,
    top: 0.32,
    height: 0.15,
    width: 0.15 
}

 Leftとtopの指定で表示する位置を決定し、heightとwidthの指定で表示する範囲を決定します。Heightとwidthは0~1の値を設定することができ、0に近づくほど拡大されていきます。以下の図のように日本近海が表示されました。

図12 実行結果2
図12 実行結果2

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 山口 慧(ヤマグチ サトル)

    SIerにソフトウェアエンジニアとして5年勤めた後、2012年にインフラジスティックス・ジャパンに入社。現在は、様々な技術と英語に囲まれる好環境で、日々開発者のサポートをしています。

バックナンバー

連載:Infragistics NetAdvantageチュートリアル

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5