Version: v4.x

Events

Usage

Click the map to show a marker at your detected location

Live Editor

function LocationMarker() {   const [position, setPosition] = useState(null)   const map = useMapEvents({     click() {       map.locate()     },     locationfound(e) {       setPosition(e.latlng)       map.flyTo(e.latlng, map.getZoom())     },   })    return position === null ? null : (     <Marker position={position}>       <Popup>You are here</Popup>     </Marker>   ) }  render(   <MapContainer     center={{ lat: 51.505, lng: -0.09 }}     zoom={13}     scrollWheelZoom={false}>     <TileLayer       attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'       url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"     />     <LocationMarker />   </MapContainer>, )

Result