diff --git a/src/hooks/leaflet/useMap.ts b/src/hooks/leaflet/useMap.ts index cadcb52..270807f 100644 --- a/src/hooks/leaflet/useMap.ts +++ b/src/hooks/leaflet/useMap.ts @@ -3,9 +3,11 @@ import { type Ref, useEffect, useRef } from 'preact/hooks'; import 'leaflet/dist/leaflet.css'; +export type MapViewParameters = Parameters; + export const useMap = ( mapContainerRef: Readonly>, - viewParameters: Parameters, + viewParameters: MapViewParameters, ) => { const mapRef = useRef(undefined); diff --git a/src/routePlanner/hooks/useMarkersOnMap/getLayersForMarkers.ts b/src/routePlanner/hooks/useMarkersOnMap/getLayersForMarkers.ts index b163df2..fda153f 100644 --- a/src/routePlanner/hooks/useMarkersOnMap/getLayersForMarkers.ts +++ b/src/routePlanner/hooks/useMarkersOnMap/getLayersForMarkers.ts @@ -1,7 +1,14 @@ import leaflet from 'leaflet'; import type { Marker } from '../../types'; -export const getLayersForMarkers = (markers: Marker[]) => [ +export type MarkerLayersStyle = { + circleStyle: Pick; +}; + +export const getLayersForMarkers = ( + markers: Marker[], + markerLayersStyle: MarkerLayersStyle, +) => [ // lines ...markers.flatMap((thisMarker, i) => { const previousMarker = markers[i - 1]; @@ -19,11 +26,10 @@ export const getLayersForMarkers = (markers: Marker[]) => [ // circles and labels ...markers.flatMap((marker) => { const circle = leaflet.circleMarker(marker.coordinates, { + ...markerLayersStyle, bubblingMouseEvents: false, - color: 'black', fill: true, fillOpacity: 100, - radius: 10, }); const tooltip = leaflet .tooltip( diff --git a/src/routePlanner/hooks/useMarkersOnMap/index.ts b/src/routePlanner/hooks/useMarkersOnMap/index.ts index 6c607eb..78046db 100644 --- a/src/routePlanner/hooks/useMarkersOnMap/index.ts +++ b/src/routePlanner/hooks/useMarkersOnMap/index.ts @@ -2,12 +2,19 @@ import leaflet from 'leaflet'; import { type Ref, useMemo } from 'preact/hooks'; import { useLayers } from '../../../hooks/leaflet/useLayers'; import type { Marker } from '../../types'; -import { getLayersForMarkers } from './getLayersForMarkers'; +import { + type MarkerLayersStyle, + getLayersForMarkers, +} from './getLayersForMarkers'; export const useMarkersOnMap = ( mapRef: Readonly>, markers: Marker[], + markerLayersStyle: MarkerLayersStyle, ) => { - const layers = useMemo(() => getLayersForMarkers(markers), [markers]); + const layers = useMemo( + () => getLayersForMarkers(markers, markerLayersStyle), + [markers, markerLayersStyle], + ); useLayers(mapRef, layers); }; diff --git a/src/routePlanner/map.tsx b/src/routePlanner/map.tsx index 7b87bcd..331dffd 100644 --- a/src/routePlanner/map.tsx +++ b/src/routePlanner/map.tsx @@ -1,19 +1,23 @@ import { useRef } from 'preact/hooks'; -import { useMap } from '../hooks/leaflet/useMap'; +import { type MapViewParameters, useMap } from '../hooks/leaflet/useMap'; import { useMapClick } from '../hooks/leaflet/useMapClick'; import { useMarkersOnMap } from './hooks/useMarkersOnMap'; import type { MapProps } from './types'; -const defaultMapViewParameters = [ - [47.42111, 10.98528], - 13, -] satisfies Parameters[1]; +const defaultMapViewParameters: MapViewParameters = [[47.42111, 10.98528], 13]; + +const markerLayersStyle = { + circleStyle: { + color: 'black', + radius: 10, + }, +}; export const MapComponent = ({ markers, onMapClick }: MapProps) => { const mapContainerRef = useRef(null); const mapRef = useMap(mapContainerRef, defaultMapViewParameters); useMapClick(mapRef, onMapClick); - useMarkersOnMap(mapRef, markers); + useMarkersOnMap(mapRef, markers, markerLayersStyle); return
; };