minor improvements

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<Map['setView']>;
+
 export const useMap = (
     mapContainerRef: Readonly<Ref<HTMLElement>>,
-    viewParameters: Parameters<Map['setView']>,
+    viewParameters: MapViewParameters,
 ) => {
     const mapRef = useRef<leaflet.Map | undefined>(undefined);
 

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<leaflet.CircleMarkerOptions, 'color' | 'radius'>;
+};
+
+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(

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<Ref<leaflet.Map | undefined>>,
     markers: Marker[],
+    markerLayersStyle: MarkerLayersStyle,
 ) => {
-    const layers = useMemo(() => getLayersForMarkers(markers), [markers]);
+    const layers = useMemo(
+        () => getLayersForMarkers(markers, markerLayersStyle),
+        [markers, markerLayersStyle],
+    );
     useLayers(mapRef, layers);
 };

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<typeof useMap>[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<HTMLDivElement>(null);
     const mapRef = useMap(mapContainerRef, defaultMapViewParameters);
     useMapClick(mapRef, onMapClick);
-    useMarkersOnMap(mapRef, markers);
+    useMarkersOnMap(mapRef, markers, markerLayersStyle);
 
     return <div ref={mapContainerRef} class="map-container" />;
 };