【React】「react-leaflet-draw」ライブラリを使って地図上に矩形や円を描く

以前の「【JavaScript】Leaflet Drawプラグインを使って地図上に円や矩形を描く」という記事で紹介した Leaflet Draw プラグインが React コンポーネント化されているライブラリ「react-leaflet-draw」があったのでご紹介です。
なお、Leaflet Draw プラグインの詳細につきましては、上の記事をご参考ください。

GitHub のページはこちらです。

GitHub – alex3165/react-leaflet-draw: React component for leaflet-draw on top of react-leaflet
https://github.com/alex3165/react-leaflet-draw

ライブラリのインストールは下記のコマンドで行います。

npm install react-leaflet-draw leaflet-draw @react-leaflet/core --save

ライブラリをインストールする際は react-leaflet-draw の他に leaflet-draw と、私の環境の場合は @react-leaflet/core もインストールする必要がありました。
また場合によっては、react-leaflet のバージョンも調整する必要があるようで、私の環境では 3.2.5 の最新バージョンにアップデートしました。

サンプルコードは下記のとおりです。
まず、必要なコンポーネントと CSS を下記のようにインポートします。

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';

描画部分は下記のように記述します。

<MapContainer
  id='map'
  center={this.state.latlng}
  zoom={this.state.zoom}>
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
  <FeatureGroup>
    <EditControl
      position="topleft" />
  </FeatureGroup>
</MapContainer>

サンプルコードは以上です。

こちらを実行して確認したところ、問題なく図形描画のボタンが表示されていました！
ただ、マーカーの影の画像だけバグっていましたので、こちらは後ほど修正しようと思います。
あと、ボタンの説明文がすべて英語なので、こちらも日本語に変更したいですね。

以上、「react-leaflet-draw」ライブラリを使って地図上に矩形や円を描く方法についてでした。
ご参考になれば幸いです。