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

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

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

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

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

【Demo1】

【Demo2】

Demoはこちらです。

Demo1

Demo2

全体のコード(Demo1)

解説

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

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

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

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

GitHub-ExtraMarkers

Font Awesome

Bootstrap 3 icons

Semantic UI

Step2: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 を参照。

Step3:スタイルの調整

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

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

extraClasses オプションでClass「semantic-ui-custom」を指定しています。

この場合、i.semantic-ui-custom クラスがアイコンに適用されます。

まとめ

ExtraMarkers でマーカーのアイコンを変更しました。

Awesome-Markers の拡張ということもあり、マーカーの種類や使えるアイコンが増えています。

特にSemantic UI を使用する場合は、 ExtraMarkers を選択という感じでしょうか。

スポンサーリンク

シェアする

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

フォローする