feat(dae): map zoom in and out

This commit is contained in:
devthejo 2026-03-08 00:39:58 +01:00
parent 8a25474770
commit 150f23d7a9
No known key found for this signature in database
GPG key ID: 00CCA7A92B1D5351
2 changed files with 7 additions and 2 deletions

View file

@ -15,6 +15,7 @@ import MapView from "~/containers/Map/MapView";
import Camera from "~/containers/Map/Camera"; import Camera from "~/containers/Map/Camera";
import LastKnownLocationMarker from "~/containers/Map/LastKnownLocationMarker"; import LastKnownLocationMarker from "~/containers/Map/LastKnownLocationMarker";
import { DEFAULT_ZOOM_LEVEL } from "~/containers/Map/constants"; import { DEFAULT_ZOOM_LEVEL } from "~/containers/Map/constants";
import StepZoomButtonGroup from "~/containers/Map/StepZoomButtonGroup";
import Text from "~/components/Text"; import Text from "~/components/Text";
import Loader from "~/components/Loader"; import Loader from "~/components/Loader";
@ -54,6 +55,7 @@ export default React.memo(function DAEItemCarte() {
const mapRef = useRef(); const mapRef = useRef();
const cameraRef = useRef(); const cameraRef = useRef();
const [cameraKey, setCameraKey] = useState(1); const [cameraKey, setCameraKey] = useState(1);
const [zoomLevel, setZoomLevel] = useState(DEFAULT_ZOOM_LEVEL);
const abortControllerRef = useRef(null); const abortControllerRef = useRef(null);
const refreshCamera = useCallback(() => { const refreshCamera = useCallback(() => {
@ -261,7 +263,7 @@ export default React.memo(function DAEItemCarte() {
: Maplibre.UserTrackingMode.Follow : Maplibre.UserTrackingMode.Follow
} }
followPitch={0} followPitch={0}
zoomLevel={DEFAULT_ZOOM_LEVEL} zoomLevel={zoomLevel}
bounds={bounds} bounds={bounds}
detached={false} detached={false}
/> />
@ -322,6 +324,7 @@ export default React.memo(function DAEItemCarte() {
<Maplibre.UserLocation visible showsUserHeadingIndicator /> <Maplibre.UserLocation visible showsUserHeadingIndicator />
)} )}
</MapView> </MapView>
<StepZoomButtonGroup mapRef={mapRef} setZoomLevel={setZoomLevel} />
{/* Route error */} {/* Route error */}
{routeError && !loadingRoute && ( {routeError && !loadingRoute && (

View file

@ -14,6 +14,7 @@ import MapView from "~/containers/Map/MapView";
import Camera from "~/containers/Map/Camera"; import Camera from "~/containers/Map/Camera";
import LastKnownLocationMarker from "~/containers/Map/LastKnownLocationMarker"; import LastKnownLocationMarker from "~/containers/Map/LastKnownLocationMarker";
import { BoundType, DEFAULT_ZOOM_LEVEL } from "~/containers/Map/constants"; import { BoundType, DEFAULT_ZOOM_LEVEL } from "~/containers/Map/constants";
import StepZoomButtonGroup from "~/containers/Map/StepZoomButtonGroup";
import Text from "~/components/Text"; import Text from "~/components/Text";
import Loader from "~/components/Loader"; import Loader from "~/components/Loader";
@ -103,7 +104,7 @@ export default React.memo(function DAEListCarte() {
// Camera state — simple follow user // Camera state — simple follow user
const [followUserLocation] = useState(true); const [followUserLocation] = useState(true);
const [followUserMode] = useState(Maplibre.UserTrackingMode.Follow); const [followUserMode] = useState(Maplibre.UserTrackingMode.Follow);
const [zoomLevel] = useState(DEFAULT_ZOOM_LEVEL); const [zoomLevel, setZoomLevel] = useState(DEFAULT_ZOOM_LEVEL);
const geoJSON = useMemo(() => defibsToGeoJSON(defibs), [defibs]); const geoJSON = useMemo(() => defibsToGeoJSON(defibs), [defibs]);
@ -196,6 +197,7 @@ export default React.memo(function DAEListCarte() {
<Maplibre.UserLocation visible showsUserHeadingIndicator /> <Maplibre.UserLocation visible showsUserHeadingIndicator />
)} )}
</MapView> </MapView>
<StepZoomButtonGroup mapRef={mapRef} setZoomLevel={setZoomLevel} />
</View> </View>
); );
}); });