leaflet入門|プラグインで現在地マーカーを表示する(icon-pulse)

leafletのプラグイン「icon-pulse」使用して、現在地マーカーを表示します。

実装すると以下のマーカーを表示できます。

Demoはこちらです。

Demo1(マーカーの見本)

Demo2(現在地を取得してマーカーを表示

全体のコード(Demo1)

解説

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

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

icon-pulseの css・js を読み込みます。

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

GitHub-icon-pulse

Step2:icon-pulseの設定

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

L.icon.pulse の引数にマーカーのオプションを指定できます。

オプション

・iconSize:アイコンの大きさ

・color:波形の色(cssで指定できる色)

・fillColor:マーカーの色(cssで指定できる色)

・heartbeat:波形の表示タイミング(秒)

この他にも、Demo1 の一番右端のように波形を非表示にするオプションもあります。

・animate:波形の表示(true)/非表示(false)

Step3:現在地にマーカーを表示する(Demo2)

Demo2では、ブラウザで現在地を取得しマーカーを表示しました。

抜粋したコードは以下となります。

基本的に地図の表示までは同じで、特有な処理は

・ブラウザから現在地を取得する

・現在地の取得が成功 / 失敗 した際の処理を定義する

という流れになります。

【Demo2のscriptタグ内のコード】

現在地の取得

現在地の取得は、「map.locate」を使用するとブラウザから現在地を取得することができます。

現在地の取得に成功

現在地が取得できた場合は、以下の関数 map.on(“locationfound”)が呼び出されます。

呼び出し引数に、現在地のロケーション情報が格納されているため、ここでは「location.latlng」で現在地の緯度経度を利用しています。

現在地の取得に失敗

現在地の取得に失敗するケース(ブラウザで許可されなかったなど)では、以下の関数map.on(‘locationerror’)が呼び出されます。

まとめ

icon-pulse を使用して現在地の取得・マーカーを表示しました。

icon-pulse の特徴は、マーカーや波形に自由に色を指定できる点でしょうか。

同じようなプラグイン「UserMarker」では青色のみとなりますが、こちらは若干立体的で綺麗なアイコンになっています。

なので、青色以外の色を使用したい場合は、icon-pulse がオススメです。

スポンサーリンク

シェアする

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

フォローする