✨ [open-formulieren/open-forms#2177] Map search control with geoJson

open-formulieren · Dec 10, 2024 · 6ec4582 · 6ec4582
1 parent 5f4fb63
commit 6ec4582
Showing 1 changed file with 15 additions and 18 deletions.
diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx
@@ -79,22 +79,28 @@ 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());
   };
 
   useEffect(() => {
     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}
         <SearchControl
-          onMarkerSet={() => 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,