leaflet入門|プラグインでマーカーの色を変更する(leaflet.sprite)

leafletのプラグイン「leaflet.sprite」使用して、マーカーの色を変更します。

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

Demoはこちらです。

全体のコード

解説

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

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

leaflet.spriteの js は GitHubからダウンロードできます。

GitHub-leaflet.sprite

 Step2:マーカーの色を設定する

マーカーの設定の際に、L.spriteIcon オブジェクトを使用して色を設定します。

色は L.spriteIcon の引数で指定できますが、何も指定しない場合は blue が設定されます。

また、今回は leafletをcdnから読み込んでいるため、マーカーの影画像(marker-shadow.png)のパスがデフォルトとは異なるため、L.Icon.Default.imagePath でパスを上書きしています。

以上で、leaflet.sprite の実装が完了です。

まとめ

leaflet.sprite でマーカーの色を変更しました。

jsの読み込みだけで簡単に使用できるのがいいですね。

視覚的にマーカーを目立たせたい時にオススメのプラグインです。

スポンサーリンク

シェアする

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

フォローする