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

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

今回は、「Font Awesome」「Glyphicons」のアイコンを使用します。

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

Demoを表示

1.全体のコード

2.解説

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

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

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

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

GitHub-Awesome-Markers

Font Awesome

Glyphicons

2−2.Awesome-Markersの設定

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

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

Awesome-Markersのオプション

prefix:Font Awesomeの場合は「fa」を指定。Glyphiconsの場合は「glyphicon」を指定。
icon:アイコンを指定。(fa-utensilsの場合は、「utensils」を指定)
markerColor:マーカー色(’red’, ‘darkred’, ‘orange’, ‘green’, ‘darkgreen’, ‘blue’, ‘purple’, ‘darkpurple’, ‘cadetblue’)

2−3.CSSのカスタマイズ

Demoでは、中央にある赤いマーカーのアイコンが若干左側にズレています。

アイコンによりズレが生じることがあるので、その場合は「extraClasses」オプションを使用してスタイルを調整します。

この場合は、 extraClassesに glyphicons-custom クラスを設定しています。

glyphicons-custom クラス

右に動かすため、左に 1pxマージンを設定しました。

Demoでは、一番右側にあるマーカーがこの設定をしたものになります。

3.まとめ

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

アイコンによっては若干のズレがありますが、extraClasses オプションを使用すると簡単に修正することができます。

設定も少なめなので、使用しやすいと思います。

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

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

スポンサーリンク

シェアする

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

フォローする

コメント

  1. […]  Font Awesome を使ってマーカーを描画するには、プラグイン「Awesome-Markers」を使う方法も有りますが、単純に divIcon を使って描画することもできます。 […]