React Leafletで地図をrefreshする方法

公開日:

更新日:

React Leaflet(OpenStreetMap)に関して

React Leafletを使用した地図コンポーネントを作成します。(言語はJavascriptです)

緯度と経度のPropsを渡して更新させたい時に一手間かかったので共有します。

方法:ChangeViewという関数をMapContainerの中に入れる

LeafletMap.js

1import { MapContainer, TileLayer } from "react-leaflet";
2import "leaflet/dist/leaflet.css";
3import "./styles.css";
4import { useMap } from "react-leaflet/hooks";
5
6const LeafletMap = (props) => {
7  const { lat, lon } = props;
8
9  function ChangeView({ center }) {
10    const map = useMap();
11    map.setView(center);
12    return null;
13  }
14
15  return (
16    <MapContainer center={[lat, lon]} zoom={15}>
17      <ChangeView center={[lat, lon]} />
18      <TileLayer
19        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
20        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
21      />
22    </MapContainer>
23  );
24};
25
26export default LeafletMap;
27
28

今回はLeafLetMap.jsというコンポーネントを作成すると仮定します。

このコンポーネントは緯度と経度をPropsでもらっているので、受け取る値が変わればその都度地図も更新されます。

LeafleMap.jsを利用する他のコンポーネント

1<div>
2  <LeafletMap lat="51.505" lon="-0.09" />
3</div>

上記のような感じで緯度と経度を渡せば動きます。

※参考にさせて頂いた記事

・React leaflet center attribute does not change when the center state changes

以上、React Leafletで地図を更新するTipsでした。

お役に立てましたら幸いです。

ご一読頂き、ありがとうございました。