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

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

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

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

Demoはこちらです。

全体のコード

解説

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

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

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

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

GitHub-vector-markers

Font Awesome

Bootstrap

Step2:vector-markersの設定

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

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

オプション
prefix:’fa’(Font Awesome)、’glyphicon’(bootstrap)
icon:使用するアイコン名(fa-utensilsの場合は、utensilsを指定)
markerColor:マーカー色。blueやredもしくは hexで指定可能(#d8c148 など)
iconColor:アイコン色。’white’や’black’またはcssのhexやrgbaなどで指定可能
spin:アイコンの回転(true/false)
extraClasses:アイコンに適用するクラス(アイコンのずれなどを調整できる)

Step3:スタイルの調整

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

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

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

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

まとめ

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

vector-markers の特徴としては、マーカーやアイコンの色を hex で指定できるところだと思います。マーカー系の多くのプラグインは、プラグインで用意している色にのみ変更できる場合が多いです。

なので、マーカーやアイコンの色を自由に指定したい場合は、vector-markers がオススメです。

スポンサーリンク

シェアする

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

フォローする