support for markers removal

src/routePlanner/index.tsx

@@ -8,13 +8,32 @@ import { nanoid } from 'nanoid';
 
 export const RoutePlanner = () => {
     const [markers, setMarkers] = useState<Marker[]>([]);
+
+    const onMarkerRemove = useMemo(
+        () => (keyToRemove: string) =>
+            setMarkers((markers) =>
+                markers
+                    .filter(({ key }) => key !== keyToRemove)
+                    .map((marker, i) => ({ ...marker, index: i + 1 })),
+            ),
+        [],
+    );
+
     const onMapClick = useMemo(
-        () => (coordinates: Coordinates) =>
+        () => (coordinates: Coordinates) => {
+            const key = nanoid(10);
+            const remove = () => onMarkerRemove(key);
             setMarkers((markers) => [
                 ...markers,
-                { coordinates, key: nanoid(10) },
+                {
-            ]),
+                    key,
-        [],
+                    index: markers.length + 1,
+                    remove,
+                    coordinates,
+                },
+            ]);
+        },
+        [onMarkerRemove],
     );
 
     return (

src/routePlanner/map.tsx

@@ -71,8 +71,9 @@ export const MapComponent = ({ markers, onMapClick }: InternalMapProps) => {
         }
 
         layers.push(
-            ...markers.flatMap((marker, i) => {
+            ...markers.flatMap((marker) => {
                 const circle = leaflet.circleMarker(marker.coordinates, {
+                    bubblingMouseEvents: false,
                     color: 'black',
                     fill: true,
                     fillOpacity: 100,
@@ -84,11 +85,13 @@ export const MapComponent = ({ markers, onMapClick }: InternalMapProps) => {
                             permanent: true,
                             direction: 'center',
                             className: 'text',
-                            content: `${i + 1}`,
+                            content: `${marker.index}`,
                         },
                         circle,
                     )
                     .setLatLng(marker.coordinates);
+
+                circle.on('click', marker.remove);
                 return [circle, tooltip];
             }),
         );
@@ -100,6 +103,7 @@ export const MapComponent = ({ markers, onMapClick }: InternalMapProps) => {
         return () => {
             for (const layer of layers) {
                 layer.removeFrom(map);
+                layer.remove();
             }
         };
     }, [mapRef, markers]);

src/routePlanner/markers.tsx

@@ -7,8 +7,11 @@ export const MarkersComponent = ({ markers }: InternalProps) => {
         <>
             <h3>Markers</h3>
             <ol>
-                {markers.map(({ key }, i) => (
+                {markers.map((marker) => (
-                    <li key={key}>{`Waypoint ${i + 1}`}</li>
+                    <li key={marker.key}>
+                        {`Waypoint ${marker.index}`}
+                        <button onClick={marker.remove}>🗑️</button>
+                    </li>
                 ))}
             </ol>
         </>

src/routePlanner/types.ts

@@ -4,6 +4,8 @@ export type Coordinates = LatLng;
 
 export type Marker = {
     key: string;
+    remove: () => void;
+    index: number;
     coordinates: Coordinates;
 };
 
@@ -14,3 +16,7 @@ export type InternalProps = {
 export type InternalMapProps = InternalProps & {
     onMapClick: (coordinates: Coordinates) => void;
 };
+
+export type MarkerListElementProps = {
+    marker: Marker;
+};