leaflet入門|プラグイン(Rrose)で、マウスオーバー時に ポップアップメッセージを表示する

プラグイン(Rrose)を使用して、地図のある領域にマウスオーバーした際に、ポップアップメッセージを表示したいと思います。

【Rroseを適用した地図】

緑色の領域にマウスカーソルを合わせるとポップアップが表示されます。

Demoはこちらです。

全体のコード

 解説

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

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

Rroseを使用するには、 「leaflet.rrose-src.js」と「leaflet.rrose.css」を読み込む必要があります。

各ソースは以下のサイトで配布されています。

erictheise.com

GitHub-Rrose

また、プラグインとは別にマウスオーバーで処理を行いたい領域を定義したデータ(GeoJSON)を読み込んでいます。

GeoJSON-ウィキペディア

Step2:表示データの準備

表示データは、GeoJSONで定義します。今回使用するデータの一部(緑色の領域)は以下の定義となります。

properties

id:一意となる識別子を定義します。

name:今回はポップアップに表示する文字列を定義します。

style:領域のスタイルを定義します。

geometry

type:描画する図形を指定します。囲われた領域を定義するので、「Polygon」を指定しています。

coordinates:図形の各頂点の経度・緯度を定義します。

Step3:GeoJSONデータ読み込み・イベントの設定

step2で定義したGeoJSONを読み込み、イベント(mouseover)の設定を行います。

new L.GeoJSON( graticule

graticule変数に格納されているGeoJSONデータを読み込みます。

onEachFeature: function(feature,layer){

GeoJSONデータの features配列の各データごとに イベント(mouseover)の設定を行なっています。

Rroseを使うと地図に各領域を定義し、領域ごとに処理を実装することができました。

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

スポンサーリンク

シェアする

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

フォローする