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

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

mapkey-iconでは、MapkeyIcons のアイコンを使用してマーカーのアイコンを変更します。

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

Demoはこちらです。

全体のコード

解説

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

Step1:ファイルの配置

ソースファイルは以下の構成になっています。

index.html
css/L.Icon.Mapkey.css
css/MapkeyIcons.css
css/MapkeyIcons.woff
js/L.Icon.Mapkey.js

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

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

GitHub-mapkey-icon

Step3:mapkey-icon の設定

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

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

オプション
icon:MapkeyIconsのアイコン名を指定。’mki-airport’の場合、’airport’と指定します。
size:アイコンの大きさをピクセルで指定します。(デフォルト:26)
color:アイコンの色を指定します。(デフォルト:’white’)
background:マーカーの背景色を指定します。(デフォルト:’#1F7499’)
hoverEffect:マーカーhoverした際の効果を指定します。(デフォルト:true)
borderRadius:マーカーの形を指定します。(デフォルト:100、円の形)

※この他のオプションは、GitHub-mapkey-icon を参照。

まとめ

mapkey-icon でマーカーのアイコンを変更しました。
アイコンの色・マーカーの背景色を自由に設定できるため簡単にオリジナルのマーカーが作成できます。

スポンサーリンク

シェアする

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

フォローする