diff --git a/README.md b/README.md index 2fad3bb..5188798 100644 --- a/README.md +++ b/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). diff --git a/src/routePlanner/map.tsx b/src/routePlanner/map.tsx index b8fc07c..b94545f 100644 --- a/src/routePlanner/map.tsx +++ b/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);