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

open-formulieren · Jan 6, 2025 · 3a05f6c · 3a05f6c
1 parent 7aa7549
commit 3a05f6c
Showing 1 changed file with 12 additions and 21 deletions.
diff --git 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}
         <SearchControl
-          onMarkerSet={() => 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,