diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx index 3eeafaeeb..841083f31 100644 --- a/src/components/Map/index.jsx +++ b/src/components/Map/index.jsx @@ -87,22 +87,22 @@ const LeaftletMap = ({ const className = getBEMClassName('leaflet-map', modifiers); const onFeatureCreate = event => { - // Remove the old layers and add the new one. - // This limits the amount of features to 1 - const newLayer = event.layer; - featureGroupRef.current?.clearLayers(); - featureGroupRef.current?.addLayer(newLayer); + onGeoJsonFeatureSet(event.layer.toGeoJSON()); + }; - onGeoJsonFeatureSet(featureGroupRef.current?.toGeoJSON()); + const onSearchMarkerSet = event => { + onGeoJsonFeatureSet(event.marker.toGeoJSON()); }; useEffect(() => { if (!featureGroupRef.current) { return; } + // Remove the old layers and add the new one. + // This limits the amount of features to 1 featureGroupRef.current?.clearLayers(); - Leaflet.geoJSON(geoJsonFeature).addTo(featureGroupRef.current); - }, [geoJsonFeature, featureGroupRef.current]); + featureGroupRef.current?.addLayer(Leaflet.geoJSON(geoJsonFeature)); + }); return ( <> @@ -148,7 +148,7 @@ const LeaftletMap = ({ ) : null} console.log('TODO')} + onMarkerSet={onSearchMarkerSet} options={{ showMarker: false, showPopup: false, @@ -235,15 +235,6 @@ const SearchControl = ({onMarkerSet, options}) => { const buttonLabel = intl.formatMessage(searchControlMessages.buttonLabel); - const setMarker = useCallback( - result => { - if (result.location) { - onMarkerSet([result.location.y, result.location.x]); - } - }, - [onMarkerSet] - ); - useEffect(() => { const provider = new OpenFormsProvider(baseUrl); const searchControl = new GeoSearchControl({ @@ -262,15 +253,15 @@ const SearchControl = ({onMarkerSet, options}) => { searchControl.button.setAttribute('aria-label', buttonLabel); map.addControl(searchControl); - map.on('geosearch/showlocation', setMarker); + map.on('geosearch/showlocation', onMarkerSet); return () => { - map.off('geosearch/showlocation', setMarker); + map.off('geosearch/showlocation', onMarkerSet); map.removeControl(searchControl); }; }, [ map, - setMarker, + onMarkerSet, baseUrl, showMarker, showPopup,