diff --git a/frontend/search/components/ngo/LeafletMap.tsx b/frontend/search/components/ngo/LeafletMap.tsx
index 4600f5c..5089f11 100644
--- a/frontend/search/components/ngo/LeafletMap.tsx
+++ b/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) => {
- {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.
**/
-
{ m.content }
)}
+ {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.
+ **/
+
+ { m.content }
+
+ )}
>)