use filtered markers in map

frontend/search/components/ngo/LeafletMap.tsx

@@ -20,20 +20,20 @@ import { useLeafletStore } from './LeafletStore'
 type LeafletMapProps = {onBoundsChange?: (bounds: L.LatLngBounds) => void}
 
 const BoundsChangeListener = ({onBoundsChange}: {onBoundsChange?: (bounds: L.LatLngBounds) => void}) => {
-  const leafletStore = useLeafletStore()
+  const { setCenter} = useLeafletStore()
 
   const map = useMap()
 
   const updateBounds = useCallback(
     () => {
-      leafletStore.setCenter(map.getCenter())
+      setCenter(map.getCenter())
 
       // onBoundsChange is unused at the moment
       onBoundsChange && onBoundsChange(
         map.getBounds()
       )
     },
-    [map, onBoundsChange],
+    [map, onBoundsChange, setCenter],
   )
 
   useEffect(() => {
@@ -92,17 +92,28 @@ const LeafletMap = ({onBoundsChange}: LeafletMapProps) => {
           </LayersControl.BaseLayer>
 
 
-          {leafletStore.markers.map(m =>
+          {leafletStore.markers.map((m, i) =>
 	    /** TODO: Maybe a clustered marker would be helpfull, but we loose the possibility of showing the radius (display accuracy of the coordinate).
 	    *         Probably the best solution is showing Circle and clustered marker.
 	    **/
-            <Circle key={m.id + Math.random() /* Till we have unique ids from the db */}
+            <Circle key={m.id + i.toString() /* Till we have unique ids from the db */}
                     center={[m.lat, m.lng]}
                     radius={m.radius}
                     pathOptions={{color: 'grey'}}>
               <Popup><a href={`#${m.id}`}>{ m.content }</a></Popup>
             </Circle>
           )}
+          {leafletStore.filteredMarkers.map((m, i) =>
+            /** TODO: Maybe a clustered marker would be helpfull, but we loose the possibility of showing the radius (display accuracy of the coordinate).
+             *         Probably the best solution is showing Circle and clustered marker.
+             **/
+            <Circle key={m.id + i.toString() /* Till we have unique ids from the db */}
+                    center={[m.lat, m.lng]}
+                    radius={m.radius}
+                    pathOptions={{color: 'blue'}}>
+              <Popup><a href={`#${m.id}`}>{ m.content }</a></Popup>
+            </Circle>
+          )}
         </LayersControl>
       </MapContainer>
     </>)