improved design, fixed HMR

src/routePlanner/map.tsx

@@ -29,7 +29,11 @@ export const MapComponent = ({ markers, onMapClick }: InternalMapProps) => {
             .addTo(map);
 
         mapRef.current = map;
-    });
+
+        return () => {
+            map.remove();
+        };
+    }, []);
 
     useEffect(() => {
         const map = mapRef.current;
@@ -56,22 +60,39 @@ export const MapComponent = ({ markers, onMapClick }: InternalMapProps) => {
         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,
-                        ]),
-                    );
-                }
+            if (thisMarker && previousMarker) {
                 layers.push(
-                    leaflet.marker(thisMarker.coordinates, {
-                        title: `${i + 1}`,
-                    }),
+                    leaflet.polyline([
+                        previousMarker.coordinates,
+                        thisMarker.coordinates,
+                    ]),
                 );
             }
         }
+
+        layers.push(
+            ...markers.flatMap((marker, i) => {
+                const circle = leaflet.circleMarker(marker.coordinates, {
+                    color: 'black',
+                    fill: true,
+                    fillOpacity: 100,
+                    radius: 10,
+                });
+                const tooltip = leaflet
+                    .tooltip(
+                        {
+                            permanent: true,
+                            direction: 'center',
+                            className: 'text',
+                            content: `${i + 1}`,
+                        },
+                        circle,
+                    )
+                    .setLatLng(marker.coordinates);
+                return [circle, tooltip];
+            }),
+        );
+
         for (const layer of layers) {
             layer.addTo(map);
         }

src/routePlanner/markers.tsx

@@ -7,10 +7,8 @@ export const MarkersComponent = ({ markers }: InternalProps) => {
         <>
             <h3>Markers</h3>
             <ol>
-                {markers.map(({ key, coordinates }) => (
-                    <li key={key}>
-                        {coordinates.lat}, {coordinates.lng}
-                    </li>
+                {markers.map(({ key }, i) => (
+                    <li key={key}>{`Waypoint ${i + 1}`}</li>
                 ))}
             </ol>
         </>

src/routePlanner/style.css

@@ -19,6 +19,14 @@ section.route-planner .map-container {
 	height: 500px;
 }
 
+section.route-planner .map-container .leaflet-tooltip-pane .text {
+	background: transparent;
+	border:0;
+	box-shadow: none;
+	color: white;
+	font-weight: bold;
+}
+
 @media (max-width: 639px) {
 	section.route-planner {
 		grid-template-columns: 1fr;