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 } + + )} )