プログラミングプラグイン(Rrose)を使用して、地図のある領域にマウスオーバーした際に、ポップアップメッセージを表示したいと思います。緑色の領域にマウスカーソルを合わせるとポップアップが表示されます。Demoはこちらです。地図を描画するまでの解説は、leaflet入門1に記載しています。「leaflet.rrose-src.js」と「leaflet.rrose.css」を読み込む必要があります。各ソースは以下のサイトで配布されています。erictheise.comGitHub-Rroseまた、プラグインとは別にマウスオーバーで処理を行いたい領域を定義したデータ(GeoJSON)を読み込んでいます。表示データは、GeoJSONで定義します。今回使用するデータの一部(緑色の領域)は以下の定義となります。35.8]]]}}]}propertiesid:一意となる識別子を定義します。name:今回はポップアップに表示する文字列を定義します。style:領域のスタイルを定義します。geometrytype:描画する図形を指定します。囲われた領域を定義するので、「Polygon」を指定しています。coordinates:図形の各頂点の経度・緯度を定義します。2−3.GeoJSONデータ読み込み・イベントの設定step2で定義したGeoJSONを読み込み、イベント(mouseover)の設定を行います。graticulegraticule変数に格納されているGeoJSONデータを読み込みます。イベント(mouseover)の設定を行なっています。Rroseを使うと地図に各領域を定義し、領域ごとに処理を実装することができました。ご興味があるかは、GitHub-Rroseもご参照いただければと思います。スポンサーリンクシェアするツイートフォローする関連記事Leaflet入門|L.tileLayerのattributionをhover表示にする(CondensedAttribution)Leafletのプラグイン「Leaflet.CondensedAttribution」を使って、L.tileLayerのattribution縮小しhover表示にします。記事を読むLeaflet入門|おすすめプラグイン(42選)Leafletのプラグインをまとめました。Markerのカスタマイズや検索機能の追加など、全部で42のプラグインについて、Demoや実装方法を記載しています。イベント)D3.jsの要素の選択方法についてまとめました。ソースコードとデモを交えて記載しています。記事を読むLeaflet入門|プラグインでマーカーの色を変更する(leaflet.sprite)leafletのプラグイン(leaflet.sprite)を使用して、マーカーの色を変更します。jsファイルの読み込みのみで使用できるため、視覚的にマーカーを目立たせたい時にオススメのプラグインです。記事を読むLeaflet入門|プラグインで地図のURLハッシュを作る(Leaflet-hash)leafletのプラグイン(Leaflet-hash)を使用して、現在表示している地図のURLハッシュを作成します。URLハッシュ付きのリンクを使用すると、同じ地点・拡大率の地図をいつでも再表示することができます。参考に、D3.jsで棒グラフを作成します。余白が軸の追加方法について、実際のコードやデモを記載しています。記事を読むLeaflet入門|おすすめプラグイン(イベント処理のカスタマイズ)Leafletのプラグインで提供されている、イベント処理をカスタマイズするプラグインをまとめました。それぞれのプラグインのDemoと実装方法を記載しています。Geocoder」を使うと、住所から場所を検索することができます。本記事では、Demoと実装方法について記載しています。記事を読むLeaflet入門|プラグインでマーカーにアニメーション効果をつける(BounceMarker)leafletのプラグイン(BounceMarker)を使用して、マーカーにアニメーション効果をつけます。BounceMarkerでは、マーカーが空から降ってくるようなアニメーション効果をつけることができます。コメントをキャンセルメールアドレスが公開されることはありません。