Breaking News: Grepper is joining You.com. Read the official announcement!

react leaflet recenter map

KostasX answered on June 23, 2022 Popularity 5/10 Helpfulness 5/10

answer react leaflet recenter map

react leaflet recenter map

Comment

import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';

function ChangeView({ center, zoom }) {
  const map = useMap();
  map.setView(center, zoom);
}

function Map({ center, zoom }) {
  return (
    <div className="map">
      <MapContainer center={center} zoom={zoom} scrollWheelZoom={false}>
        <ChangeView center={center} zoom={zoom} /> 
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
    </div>
  );
}

Popularity 5/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: javascript map react-leaflet

Link to this answer
Share Copy Link