diff --git a/app/javascript/components/MapEditor/components/DrawLayer.tsx b/app/javascript/components/MapEditor/components/DrawLayer.tsx index ca0f24e53..6dd336639 100644 --- a/app/javascript/components/MapEditor/components/DrawLayer.tsx +++ b/app/javascript/components/MapEditor/components/DrawLayer.tsx @@ -6,6 +6,7 @@ import type { FeatureCollection } from 'geojson'; import { useMapLibre } from '../../shared/maplibre/MapLibre'; import { useFitBounds, + useFitBoundsNoFly, useEvent, useMapEvent, useFlyTo @@ -117,6 +118,7 @@ function useExternalEvents( } ) { const fitBounds = useFitBounds(); + const fitBoundsNoFly = useFitBoundsNoFly(); const flyTo = useFlyTo(); const onFeatureFocus = useCallback( @@ -184,10 +186,10 @@ function useExternalEvents( ); useEffect(() => { - fitBounds(featureCollection.bbox as LngLatBoundsLike); + fitBoundsNoFly(featureCollection.bbox as LngLatBoundsLike); // We only want to zoom on bbox on component mount. // eslint-disable-next-line react-hooks/exhaustive-deps - }, [fitBounds]); + }, [fitBoundsNoFly]); useEvent('map:feature:focus', onFeatureFocus); useEvent('map:feature:create', onFeatureCreate); diff --git a/app/javascript/components/shared/maplibre/hooks.ts b/app/javascript/components/shared/maplibre/hooks.ts index 078e5fb15..9b5acb875 100644 --- a/app/javascript/components/shared/maplibre/hooks.ts +++ b/app/javascript/components/shared/maplibre/hooks.ts @@ -26,6 +26,16 @@ export function useFitBounds() { ); } +export function useFitBoundsNoFly() { + const map = useMapLibre(); + return useCallback( + (bbox: LngLatBoundsLike) => { + map.fitBounds(bbox, { padding: 100, linear: true, duration: 0 }); + }, + [map] + ); +} + export function useFlyTo() { const map = useMapLibre(); return useCallback(