implemented markers (text only)

package-lock.json

@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "leaflet": "^1.9.4",
+                "nanoid": "^5.0.3",
                 "preact": "^10.13.1"
             },
             "devDependencies": {
@@ -4209,10 +4210,9 @@
             "dev": true
         },
         "node_modules/nanoid": {
-            "version": "3.3.7",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-            "dev": true,
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.3.tgz",
+            "integrity": "sha512-I7X2b22cxA4LIHXPSqbBCEQSL+1wv8TuoefejsX4HFWyC6jc5JG7CEaxOltiKjc1M+YCS2YkrZZcj4+dytw9GA==",
             "funding": [
                 {
                     "type": "github",
@@ -4220,10 +4220,10 @@
                 }
             ],
             "bin": {
-                "nanoid": "bin/nanoid.cjs"
+                "nanoid": "bin/nanoid.js"
             },
             "engines": {
-                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+                "node": "^18 || >=20"
             }
         },
         "node_modules/natural-compare": {
@@ -4590,6 +4590,24 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/postcss/node_modules/nanoid": {
+            "version": "3.3.7",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+            "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
         "node_modules/preact": {
             "version": "10.19.2",
             "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.2.tgz",

package.json

@@ -12,6 +12,7 @@
     },
     "dependencies": {
         "leaflet": "^1.9.4",
+        "nanoid": "^5.0.3",
         "preact": "^10.13.1"
     },
     "devDependencies": {

src/index.tsx

@@ -1,9 +1,10 @@
 import { render } from 'preact';
-import './style.css';
 import { RoutePlanner } from './routePlanner';
 
+import './style.css';
+
 export function App() {
-    return (<RoutePlanner />);
+    return <RoutePlanner />;
 }
 
 const app = document.getElementById('app');

src/routePlanner/index.tsx

@@ -1,9 +1,30 @@
+import { useMemo, useState } from 'preact/hooks';
+import { MapComponent } from './map';
+import { Coordinates, Marker } from './types';
+
 import './style.css';
-import { MapComponent } from "./map"
+import { MarkersComponent } from './markers';
+import { nanoid } from 'nanoid';
 
 export const RoutePlanner = () => {
-    return <section class="route-planner">
-        <section class="markers">Markers</section>
-        <section class="map"><MapComponent /></section>
-    </section>
-}
+    const [markers, setMarkers] = useState<Marker[]>([]);
+    const onMapClick = useMemo(
+        () => (coordinates: Coordinates) =>
+            setMarkers((markers) => [
+                ...markers,
+                { coordinates, key: nanoid(10) },
+            ]),
+        [],
+    );
+
+    return (
+        <section class="route-planner">
+            <section class="markers">
+                <MarkersComponent markers={markers} />
+            </section>
+            <section class="map">
+                <MapComponent onMapClick={onMapClick} markers={markers} />
+            </section>
+        </section>
+    );
+};

src/routePlanner/map.tsx

@@ -1,8 +1,10 @@
-import 'leaflet/dist/leaflet.css';
 import leaflet from 'leaflet';
 import { useEffect, useRef } from 'preact/hooks';
+import { InternalMapProps } from './types';
+
+import 'leaflet/dist/leaflet.css';
 
-export const MapComponent = () => {
+export const MapComponent = ({ onMapClick }: InternalMapProps) => {
     const mapContainerRef = useRef<HTMLDivElement>(null);
     const mapRef = useRef<leaflet.Map | undefined>(undefined);
 
@@ -16,7 +18,7 @@ export const MapComponent = () => {
         }
 
         const map = leaflet.map(mapContainerRef.current);
-        map.setView([51.505, -0.09], 13);
+        map.setView([47.42111, 10.98528], 13);
 
         leaflet
             .tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -29,5 +31,20 @@ export const MapComponent = () => {
         mapRef.current = map;
     });
 
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map) {
+            return;
+        }
+
+        const handler: leaflet.LeafletMouseEventHandlerFn = ({ latlng }) =>
+            onMapClick(latlng);
+        map.on('click', handler);
+
+        return () => {
+            map.removeEventListener('click', handler);
+        };
+    }, [mapRef, onMapClick]);
+
     return <div ref={mapContainerRef} class="map-container" />;
 };

src/routePlanner/markers.tsx

@@ -0,0 +1,18 @@
+import { InternalProps } from './types';
+
+import 'leaflet/dist/leaflet.css';
+
+export const MarkersComponent = ({ markers }: InternalProps) => {
+    return (
+        <>
+            <h3>Markers</h3>
+            <ol>
+                {markers.map(({ key, coordinates }) => (
+                    <li key={key}>
+                        {coordinates.lat}, {coordinates.lng}
+                    </li>
+                ))}
+            </ol>
+        </>
+    );
+};

src/routePlanner/types.ts

@@ -0,0 +1,16 @@
+import type { LatLng } from 'leaflet';
+
+export type Coordinates = LatLng;
+
+export type Marker = {
+    key: string;
+    coordinates: Coordinates;
+};
+
+export type InternalProps = {
+    markers: Marker[];
+};
+
+export type InternalMapProps = InternalProps & {
+    onMapClick: (coordinates: Coordinates) => void;
+};