leaflet入門|プラグインでマーカーをハイライト表示にする(marker.highlight)

leafletのプラグイン「marker.highlight」を使用すると、マーカーをハイライト表示にすることができます。

常時ハイライトもしくは、マウスオーバー時のみハイライト表示にすることができます。

実装すると以下のようになります。

Demoを表示

全体のコード

解説

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

Step1:ファイルの配置

marker.highlightの本体は GitHubからダウンロードできます。

GitHub-marker.highlight

GitHubから取得したcss・jsファイルを以下のように配置します。

index.html
css/leaflet.marker.highlight.css
js/leaflet.marker.highlight.js

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

Step1で配置した css・jsファイルを読み込みます。

Step3:marker.highlightの設定

L.markerオブジェクトのオプションで、「highlight」を指定するだけでハイライト表示にすることができます。

highlightの設定値は、2種類あります。

permanent:常時ハイライトにします。

temporary:マウスオーバー時のみハイライトにします。

以上の簡単な設定で、マーカーをハイライト表示にすることができます。

スポンサーリンク

シェアする

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

フォローする