Leaflet入門7|現在地アイコンをGoogle Map 風に変える

今回はプラグイン「leaflet-icon-pulse」使用して、Google Map風のアイコンに変更します。

Demoはこちらです。

*現在地を表示ボタンをクリックするとアイコンが表示されます。

使用するファイルは、以下の2ファイルでGitHubからダウンロードできます。

・L.Icon.Pulse.min.css

・L.Icon.Pulse.min.js

GitHub_leaflet-icon-pulse

1.全体のコード

2.解説

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

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

leaflet-icon-pulseプラグインを使用するため、css・jsファイルを読み込みます。

2−2.マーカーの設定

プラグインをマーカーとして使用します。

iconSize

アイコンの大きさを指定します。

color

アイコンの色を指定します。red、blue などで指定できます。

色を細かく調整したい場合は、デモのように16進(#1199fb)で指定することもできます。

次回は、地図上にマーカーの検索機能を追加してみたいと思います。

スポンサーリンク

シェアする

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

フォローする