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

leaflet(1.3)を使ってマップに現在地を表示します。

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

Demoはこちらです。

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

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

・L.Icon.Pulse.min.css

・L.Icon.Pulse.min.js

GitHub_leaflet-icon-pulse

全体のコード

解説

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

step1(プラグインの読み込み)

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

 step2(マーカーの設定)

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

iconSize

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

color

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

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

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

スポンサーリンク

シェアする

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

フォローする