diff options
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/MapGeofenceEdit.js | 19 |
1 files changed, 18 insertions, 1 deletions
diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js index 22f91dfa..045eddc2 100644 --- a/modern/src/map/MapGeofenceEdit.js +++ b/modern/src/map/MapGeofenceEdit.js @@ -1,5 +1,6 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'; +import maplibregl from 'maplibre-gl'; import MapboxDraw from '@mapbox/mapbox-gl-draw'; import theme from '@mapbox/mapbox-gl-draw/src/lib/theme'; import { useEffect } from 'react'; @@ -35,7 +36,7 @@ const draw = new MapboxDraw({ }], }); -const MapGeofenceEdit = () => { +const MapGeofenceEdit = ({ selectedGeofenceId }) => { const dispatch = useDispatch(); const navigate = useNavigate(); @@ -136,6 +137,22 @@ const MapGeofenceEdit = () => { }); }, [geofences]); + useEffect(() => { + if (selectedGeofenceId) { + const feature = draw.get(selectedGeofenceId); + let { coordinates } = feature.geometry; + if (Array.isArray(coordinates[0][0])) { + [coordinates] = coordinates; + } + const bounds = coordinates.reduce( + (bounds, coordinate) => bounds.extend(coordinate), + new maplibregl.LngLatBounds(coordinates[0], coordinates[0]), + ); + const canvas = map.getCanvas(); + map.fitBounds(bounds, { padding: Math.min(canvas.width, canvas.height) * 0.1 }); + } + }, [selectedGeofenceId]); + return null; }; |