diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx index e835ff6fe..9b27e6b04 100644 --- a/src/components/Map/index.jsx +++ b/src/components/Map/index.jsx @@ -79,13 +79,20 @@ const LeaftletMap = ({ const modifiers = disabled ? ['disabled'] : []; const className = getBEMClassName('leaflet-map', modifiers); - const onFeatureCreate = event => { + const replaceMapLayer = layer => { // Remove the old layers and add the new one. // This limits the amount of features to 1 - const newLayer = event.layer; ref.current?.clearLayers(); - ref.current?.addLayer(newLayer); + ref.current?.addLayer(layer); + }; + const onFeatureCreate = event => { + replaceMapLayer(event.layer); + onGeoJsonFeatureSet(ref.current?.toGeoJSON()); + }; + + const onSearchMarkerSet = event => { + replaceMapLayer(event.marker); onGeoJsonFeatureSet(ref.current?.toGeoJSON()); }; @@ -93,8 +100,7 @@ const LeaftletMap = ({ if (!ref.current) { return; } - ref.current?.clearLayers(); - Leaflet.geoJSON(geoJsonFeature).addTo(ref.current); + replaceMapLayer(Leaflet.geoJSON(geoJsonFeature)); }, [geoJsonFeature, ref.current]); return ( @@ -141,7 +147,7 @@ const LeaftletMap = ({ ) : null} console.log('TODO')} + onMarkerSet={onSearchMarkerSet} options={{ showMarker: false, showPopup: false, @@ -228,15 +234,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({ @@ -255,15 +252,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,