【React】Leafletの地図を簡単に実装できるReactコンポーネント「react-leaflet」

プロジェクト内に地図を表示する時に、よく Leaflet というライブラリを使っているのですが、今回はその Leaflet を React コンポーネントとして簡単に実装できるライブラリ react-leaflet のご紹介です。

公式サイトはこちらから。

React-Leaflet · ⚛️ React components for 🍃 Leaflet maps
https://react-leaflet.js.org/

Leaflet の公式サイトはこちらです。

Leaflet – a JavaScript library for interactive maps
https://leafletjs.com/

実装方法ですが、まず Leaflet と react-leaflet をインストールします。

npm install leaflet react-leaflet --save

上記のコマンドを実行し終えたら、あとは任意の場所に下記を追加するだけです。
まず、下記で必要なファイルをインポートします。

import 'leaflet/dist/leaflet.css';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

そして地図を表示したい場所に下記コードを追加します。

<Map center={[地図の中央位置（緯度経度）]} zoom={13}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" />
  <Marker position={[マーカーを表示したい場所（緯度、経度）]}>
    <Popup>[吹き出しに表示するテキスト]</Popup>
  </Marker>
</Map>

作業としてはこれだけ！

なお、デフォルトのマップピンではなく、他の画像に置き換えたいときは下記のようにします。

import L from 'leaflet';

const marker = L.icon({
  iconUrl: '[マップピンの画像]',
  iconSize: [25, 41],
  iconAnchor: [13, 41],
  popupAnchor: [0, -45],
  shadowUrl: '[マップピンの影の画像]',
  shadowSize: [30, 60],
  shadowAnchor: [8, 60]
});

アイコンのサイズやアンカー位置は任意の数値に置き換えてください。

上記を追加したら、マーカーコンポーネントを下記のように書き換えます。

<Marker position={[マーカーの緯度経度]} icon={marker}><Popup>[吹き出しに表示するテキスト]</Popup></Marker>

icon プロパティで、上で設定したマーカーを指定しています。

マーカーコンポーネントは、他にもアイコンの透明度や、ドラッグの許可/禁止を設定できるプロパティがあります。
詳しくは、公式サイトの API を参考にしてください。

以上、React のプロジェクトで Leaflet を実装できるライブラリ「react-leaflet」のご紹介でした。
ご参考になれば幸いです。