fix: improves display of map status and fit to feature

.changeset/happy-cameras-attend.md

@@ -0,0 +1,5 @@
+---
+'@getodk/web-forms': patch
+---
+
+Improves the UIUX of map status bar and fit to feature

packages/web-forms/src/components/common/map/MapBlock.vue

@@ -203,6 +203,7 @@ const toggleFullScreen = async () => {
 	isFullScreen.value = !isFullScreen.value;
 	if (!isFullScreen.value) {
 		await nextTick();
+		isAdvancedPanelOpen.value = false;
 		mapHandler.fitToAllFeatures();
 	}
 };

packages/web-forms/src/components/common/map/MapStatusBar.vue

@@ -146,15 +146,13 @@ const displayState = computed(() => {
 
 <template>
 	<div class="map-status-bar" :class="{ 'full-screen-active': isFullScreen }">
-		<div v-if="isCapturing" class="map-status-container">
-			<div class="map-status">
+		<div class="map-status-container">
+			<div v-if="isCapturing" class="map-status">
 				<ProgressSpinner class="map-status-spinner" stroke-width="5px" />
 				<!-- TODO: translations -->
 				<span>Capturing location...</span>
 			</div>
-		</div>
 
-		<div class="map-status-container">
 			<div v-if="!isCapturing && displayState" class="map-status">
 				<IconSVG
 					:name="displayState.icon"

packages/web-forms/src/components/common/map/useMapViewControls.ts

@@ -4,11 +4,12 @@ import type { TimerID } from '@getodk/common/types/timers.ts';
 import { Map, type View } from 'ol';
 import type { Coordinate } from 'ol/coordinate';
 import { easeOut } from 'ol/easing';
-import { getCenter, isEmpty as isExtendEmpty } from 'ol/extent';
+import { getCenter, isEmpty as isExtendEmpty, type Extent } from 'ol/extent';
 import Feature from 'ol/Feature';
 import { Point } from 'ol/geom';
 import VectorLayer from 'ol/layer/Vector';
 import { fromLonLat, toLonLat } from 'ol/proj';
+import type { Size } from 'ol/size';
 import VectorSource from 'ol/source/Vector';
 import { getDistance } from 'ol/sphere';
 import { shallowRef, watch } from 'vue';
@@ -150,27 +151,39 @@ export function useMapViewControls(mapInstance: Map): UseMapViewControls {
 		}
 	};
 
+	const resolveTargetViewSettings = (extent: Extent, view: View, size: Size) => {
+		const ZOOM_BUFFER = 1;
+		const currentResolution = view.getResolutionForExtent(extent, size);
+		const currentZoom = view.getZoomForResolution(currentResolution) ?? 0;
+		const targetZoom = currentZoom - ZOOM_BUFFER; // For better aesthetics.
+		return targetZoom > 1 ? Math.min(targetZoom, MAX_ZOOM) : MAX_ZOOM;
+	};
+
 	const centerFeatureLocation = (feature: Feature): void => {
 		const geometry = feature.getGeometry();
 		const view = mapInstance.getView();
-		const mapWidth = mapInstance.getSize()?.[0];
-		if (!geometry || !view || mapWidth == null) {
+		const size = mapInstance.getSize();
+		const extent = geometry?.getExtent() ?? [];
+		if (!geometry || !view || !size || isExtendEmpty(extent)) {
 			return;
 		}
 
+		const mapWidth = size[0] ?? 0;
 		const pixelOffsetY = mapWidth < SMALL_DEVICE_WIDTH ? -130 : 0;
 		const pixelOffsetX = mapWidth < SMALL_DEVICE_WIDTH ? 0 : -70;
 
-		const zoomResolution = view.getResolution() ?? 1;
-		const xOffsetInMapUnits = -pixelOffsetX * zoomResolution;
-		const yOffsetInMapUnits = -pixelOffsetY * zoomResolution;
+		const zoom = resolveTargetViewSettings(extent, view, size);
+		const resolution = view.getResolutionForZoom(zoom);
+
+		const xOffsetInMapUnits = -pixelOffsetX * resolution;
+		const yOffsetInMapUnits = -pixelOffsetY * resolution;
 
 		// Turning angles into usable numbers
 		const rotation = view.getRotation();
 		const cosRotation = Math.cos(rotation);
 		const sinRotation = Math.sin(rotation);
 
-		const [featureCenterLong, featureCenterLat] = getCenter(geometry.getExtent());
+		const [featureCenterLong, featureCenterLat] = getCenter(extent);
 		if (!featureCenterLong || !featureCenterLat) {
 			return;
 		}
@@ -179,8 +192,6 @@ export function useMapViewControls(mapInstance: Map): UseMapViewControls {
 			featureCenterLat - xOffsetInMapUnits * sinRotation - yOffsetInMapUnits * cosRotation,
 		];
 
-		const targetZoom = view.getZoomForResolution(zoomResolution);
-		const zoom = targetZoom ? Math.min(targetZoom, MAX_ZOOM) : MAX_ZOOM;
 		transitionToLocation(targetCoordinates, zoom);
 	};