feat: Add 'Show points' checkbox to display polyline points

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

mapper/src/App.js

@@ -144,10 +144,11 @@ function MapViewManager({ coords, mapState, setMapState, loading, setSubmenu })
     return null;
 }
 
-function PolylineWithArrows({ coords, showDirection }) {
+function PolylineWithArrows({ coords, showDirection, showPoints }) {
     const map = useMap();
     const polylineRef = useRef(null);
     const decoratorRef = useRef(null);
+    const pointsLayerRef = useRef(null);
 
     useEffect(() => {
         if (polylineRef.current) {
@@ -156,6 +157,9 @@ function PolylineWithArrows({ coords, showDirection }) {
         if (decoratorRef.current) {
             map.removeLayer(decoratorRef.current);
         }
+        if (pointsLayerRef.current) {
+            map.removeLayer(pointsLayerRef.current);
+        }
 
         if (coords && coords.length > 1) {
             const polyline = leaflet.polyline(coords, { color: 'blue' });
@@ -185,6 +189,21 @@ function PolylineWithArrows({ coords, showDirection }) {
             } else {
                 decoratorRef.current = null;
             }
+
+            if (showPoints) {
+                const points = coords.map(coord => leaflet.circleMarker(coord, {
+                    color: 'red',
+                    radius: 3,
+                    weight: 1,
+                    fillColor: 'red',
+                    fillOpacity: 1
+                }));
+                const pointsLayer = leaflet.layerGroup(points);
+                pointsLayerRef.current = pointsLayer;
+                map.addLayer(pointsLayer);
+            } else {
+                pointsLayerRef.current = null;
+            }
         }
 
         return () => {
@@ -194,13 +213,16 @@ function PolylineWithArrows({ coords, showDirection }) {
             if (decoratorRef.current) {
                 map.removeLayer(decoratorRef.current);
             }
+            if (pointsLayerRef.current) {
+                map.removeLayer(pointsLayerRef.current);
+            }
         };
-    }, [coords, map, showDirection]);
+    }, [coords, map, showDirection, showPoints]);
 
     return null;
 }
 
-function Map({data, loading, end, duration, slider, mapState, setMapState, setSubmenu, showDirection, setDrawnItems}) {
+function Map({data, loading, end, duration, slider, mapState, setMapState, setSubmenu, showDirection, showPoints, setDrawnItems}) {
 	const range = useMemo(() => parseSlider(end, duration, slider), [end, duration, slider]);
 
 	const coords = useMemo(() => {
@@ -296,7 +318,7 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 							attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 							url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
 						/>
-						<PolylineWithArrows coords={coords} showDirection={showDirection} />
+						<PolylineWithArrows coords={coords} showDirection={showDirection} showPoints={showPoints} />
 						<FeatureGroup>
 							<EditControl
 								position="topright"
@@ -320,7 +342,7 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 	);
 }
 
-function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, submenu, setSubmenu, showDirection, setShowDirection, setMapState, shareStart, shareEnd, drawnItems}) {
+function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, submenu, setSubmenu, showDirection, setShowDirection, showPoints, setShowPoints, setMapState, shareStart, shareEnd, drawnItems}) {
 	const [showRange, setShowRange] = useState(false);
 	const [isSearching, setIsSearching] = useState(false);
 	const [searchResults, setSearchResults] = useState(null);
@@ -805,6 +827,14 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 										/>
 										Show direction
 									</label>
+									<label className="submenu-checkbox-label">
+										<input
+											type="checkbox"
+											checked={showPoints}
+											onChange={e => setShowPoints(e.target.checked)}
+										/>
+										Show points
+									</label>
 									<button onClick={recentreView}>Recentre view</button>
 									<button onClick={excludeArea}>Exclude area</button>
 									<button onClick={searchArea} disabled={isSearching}>
@@ -858,6 +888,7 @@ function App() {
 	const initialLng = params.get('lng');
 	const initialZoom = params.get('zoom');
 	const initialShowDirection = params.get('showDirection') === 'true';
+	const initialShowPoints = params.get('showPoints') === 'true';
 	const shareStartParam = params.get('shareStart');
 	const shareEndParam = params.get('shareEnd');
 
@@ -874,6 +905,7 @@ function App() {
 	});
 	const [submenu, setSubmenu] = useState(false);
 	const [showDirection, setShowDirection] = useState(initialShowDirection);
+	const [showPoints, setShowPoints] = useState(initialShowPoints);
 	const [drawnItems, setDrawnItems] = useState([]);
 
 	const [data, loading] = useSensor('owntracks', 'OwnTracks', end, duration);
@@ -900,6 +932,9 @@ function App() {
 			if (showDirection) {
 				params.set('showDirection', 'true');
 			}
+			if (showPoints) {
+				params.set('showPoints', 'true');
+			}
 			if (mapState.center) {
 				params.set('lat', mapState.center[0].toFixed(5));
 				params.set('lng', mapState.center[1].toFixed(5));
@@ -911,7 +946,7 @@ function App() {
 		return () => {
 			clearTimeout(handler);
 		};
-	}, [duration, end, slider, mapState, showDirection]);
+	}, [duration, end, slider, mapState, showDirection, showPoints]);
 
 	return (
 		<div>
@@ -926,6 +961,8 @@ function App() {
 				setSubmenu={setSubmenu}
 				showDirection={showDirection}
 				setShowDirection={setShowDirection}
+				showPoints={showPoints}
+				setShowPoints={setShowPoints}
 				setMapState={setMapState}
 				shareStart={shareStart}
 				shareEnd={shareEnd}
@@ -941,6 +978,7 @@ function App() {
 				setMapState={setMapState}
 				setSubmenu={setSubmenu}
 				showDirection={showDirection}
+				showPoints={showPoints}
 				data={data}
 				loading={loading}
 				setDrawnItems={setDrawnItems}