leaflet入門|プラグイン(Leaflet.utfgrid)で、マウスオーバーイベント実装する

leafletのプラグイン(Leaflet.utfgrid)を使用して、地図のある領域に「マウスオーバー」、または「クリック」した際の処理を簡単に実装して見たいと思います。

【Leaflet.utfgridを適用した地図(イベント:マウスオーバー)】

マウスポインタが当たった国名が地図の下に表示されます。

【Leaflet.utfgridを適用した地図(イベント:クリック)】

クリックした箇所の国名がポップアップで表示されます。

Demoはこちらです。

全体のコード

解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

Step1:UTFGridとは?

プラグイン名になっている、UTFGrid には以下の特徴があります。

・地図の画像データと共に、様々な属性値もタイルで配信することができる。
・ポリゴンデータを読み込む方式と比較して、クライアント側での動作が軽い。

「ポリゴンデータを読み込む方式」は、leafletの他のプラグイン(leaflet.Rroseなど)です。

※ leaflet.Rrose の使い方は、こちらを参照。

詳しい仕様は、utfgrid-spec を参照してください。

Step2:プラグインの読み込み

leaflet.utfgrid を使用するには、「leaflet.utfgrid.js」のみ読み込む必要があります。

ソースは、GitHub-leaflet.utfgrid から取得できます。

Step3:UTFGridデータの読み込み

今回は、mapboxから提供されているデータを使用します。

UTFGrid のデータは独自に作成することもできます。

作成方法は、UTFGrid-Spec の Write 項目を参照してください。

Step4:各イベント処理の実装

イベント処理は以下のように定義します。

・click:utfGrid.on(‘click’, function (e) {});

・mouseover:utfGrid.on(‘mouseover’, function (e) {});

・mouseout:utfGrid.on(‘mouseout’, function (e) {});

今回のデモでは、clickとmouseoverイベントを実装しました。

【実装したclickイベント】

クリックした場所に、マーカーを設置しポップアップメッセージに国名を表示するようにしています。

【実装したmouseoverイベント】

マウスカーソルがあたっている場所の国名を、html要素(id = ‘hover’)に表示します。

Leaflet.utfgrid を使うと UTFGrid で定義さた情報を簡単に読み込むことができました。

また、各イベントも定義できるため汎用的に使用できそうです。

ご興味があるかは、GitHub-Leaflet.utfgrid もご参照いただければと思います。

スポンサーリンク

シェアする

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

フォローする