【React】「react-leaflet-draw」ライブラリでマーカーの画像を変更する

タイトルにある通り、今回は「react-leaflet-draw」ライブラリでマーカーの画像を変更する方法についてです。
以前投稿した「【JavaScript】Leaflet.Drawでマーカーのアイコン画像を変更する」と重複しますが、今回は「react-leaflet-draw」ライブラリを使っているので、書き方が若干異なります。

さて、早速サンプルコードです。
まずは必要なライブラリをインポートします。

import {MapContainer, TileLayer, FeatureGroup} from 'react-leaflet'
import {EditControl} from "react-leaflet-draw"
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L from 'leaflet';

const customMarker = new L.Icon({
  shadowUrl: null,
  iconAnchor: new L.Point(15, 15),
  iconSize: new L.Point(30, 30),
  iconUrl: '[画像のパス]',
});

5行目の import L from 'leaflet'; を使ってマーカー画像を変更します。
こちらをインポートした後、7～12行目のようにマーカーで使用したい画像とサイズを設定します。
私の環境では、バツマークの画像を使い、影の画像は使用せず、画像の中心をアンカーとしています。
なお、こちらの指定は使用する画像によって適宜変更してください。

マーカー画像を追加後は、下記のように指定して反映します。

<MapContainer
  id='map'
  center={this.state.latlng}>
  <TileLayer
    attribution='<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
    url="https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png"/>
  <FeatureGroup>
    <EditControl
      position="topleft"
      draw={{
        marker: {
          icon: customMarker,
        }
      }} />
  </FeatureGroup>
</MapContainer>

実際にマーカー画像を反映しているのが 10～14行目です。
上記を追加後、地図を表示してみたところ、問題なくマーカー画像が変更できました！

以上、「react-leaflet-draw」ライブラリで地図に描画できるマーカーの画像を変更する方法についてでした。
ご参考になれば幸いです。