From 4315d0301d8d1b2445d44c9dd1f61e9c6b79c7f9 Mon Sep 17 00:00:00 2001
From: Inga <inga-lovinde@noreply.oomza.cutegay.software>
Date: Sun, 19 Nov 2023 13:34:20 +0000
Subject: [PATCH] minor improvements

---
 src/hooks/leaflet/useMap.ts                      |  4 +++-
 .../hooks/useMarkersOnMap/getLayersForMarkers.ts | 12 +++++++++---
 src/routePlanner/hooks/useMarkersOnMap/index.ts  | 11 +++++++++--
 src/routePlanner/map.tsx                         | 16 ++++++++++------
 4 files changed, 31 insertions(+), 12 deletions(-)

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