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

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

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

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

Demoはこちらです。

全体のコード

解説

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

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

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

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

GitHub-BeautifyMarker

Font Awesome

Glyphicons

Google Material Icon

Step2:BeautifyMarkerの設定(Font Awesome、Glyphicons)

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

使用するマーカーは、L.BeautifyIcon.icon のオプション で設定します。

以下は、Font Awesome を使用する場合のコードの抜粋です。

L.BeautifyIcon.iconのオプション
prefix: Font Awesomeの場合は「fa」を指定。Glyphiconsの場合は「glyphicon」を指定。
icon: アイコンを指定。(fa-utensilsの場合は、「utensils」を指定)
iconShape: アイコンの形(circle, marker, circle-dot, rectangle, rectangle-dot, doughnut)
borderColor: 線の色。
textColor: フォントカラー。
backgroundColor: 背景色。

Step3:BeautifyMarkerの設定(Google Material Icon)

「Font Awesome」「Glyphicons」は、L.BeautifyIcon.iconのオプションの「prefix」「icon」で使用するアイコンを指定しましたが、Google Material Icon は、「html」オプションで直接 html を使用します。

アイコンに適用するスタイルも、 htmlで指定します。

Demoで表示される通り、iconShape が Circle の場合、ポップアップの位置がズレてしまいます。Markerの場合は、正しい位置に表示されます。

まとめ

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

「Font Awesome」「Glyphicons」は BeautifyMarker のオプションで簡単にアイコンを表示することができました。

「Google Material Icon」は
・ポップアップがズレてしまう。
・スタイルを調整するのに、CSSを指定する必要がある。
と扱うのに若干手間がかかってしまうため、メインは「Font Awesome」「Glyphicons」を使用してアイコンが足りない場合は、「Google Material Icon」を使用するのが無難かもしれません。

スポンサーリンク

シェアする

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

フォローする