【JavaScript】Leaflet.Drawでマーカーのアイコン画像を変更する

地図上に図形やマーカーを描画できる Leaflet.Draw で、マーカーのアイコンを任意の画像に変更する方法についてです。
GitHub にサンプルコードが掲載されていたので、ほぼそのままコピー＆ペーストしたら動作しました。

Leaflet.Draw の GitHub ページはこちらから。

GitHub – Leaflet/Leaflet.draw: Vector drawing and editing plugin for Leaflet
https://github.com/Leaflet/Leaflet.draw

サンプルコードは下記のとおりです。

const map = L.map('map', {
  center: [34.797345395117546, 137.5804696201213],
  zoom: 13,
  drawControl: false,
});
const tiles = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
  attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
}).addTo(map);

// 図形描画ボタンをマップに追加
let drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// マーカー
const customMarker = L.Icon.extend({
  options: {
    shadowUrl: null,
    iconAnchor: new L.Point(15, 15),
    iconSize: new L.Point(30, 30),
    iconUrl: '[アイコン画像のURL]',
  }
});

let drawControl = new L.Control.Draw({
    draw: {
      marker: {
        icon: new customMarker(),
      },
    },
    edit: {
      featureGroup: drawnItems
    }
});
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (e) {
  editableLayers.addLayer(e.layer);
});

今回重要なのは、15～22 行目と、26～28 行目です。
15～22 行目でカスタムアイコンを設定し、それを 26～28 行目で地図に反映しています。
上記を追加して実行したところ、マーカーのアイコンが設定した画像に置き換わっていました！
なお、今回はアイコン画像の関係上、マーカーの中央にアンカーが来るように設定していますが、こちらは画像の見た目によって変更してください。
アイコン画像のサイズについても、適宜調整してください。

以上、Leaflet.Draw でマーカーのアイコンを任意の画像に変更する方法についてでした。
ご参考になれば幸いです。