I'm using react-leaflet and I added a marker with an event Handler on click to zoom to this marker , but when I try to use const map=useMap() all I get is this error => :
Uncaught Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
There might be similar questions but none have answers, can anyone please help with this? This is my code:
const map = useMap()
return (
<div>
<MapContainer
className="leaflet-container"
center={[33.8735578, 35.86379]}
zoom={9}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker
icon={port}
eventHandlers={{
click: (e) => {
map.setView(e.latlng, 14);
},
}}
position={[33.90757548098519, 35.51700873340635]}
></Marker>
</MapContainer>
Thanks!
well I solved it by making a separate component for the marker and implement the useMap() in it and it worked as so :
import React from "react";
import { Marker, useMap } from "react-leaflet";
export default function Markerwhatever(props) {
const map = useMap();
return (
<div>
<Marker
icon={props.icon}
position={[33.91907336973602, 35.51552625946782]}
eventHandlers={{
click: (e) => {
map.flyTo(e.latlng, 14);
},
}}
></Marker>
</div>
);
}