minor refactoring

README.md

@@ -47,7 +47,7 @@ For development: `npm run dev`.
 
 For release build that does not require any interactivity on server, `npm run start-release`
 (which lints and typechecks and tests everything, builds the project into static bundles in `dist/`, and serves static files from `dist` directory).
-
+2
 ### Limitations, notes
 
 While the original task didn't mention it, it seemed like a good idea to make markers draggable (in order to be able to change the position of an existing marker).

src/routePlanner/map.tsx

@@ -56,21 +56,22 @@ export const MapComponent = ({ markers, onMapClick }: MapProps) => {
             return;
         }
 
-        const layers: leaflet.Layer[] = [];
-        for (let i = 0; i < markers.length; i++) {
-            const thisMarker = markers[i];
-            const previousMarker = markers[i - 1];
-            if (thisMarker && previousMarker) {
-                layers.push(
+        const layers = [
+            // lines
+            ...markers.flatMap((thisMarker, i) => {
+                const previousMarker = markers[i - 1];
+                if (!previousMarker) {
+                    return [];
+                }
+
+                return [
                     leaflet.polyline([
                         previousMarker.coordinates,
                         thisMarker.coordinates,
                     ]),
-                );
-            }
-        }
-
-        layers.push(
+                ];
+            }),
+            // circles and labels
             ...markers.flatMap((marker) => {
                 const circle = leaflet.circleMarker(marker.coordinates, {
                     bubblingMouseEvents: false,
@@ -94,7 +95,7 @@ export const MapComponent = ({ markers, onMapClick }: MapProps) => {
                 circle.on('click', marker.remove);
                 return [circle, tooltip];
             }),
-        );
+        ];
 
         for (const layer of layers) {
             layer.addTo(map);