CSSだけでLeafletのマーカーの色を変える簡単な方法

Leafletのマーカーを変えたい時、検索するとプラグインを使う方法がヒットします。

• Leaflet入門｜プラグインでマーカーの色を変更する（leaflet.sprite）
• 【OpenStreetMap】Leafletでマーカーの色を変更する方法

しかし色を変えるためだけに外部ライブラリの依存関係を増やしたくありません。

色々試していたところ、CSSを使えば簡単にマーカーの色を変化させられることに気づきました。

▲左が変更後、右が変更前（デフォルト）のアイコン

CSSだけでLeafletのマーカーの色を変える方法

まずL.iconでカスタムアイコンを宣言します。
（指定するURLはデフォルトのアイコンが置いてある場所なら何でもOKです。適宜環境に合わせて変更してください。）

javascript

const redIcon = L.icon({
  iconUrl: "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon.png",
  iconRetinaUrl: "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon-2x.png",
  shadowUrl: "https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  tooltipAnchor: [16, -28],
  shadowSize: [41, 41],
  className: "icon-red", // <= ここでクラス名を指定
});

ここで大事なのがclassNameでアイコンのクラス名を指定することです。
ここで指定したクラス名は、後ほどCSSで色変え指定をする時に使います。
他の要素とクラス名が衝突しそうなときは自由に名前を変更してもらって大丈夫です。

次にマーカーの作成です。
L.markerでマーカーを作成する際に、第2引数のiconプロパティに先ほど宣言したアイコン（ここではredIcon）を指定します。

javascript

L.marker([35, 135], { icon: redIcon }).addTo(map);
                  // ^^^^^^^^^^^^^^^ オプションのiconプロパティに先ほど宣言したアイコンを指定

なおマーカーに対してmarker.setIcon(redIcon)のように指定することで、後から動的にマーカーを変更することもできます。

最後にCSSの設定です。
最初のアイコン宣言時に指定したクラス名に対して、filterプロパティで色を変更していきます。

css

.icon-red { /* icon-redは最初に指定したクラス名 */
  filter: hue-rotate(150deg);
}

hue-rotateは色相環を回転させる関数です。
（色相環については他の方の記事を参考にしてください。）

ここでは150degを指定しているため、元のアイコンの色である青色から150度回転した赤色のアイコンに変化します。

ここに他の値を指定すると別の色になります。試したところ、

• 50deg：紫
• 120deg：ピンク
• 150deg：赤
• 180deg：茶
• 250deg：緑

という感じになりました。

まとめ

• CSSだけでLeafletのマーカーの色を変えることができる
  1. JSでアイコン宣言
  2. マーカー使用時に第2引数でアイコンを指定
  3. CSSでプロパティを設定して色変え
• 色相環を何度回転させるかによって、赤色だけでなく紫色や緑色もいける