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

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

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

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

Demoはこちらです。

全体のコード

解説

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

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

Leaflet.Icon.Glyphの js は GitHubからダウンロードできます。

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

GitHub-Leaflet.Icon.Glyph

Font Awesome

Glyphicons

Step2:マーカーの設定

L.markerのオプション(icon)にて、各アイコンを設定します。

iconには、L.icon.glyph の「prefix」と「glyph」で使用するアイコンを設定します。

例えば、 Font Awesome の fa-utensils の場合は、次のように設定します。

prefix: ‘fa’

glyph: ‘utensils’

以上で、Leaflet.Icon.Glyph の実装が完了です。

まとめ

Leaflet.Icon.Glyph でマーカーのアイコンを変更しました。
Leaflet.Icon.Glyphでは、今回使用した「Font Awesome」や「Glyphicons」の他にも様々なアイコンを使用することができます。
詳細は、GitHub-Leaflet.Icon.Glyph を参照してください。

スポンサーリンク

シェアする

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

フォローする