Leaflet入門|プラグインでマーカーのアイコンを変更する(ExtraMarkers)

Leafletのプラグイン「ExtraMarkers」使用して、マーカーのアイコンを変更します。

ExtraMarkers は Awesome-Markers の拡張で、マーカーの図形・色が増え、Semantic UI もサポートしています。

今回は、「Font Awesome」「Bootstrap 3 icons」「Semantic UI」のアイコンを使用します。

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

【Demo1】

【Demo2】

Demoはこちらです。

Demo1を表示Demo2を表示

1.全体のコード(Demo1)

2.解説

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

2−1.プラグインの読み込み

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

また、今回使用する「Font Awesome」「Bootstrap 3 icons」「Semantic UI」はCDNを使用してアイコンを読み込みますが、各サイトからダウンロードすることもできます。

GitHub-ExtraMarkers

Font Awesome

Bootstrap 3 icons

Semantic UI

2−2.ExtraMarkersの設定

L.markerのオプション「icon」に L.ExtraMarkers.icon オブジェクトを指定します。

L.ExtraMarkers.icon の引数に使用するアイコンを指定します。

ExtraMarkersのオプション

prefix:fa(Font Awesome), glyphicon(Bootstrap),icon(Semantic UI)
icon:アイコン名を指定。
shape:マーカーの種類を指定
markerColor:マーカー色を指定(デフォルト:blue)

※この他にも色々なオプションがあります。詳細は GitHub-ExtraMarkers を参照。

2−3.スタイルの調整

アイコンによっては、マーカーの中央に表示されない(BootstrapやSemantic UI)場合があります。

その際は、オプション「extraClasses」でアイコンに独自スタイルを当てて調整することができます。

extraClasses オプションでClass「semantic-ui-custom」を指定しています。
この場合、i.semantic-ui-custom クラスがアイコンに適用されます。

3.まとめ

ExtraMarkers でマーカーのアイコンを変更しました。
Awesome-Markers の拡張ということもあり、マーカーの種類や使えるアイコンが増えています。
特にSemantic UI を使用する場合は、 ExtraMarkers を選択という感じでしょうか。

その他のマーカー系のおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン(マーカーのカスタマイズ)

マーカー系を含む全てのおすすめプラグインは、こちらに記載しています。
Leaflet入門|おすすめプラグイン 

スポンサーリンク

シェアする

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

フォローする