diff --git a/mapper/src/App.js b/mapper/src/App.js index 4450a42..d1c32c8 100644 --- a/mapper/src/App.js +++ b/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='© OpenStreetMap contributors' url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea' /> - + Show direction + + setShowPoints(e.target.checked)} + /> + Show points + Recentre view Exclude area @@ -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 ( @@ -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}