Reputation: 287
I want to have a button outside the map that changes the view to another coordinates.
Is there any way to get mapContainer instance to call their functions? Or how can I implement that function?
I tried to get it by using ref, but it's not working. Here is my current code
const zoom = 13;
function Map({ regionCoord, regionName }) {
const mapRef = useRef();
function handleFlyToClick() {
// This don't work
// const map = mapRef.current.leafletElement
// map.flyTo(regionCoord, zoom)
}
return (
<React.Fragment>
<Grid container >
<Grid item xs={10}>
{regionCoord && <MapContainer
ref={mapRef}
center={[50,50]}
zoom={zoom}
>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={regionCoord}>
<Popup>{regionName}</Popup>
</Marker>
</MapContainer>}
</Grid>
<Grid item xs={2}>
<button onClick={handleFlyToClick}>Fly To</button>
</Grid>
</Grid>
</React.Fragment>
)
}
export default Map
I'm using react-leaflet v3
Upvotes: 15
Views: 12898
Reputation: 56011
whenCreated
doesn't exist anymore on 4.0 but there is ref
:
MapContainer:
const [map, setMap] = useState<Map|null>(null);
<MapContainer
center={[50, 50]}
zoom={zoom}
style={{ height: "90vh" }}
ref={setMap}
>
<div>
... do whatever you want with map
</div>
</MapContainer>
Upvotes: 13
Reputation: 14649
Works for both 3.x and 4.x:
Another method is to use the useMap
hook, which exists in 3.x and 4.x. In order to use it in the parent component, you just need to add a child component, e.g. MapController
below.
const MapController = () => {
const map = useMap();
// do something with map, in a useEffect hook, for example.
return <></>;
};
<MapContainer
center={[50, 50]}
zoom={zoom}
style={{ height: "90vh" }}
>
<MapController />
<div>
... do whatever you want with `map`
</div
</MapContainer>
Upvotes: 2
Reputation: 167
you need to access the map element(from the map component which is the container not MapContainer), this is a very simple example:
export default function MapComponent() {
const [mapCenter,setMapCenter] = useState([13.1538432,30.2154278])
let [zoom,setZoomLevel] = useState(15)
let [tile,setTile] = useState('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png')
let mapRef = useRef();
const fly=()=>{
mapRef.current.leafletElement.flyTo([14,30],15)
}
return (
<>
<button onClick={fly}>Click</button>
<Map center={mapCenter} zoom={zoom} ref={mapRef} style={{width:'100%',height:'100%'}}>
<TileLayer url={tile}/>
</Map>
</>
)
}
Upvotes: 0
Reputation: 14600
You need to use a component which will include your button inside. To take the map instance use whenCreated
prop of MapContainer
. I think mapRef
is not valid anymore with the latest version.
MapContainer:
const [map, setMap] = useState(null);
<MapContainer
center={[50, 50]}
zoom={zoom}
style={{ height: "90vh" }}
whenCreated={setMap}
>
...
</MapContainer>
<FlyToButton /> // use the button here outside of the MapContainer
....
Create the component with the button and its event
function FlyToButton() {
const onClick = () => map.flyTo(regionCoord, zoom);
return <button onClick={onClick}>Add marker on click</button>;
}
Upvotes: 23