draw markers and connecting lines

src/routePlanner/map.tsx

@@ -4,7 +4,7 @@ import { InternalMapProps } from './types';
 
 import 'leaflet/dist/leaflet.css';
 
-export const MapComponent = ({ onMapClick }: InternalMapProps) => {
+export const MapComponent = ({ markers, onMapClick }: InternalMapProps) => {
     const mapContainerRef = useRef<HTMLDivElement>(null);
     const mapRef = useRef<leaflet.Map | undefined>(undefined);
 
@@ -46,5 +46,42 @@ export const MapComponent = ({ onMapClick }: InternalMapProps) => {
         };
     }, [mapRef, onMapClick]);
 
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map) {
+            return;
+        }
+
+        const layers: leaflet.Layer[] = [];
+        for (let i = 0; i < markers.length; i++) {
+            const thisMarker = markers[i];
+            const previousMarker = markers[i - 1];
+            if (thisMarker) {
+                if (previousMarker) {
+                    layers.push(
+                        leaflet.polyline([
+                            previousMarker.coordinates,
+                            thisMarker.coordinates,
+                        ]),
+                    );
+                }
+                layers.push(
+                    leaflet.marker(thisMarker.coordinates, {
+                        title: `${i + 1}`,
+                    }),
+                );
+            }
+        }
+        for (const layer of layers) {
+            layer.addTo(map);
+        }
+
+        return () => {
+            for (const layer of layers) {
+                layer.removeFrom(map);
+            }
+        };
+    }, [mapRef, markers]);
+
     return <div ref={mapContainerRef} class="map-container" />;
 };