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='© <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でした。
お役に立てましたら幸いです。
ご一読頂き、ありがとうございました。