From 0cd76eb3c5aaeaab0e3add2519448f8b7921266c Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 25 Aug 2025 22:29:53 +0700
Subject: [PATCH 01/40] engine support for metadata in itemset nodes

---
 packages/xforms-engine/src/client/RankNode.ts |  7 +---
 .../xforms-engine/src/client/SelectNode.ts    |  8 ++--
 .../lib/reactivity/createItemCollection.ts    | 40 +++++++++++++++----
 .../parse/body/control/ItemsetDefinition.ts   | 19 ++++++++-
 .../expression/ItemsetGeometryExpression.ts   |  8 ++++
 .../expression/ItemsetMetadataExpression.ts   | 14 +++++++
 6 files changed, 79 insertions(+), 17 deletions(-)
 create mode 100644 packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts
 create mode 100644 packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts

diff --git a/packages/xforms-engine/src/client/RankNode.ts b/packages/xforms-engine/src/client/RankNode.ts
index 94510fa9c..78927b174 100644
--- a/packages/xforms-engine/src/client/RankNode.ts
+++ b/packages/xforms-engine/src/client/RankNode.ts
@@ -1,3 +1,4 @@
+import type { BaseItem } from '../lib/reactivity/createItemCollection.ts';
 import type { RankControlDefinition } from '../parse/body/control/RankControlDefinition.ts';
 import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
 import type { BaseValueNode, BaseValueNodeState } from './BaseValueNode.ts';
@@ -8,11 +9,7 @@ import type { LeafNodeValidationState } from './validation.ts';
 import type { UnknownAppearanceDefinition } from '../parse/body/appearance/unknownAppearanceParser.ts';
 import type { ValueType } from './ValueType.ts';
 
-export interface RankItem {
-	get label(): TextRange<'item-label'>;
-	get value(): string;
-}
-
+export type RankItem = BaseItem;
 export type RankValueOptions = readonly RankItem[];
 
 export interface RankNodeState extends BaseValueNodeState<readonly string[]> {
diff --git a/packages/xforms-engine/src/client/SelectNode.ts b/packages/xforms-engine/src/client/SelectNode.ts
index f9844a734..35d6a9964 100644
--- a/packages/xforms-engine/src/client/SelectNode.ts
+++ b/packages/xforms-engine/src/client/SelectNode.ts
@@ -1,3 +1,4 @@
+import type { BaseItem } from '../lib/reactivity/createItemCollection.ts';
 import type {
 	AnySelectControlDefinition,
 	SelectType,
@@ -6,14 +7,13 @@ import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
 import type { BaseValueNode, BaseValueNodeState } from './BaseValueNode.ts';
 import type { NodeAppearances } from './NodeAppearances.ts';
 import type { RootNode } from './RootNode.ts';
-import type { TextRange } from './TextRange.ts';
 import type { ValueType } from './ValueType.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { LeafNodeValidationState } from './validation.ts';
 
-export interface SelectItem {
-	get label(): TextRange<'item-label'>;
-	get value(): string;
+export interface SelectItem extends BaseItem {
+	geometry?(): string;
+	metadata?: Array<{ label: string; value(): string }>;
 }
 
 export type SelectValueOptions = readonly SelectItem[];
diff --git a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
index f7a7f75e6..405184592 100644
--- a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
+++ b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
@@ -2,8 +2,6 @@ import { UpsertableMap } from '@getodk/common/lib/collections/UpsertableMap.ts';
 import type { Accessor } from 'solid-js';
 import { createMemo } from 'solid-js';
 import type { ActiveLanguage } from '../../client/FormLanguage.ts';
-import type { SelectItem } from '../../client/SelectNode.ts';
-import type { RankItem } from '../../client/RankNode.ts';
 import type { TextRange as ClientTextRange } from '../../client/TextRange.ts';
 import type { EvaluationContext } from '../../instance/internal-api/EvaluationContext.ts';
 import type { TranslationContext } from '../../instance/internal-api/TranslationContext.ts';
@@ -20,8 +18,11 @@ import type { ReactiveScope } from './scope.ts';
 import { createTextRange } from './text/createTextRange.ts';
 
 export type ItemCollectionControl = RankControl | SelectControl;
-type Item = RankItem | SelectItem;
 type DerivedItemLabel = ClientTextRange<'item-label', 'form-derived'>;
+export interface BaseItem {
+	get label(): ClientTextRange<'item-label'>;
+	get value(): string;
+}
 
 const derivedItemLabel = (context: TranslationContext, value: string): DerivedItemLabel => {
 	const chunk = new TextChunk(context, 'literal', value);
@@ -45,7 +46,7 @@ const createItemLabel = (
 const createTranslatedStaticItems = (
 	control: ItemCollectionControl,
 	items: readonly ItemDefinition[]
-): Accessor<readonly Item[]> => {
+): Accessor<readonly BaseItem[]> => {
 	return control.scope.runTask(() => {
 		const labeledItems = items.map((item) => {
 			const { value } = item;
@@ -101,6 +102,8 @@ const createItemsetItemLabel = (
 interface ItemsetItem {
 	label(): ClientTextRange<'item-label'>;
 	value(): string;
+	geometry(): string;
+	metadata: Array<{ label: string; value(): string }>;
 }
 
 const createItemsetItems = (
@@ -120,11 +123,30 @@ const createItemsetItems = (
 					const value = createComputedExpression(context, itemset.value, {
 						defaultValue: '',
 					});
+
 					const label = createItemsetItemLabel(context, itemset, value);
 
+					const geometry = createComputedExpression(context, itemset.geometry, {
+						defaultValue: '',
+					});
+
+					const nodeElements = itemNode
+						.getXPathChildNodes()
+						.filter((node) => node.nodeType === 'static-element');
+					const metadata = itemset.getMetadataExpressions(nodeElements).map((meta) => {
+						return {
+							label: meta.elementName,
+							value: createComputedExpression(context, meta, {
+								defaultValue: '',
+							}),
+						};
+					});
+
 					return {
 						label,
 						value,
+						geometry,
+						metadata,
 					};
 				});
 			});
@@ -135,7 +157,7 @@ const createItemsetItems = (
 const createItemset = (
 	control: ItemCollectionControl,
 	itemset: ItemsetDefinition
-): Accessor<readonly Item[]> => {
+): Accessor<readonly BaseItem[]> => {
 	return control.scope.runTask(() => {
 		const itemsetItems = createItemsetItems(control, itemset);
 
@@ -144,6 +166,8 @@ const createItemset = (
 				return {
 					label: item.label(),
 					value: item.value(),
+					geometry: item.geometry(),
+					metadata: item.metadata.map((meta) => ({ label: meta.label, value: meta.value() })),
 				};
 			});
 		});
@@ -152,7 +176,7 @@ const createItemset = (
 
 /**
  * Creates a reactive computation of a {@link ItemCollectionControl}'s
- * {@link Item}s, in support of the field's `valueOptions`.
+ * {@link BaseItem}s, in support of the field's `valueOptions`.
  *
  * - The control defined with static `<item>`s will compute to an corresponding
  *   static list of items.
@@ -162,7 +186,9 @@ const createItemset = (
  *   their appropriate dependencies (whether relative to the itemset item node,
  *   referencing a form's `itext` translations, etc).
  */
-export const createItemCollection = (control: ItemCollectionControl): Accessor<readonly Item[]> => {
+export const createItemCollection = (
+	control: ItemCollectionControl
+): Accessor<readonly BaseItem[]> => {
 	const { items, itemset } = control.definition.bodyElement;
 
 	if (itemset != null) {
diff --git a/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts b/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
index a936b3cc4..4821b7b38 100644
--- a/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
+++ b/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
@@ -1,5 +1,8 @@
+import { StaticElement } from '../../../integration/xpath/static-dom/StaticElement.ts';
 import type { ItemsetElement } from '../../../lib/dom/query.ts';
 import { getValueElement } from '../../../lib/dom/query.ts';
+import { ItemsetGeometryExpression } from '../../expression/ItemsetGeometryExpression.ts';
+import { ItemsetMetadataExpression } from '../../expression/ItemsetMetadataExpression.ts';
 import { ItemsetNodesetExpression } from '../../expression/ItemsetNodesetExpression.ts';
 import { ItemsetValueExpression } from '../../expression/ItemsetValueExpression.ts';
 import { ItemsetLabelDefinition } from '../../text/ItemsetLabelDefinition.ts';
@@ -18,6 +21,8 @@ export class ItemsetDefinition extends BodyElementDefinition<'itemset'> {
 
 	readonly nodes: ItemsetNodesetExpression;
 	readonly value: ItemsetValueExpression;
+	readonly geometry: ItemsetGeometryExpression;
+	readonly metadataExclusions: string[];
 
 	constructor(
 		form: XFormDefinition,
@@ -49,7 +54,19 @@ export class ItemsetDefinition extends BodyElementDefinition<'itemset'> {
 			throw new Error(`<itemset> has no <value>`);
 		}
 
-		this.value = new ItemsetValueExpression(this, valueExpression);
 		this.label = ItemsetLabelDefinition.from(form, this);
+		this.value = new ItemsetValueExpression(this, valueExpression);
+		this.geometry = new ItemsetGeometryExpression(this);
+
+		this.metadataExclusions = ['itextId', this.value.expression, this.geometry.expression];
+	}
+
+	getMetadataExpressions(metadataNodes: StaticElement[]): ItemsetMetadataExpression[] {
+		return metadataNodes
+			.filter((node) => {
+				const { localName } = node.qualifiedName;
+				return localName.length && !this.metadataExclusions.includes(localName);
+			})
+			.map((node) => new ItemsetMetadataExpression(this, node.qualifiedName.localName));
 	}
 }
diff --git a/packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts b/packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts
new file mode 100644
index 000000000..6d8702f08
--- /dev/null
+++ b/packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts
@@ -0,0 +1,8 @@
+import type { ItemsetDefinition } from '../body/control/ItemsetDefinition.ts';
+import { DependentExpression } from './abstract/DependentExpression.ts';
+
+export class ItemsetGeometryExpression extends DependentExpression<'string'> {
+	constructor(readonly itemset: ItemsetDefinition) {
+		super(itemset, 'string', 'geometry');
+	}
+}
diff --git a/packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts b/packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts
new file mode 100644
index 000000000..c249f3435
--- /dev/null
+++ b/packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts
@@ -0,0 +1,14 @@
+import type { ItemsetDefinition } from '../body/control/ItemsetDefinition.ts';
+import { DependentExpression } from './abstract/DependentExpression.ts';
+
+export class ItemsetMetadataExpression extends DependentExpression<'string'> {
+	readonly elementName: string;
+
+	constructor(
+		readonly itemset: ItemsetDefinition,
+		elementName: string
+	) {
+		super(itemset, 'string', elementName);
+		this.elementName = elementName;
+	}
+}

From 16f3cdeb9da1f2cd37ec1596c33599efd67605be Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 28 Aug 2025 23:09:06 +0700
Subject: [PATCH 02/40] Async map bundle loading

---
 packages/web-forms/package.json               |   5 +-
 .../src/components/common/map/AsyncMap.vue    | 106 ++++++++++++++++++
 .../src/components/common/map/MapBlock.vue    |  50 +++++++++
 .../form-elements/select/Select1Control.vue   |   5 +-
 yarn.lock                                     | 106 ++++++++++++++++++
 5 files changed, 269 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-forms/src/components/common/map/AsyncMap.vue
 create mode 100644 packages/web-forms/src/components/common/map/MapBlock.vue

diff --git a/packages/web-forms/package.json b/packages/web-forms/package.json
index bb8d28a3e..71a397c04 100644
--- a/packages/web-forms/package.json
+++ b/packages/web-forms/package.json
@@ -78,8 +78,9 @@
     "vue": "^3.5.18"
   },
   "dependencies": {
-    "vue-draggable-plus": "^0.6.0",
-    "@mdi/js": "^7.4.47"
+    "@mdi/js": "^7.4.47",
+    "ol": "^10.6.1",
+    "vue-draggable-plus": "^0.6.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
new file mode 100644
index 000000000..2b395ea09
--- /dev/null
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import IconSVG from '@/components/common/IconSVG.vue';
+import Button from 'primevue/button';
+import ProgressSpinner from 'primevue/progressspinner';
+
+/**
+ * Note: OpenLayers and MapBlock are not statically imported here to enable bundling them into a separate chunk.
+ * This prevents unnecessary bloat in the main application bundle, reducing initial load times and improving performance.
+ * Use dynamic imports instead (e.g., `await import(importPath)`) for lazy-loading these dependencies only when required.
+ */
+import { type DefineComponent, onMounted, ref, shallowRef } from 'vue';
+
+interface MapBlockProps {
+	data: object; // GeoJSON instance/object
+	config: {
+		viewCoordinates: [number, number];
+		zoom?: number;
+	};
+}
+type MapBlockComponent = DefineComponent<MapBlockProps>;
+
+defineProps<MapBlockProps>();
+
+const mapComponent = shallowRef<MapBlockComponent | null>(null);
+const loading = ref(true);
+const error = ref(false);
+const cacheBustCounter = ref(0);
+const TIMEOUT_MS = 5 * 1000;
+
+const loadMap = async () => {
+	error.value = false;
+	loading.value = true;
+	cacheBustCounter.value++;
+
+	const timeoutId = setTimeout(() => {
+		throw new Error('Download of Map bundle timeout');
+	}, TIMEOUT_MS);
+
+	try {
+		const importPath = `./MapBlock.vue?bust=${cacheBustCounter.value}`;
+		mapComponent.value = ((await import(importPath)) as { default: MapBlockComponent }).default;
+	} catch {
+		error.value = true;
+	} finally {
+		clearTimeout(timeoutId);
+		loading.value = false;
+	}
+};
+
+onMounted(loadMap);
+</script>
+
+<template>
+	<div class="async-map-container">
+		<div v-if="error" class="map-error">
+			<!-- TODO: translations -->
+			<p class="map-error-message">Unable to load map</p>
+			<Button outlined severity="contrast" class="retry-button" @click="loadMap">
+				<IconSVG name="mdiRefresh" />
+				<!-- TODO: translations -->
+				<span>Try again</span>
+			</Button>
+		</div>
+		<ProgressSpinner v-else-if="loading" class="map-spinner" />
+		<component :is="mapComponent" v-else v-bind="{ ...$props, ...$attrs }" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+.async-map-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 445px;
+	width: 100%;
+	background: var(--odk-light-background-color);
+	border-radius: var(--odk-radius);
+	color: var(--odk-text-color);
+}
+
+.map-error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 40px;
+}
+
+.map-error-message {
+	font-size: var(--odk-sub-group-font-size);
+	font-weight: 600;
+	margin: 0;
+}
+
+.map-spinner {
+	width: 70px;
+	height: 70px;
+}
+
+.p-button.p-button-contrast.p-button-outlined.retry-button {
+	background: var(--odk-base-background-color);
+
+	&:hover {
+		background: var(--odk-muted-background-color);
+	}
+}
+</style>
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
new file mode 100644
index 000000000..17b54b702
--- /dev/null
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * IMPORTANT: Lazy-loaded for OpenLayers isolation.
+ * Keep OpenLayers imports/code here only to bundle separately and
+ * load on demand. Avoids main bundle bloat.
+ */
+import { Map, View } from 'ol';
+import type { Coordinate } from 'ol/coordinate';
+import GeoJSON from 'ol/format/GeoJSON';
+import TileLayer from 'ol/layer/Tile';
+import { OSM } from 'ol/source';
+import { onMounted, ref } from 'vue';
+
+// ToDo: document these props
+interface MapBlockProps {
+	data: GeoJSON;
+	config: {
+		viewCoordinates: Coordinate;
+		zoom?: number; // Default 10.
+	};
+}
+const props = defineProps<MapBlockProps>();
+
+const mapContainer = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+	if (!mapContainer.value) {
+		return;
+	}
+
+	const { viewCoordinates, zoom = 10 } = props.config;
+
+	const mapRef = new Map({
+		target: mapContainer.value,
+		layers: [new TileLayer({ source: new OSM() })], // ToDo: what's the default, and how can fd configure it
+		view: new View({ center: viewCoordinates, zoom }),
+	});
+});
+</script>
+
+<template>
+	<div ref="mapContainer" class="map-block" />
+</template>
+
+<style scoped lang="scss">
+.map-block {
+	width: 100%;
+	height: 445px;
+}
+</style>
diff --git a/packages/web-forms/src/components/form-elements/select/Select1Control.vue b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
index 9ee74d14d..686353f07 100644
--- a/packages/web-forms/src/components/form-elements/select/Select1Control.vue
+++ b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
@@ -2,6 +2,7 @@
 import ColumnarAppearance from '@/components/appearances/ColumnarAppearance.vue';
 import FieldListTable from '@/components/appearances/FieldListTable.vue';
 import UnsupportedAppearance from '@/components/appearances/UnsupportedAppearance.vue';
+import AsyncMap from '@/components/common/map/AsyncMap.vue';
 import ControlText from '@/components/form-elements/ControlText.vue';
 import ValidationMessage from '@/components/common/ValidationMessage.vue';
 import LikertWidget from '@/components/common/LikertWidget.vue';
@@ -47,6 +48,8 @@ watchEffect(() => {
 		:question="question"
 	/>
 
+	<AsyncMap v-else-if="question.appearances.map" :data="question.currentState.value" :config="{viewCoordinates: [-122.4194, 37.7749]}" />
+
 	<FieldListTable v-else-if="hasFieldListRelatedAppearance" :class="{ 'select-with-images': isSelectWithImages }" :appearances="question.appearances">
 		<template #firstColumn>
 			<ControlText :question="question" />
@@ -61,7 +64,7 @@ watchEffect(() => {
 	</ColumnarAppearance>
 
 	<template v-else>
-		<template v-if="question.appearances.map || question.appearances['image-map']">
+		<template v-if="question.appearances['image-map']">
 			<UnsupportedAppearance
 				:appearance="[...question.appearances].toString()"
 				node-type="Select1"
diff --git a/yarn.lock b/yarn.lock
index 788fce435..374ac60dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1126,6 +1126,11 @@
     "@parcel/watcher-win32-ia32" "2.5.0"
     "@parcel/watcher-win32-x64" "2.5.0"
 
+"@petamoriken/float16@^3.4.7":
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/@petamoriken/float16/-/float16-3.9.2.tgz#217a5d349f3655b8e286be447e0ed1eae063a78f"
+  integrity sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
@@ -1539,6 +1544,11 @@
   dependencies:
     types-ramda "^0.30.1"
 
+"@types/rbush@4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/rbush/-/rbush-4.0.0.tgz#b327bf54952e9c924ea6702c36904c2ce1d47f35"
+  integrity sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ==
+
 "@types/sortablejs@^1.15.8":
   version "1.15.8"
   resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.15.8.tgz#11ed555076046e00869a5ef85d1e7651e7a66ef6"
@@ -2693,6 +2703,11 @@ dunder-proto@^1.0.1:
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
+earcut@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/earcut/-/earcut-3.0.2.tgz#d478a29aaf99acf418151493048aa197d0512248"
+  integrity sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -3198,6 +3213,20 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+geotiff@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/geotiff/-/geotiff-2.1.3.tgz#993f40f2aa6aa65fb1e0451d86dd22ca8e66910c"
+  integrity sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==
+  dependencies:
+    "@petamoriken/float16" "^3.4.7"
+    lerc "^3.0.0"
+    pako "^2.0.4"
+    parse-headers "^2.0.2"
+    quick-lru "^6.1.1"
+    web-worker "^1.2.0"
+    xml-utils "^1.0.2"
+    zstddec "^0.1.0"
+
 get-intrinsic@^1.2.5, get-intrinsic@^1.2.6:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
@@ -3653,6 +3682,11 @@ kolorist@^1.8.0:
   resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.8.0.tgz#edddbbbc7894bc13302cdf740af6374d4a04743c"
   integrity sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
 
+lerc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lerc/-/lerc-3.0.0.tgz#36f36fbd4ba46f0abf4833799fff2e7d6865f5cb"
+  integrity sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -3994,6 +4028,17 @@ object-inspect@^1.13.3:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
   integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
 
+ol@^10.6.1:
+  version "10.6.1"
+  resolved "https://registry.yarnpkg.com/ol/-/ol-10.6.1.tgz#950f3914b4eec978f087b36aa74ce1e18c41ab09"
+  integrity sha512-xp174YOwPeLj7c7/8TCIEHQ4d41tgTDDhdv6SqNdySsql5/MaFJEJkjlsYcvOPt7xA6vrum/QG4UdJ0iCGT1cg==
+  dependencies:
+    "@types/rbush" "4.0.0"
+    earcut "^3.0.0"
+    geotiff "^2.1.3"
+    pbf "4.0.1"
+    rbush "^4.0.0"
+
 only-allow@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/only-allow/-/only-allow-1.2.1.tgz#8f18abd72bf531bc0e59fcfcfca590c425a5ad29"
@@ -4098,6 +4143,11 @@ package-manager-detector@^0.2.0:
   resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-0.2.8.tgz#f5ace2dbd37666af54e5acec11bc37c8450f72d0"
   integrity sha512-ts9KSdroZisdvKMWVAVCXiKqnqNfXz4+IbrBG8/BWx/TR5le+jfenvoBuIZ6UWM9nz47W7AbD9qYfAwfWMIwzA==
 
+pako@^2.0.4:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
+  integrity sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==
+
 papaparse@^5.5.3:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/papaparse/-/papaparse-5.5.3.tgz#07f8994dec516c6dab266e952bed68e1de59fa9a"
@@ -4110,6 +4160,11 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-headers@^2.0.2:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.6.tgz#7940f0abe5fe65df2dd25d4ce8800cb35b49d01c"
+  integrity sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A==
+
 parse-imports-exports@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz#e3fb3b5e264cfb55c25b5dfcbe7f410f8dc4e7af"
@@ -4185,6 +4240,13 @@ pathval@^2.0.0:
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25"
   integrity sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==
 
+pbf@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pbf/-/pbf-4.0.1.tgz#ad9015e022b235dcdbe05fc468a9acadf483f0d4"
+  integrity sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==
+  dependencies:
+    resolve-protobuf-schema "^2.1.0"
+
 picocolors@^1.0.0, picocolors@^1.1.0, picocolors@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
@@ -4339,6 +4401,11 @@ proto-list@~1.2.1:
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
   integrity sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==
 
+protocol-buffers-schema@^3.3.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz#77bc75a48b2ff142c1ad5b5b90c94cd0fa2efd03"
+  integrity sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -4371,11 +4438,28 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quick-lru@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-6.1.2.tgz#e9a90524108629be35287d0b864e7ad6ceb3659e"
+  integrity sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==
+
+quickselect@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/quickselect/-/quickselect-3.0.0.tgz#a37fc953867d56f095a20ac71c6d27063d2de603"
+  integrity sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==
+
 ramda@^0.31.3:
   version "0.31.3"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.31.3.tgz#0f54199ec99a7bd6702277d28d6bf7f93b916bb9"
   integrity sha512-xKADKRNnqmDdX59PPKLm3gGmk1ZgNnj3k7DryqWwkamp4TJ6B36DdpyKEQ0EoEYmH2R62bV4Q+S0ym2z8N2f3Q==
 
+rbush@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/rbush/-/rbush-4.0.1.tgz#1f55afa64a978f71bf9e9a99bc14ff84f3cb0d6d"
+  integrity sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==
+  dependencies:
+    quickselect "^3.0.0"
+
 react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
@@ -4436,6 +4520,13 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-protobuf-schema@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz#9ca9a9e69cf192bbdaf1006ec1973948aa4a3758"
+  integrity sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==
+  dependencies:
+    protocol-buffers-schema "^3.3.1"
+
 resolve@~1.22.1, resolve@~1.22.2:
   version "1.22.10"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
@@ -5313,6 +5404,11 @@ web-tree-sitter@0.24.5:
   resolved "https://registry.yarnpkg.com/web-tree-sitter/-/web-tree-sitter-0.24.5.tgz#16cea449da63012f23ca7b83bd32817dd0520400"
   integrity sha512-+J/2VSHN8J47gQUAvF8KDadrfz6uFYVjxoxbKWDoXVsH2u7yLdarCnIURnrMA6uSRkgX3SdmqM5BOoQjPdSh5w==
 
+web-worker@^1.2.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.5.0.tgz#71b2b0fbcc4293e8f0aa4f6b8a3ffebff733dcc5"
+  integrity sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
@@ -5436,6 +5532,11 @@ xml-name-validator@^5.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz#82be9b957f7afdacf961e5980f1bf227c0bf7673"
   integrity sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==
 
+xml-utils@^1.0.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/xml-utils/-/xml-utils-1.10.2.tgz#436b39ccc25a663ce367ea21abb717afdea5d6b1"
+  integrity sha512-RqM+2o1RYs6T8+3DzDSoTRAUfrvaejbVHcp3+thnAtDKo8LskR+HomLajEy5UjTz24rpka7AxVBRR3g2wTUkJA==
+
 xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
@@ -5465,3 +5566,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zstddec@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/zstddec/-/zstddec-0.1.0.tgz#7050f3f0e0c3978562d0c566b3e5a427d2bad7ec"
+  integrity sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==

From 66e97642f092e50c25bbb7e283f1ba5241767447 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 28 Aug 2025 23:52:26 +0700
Subject: [PATCH 03/40] typing

---
 .../web-forms/src/assets/styles/style.scss    |  1 +
 .../src/components/common/map/AsyncMap.vue    | 23 +++++++++++++++++--
 .../src/components/common/map/MapBlock.vue    |  2 +-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
index 313a535fc..5b9549c1e 100644
--- a/packages/web-forms/src/assets/styles/style.scss
+++ b/packages/web-forms/src/assets/styles/style.scss
@@ -51,6 +51,7 @@
 
 	--odk-max-image-height: 300px;
 	--odk-image-container-size: 300px;
+	--odk-map-height: 445px;
 
 	/*
 	 * This project uses a centralized z-index layering system to manage the stacking order of UI
diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 2b395ea09..a7e15f5ac 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -10,13 +10,32 @@ import ProgressSpinner from 'primevue/progressspinner';
  */
 import { type DefineComponent, onMounted, ref, shallowRef } from 'vue';
 
+interface GeoJSON {
+	type: 'LineString' | 'Point' | 'Polygon';
+	properties?: Record<string, unknown> | null;
+	geometry?: Geometry | null;
+	features?: Feature[];
+}
+
+interface Geometry {
+	type: 'LineString' | 'Point' | 'Polygon';
+	coordinates: number[] | number[][];
+}
+
+interface Feature {
+	type: 'Feature';
+	geometry: Geometry | null;
+	properties: Record<string, unknown> | null;
+}
+
 interface MapBlockProps {
-	data: object; // GeoJSON instance/object
+	data: GeoJSON[];
 	config: {
 		viewCoordinates: [number, number];
 		zoom?: number;
 	};
 }
+
 type MapBlockComponent = DefineComponent<MapBlockProps>;
 
 defineProps<MapBlockProps>();
@@ -71,7 +90,7 @@ onMounted(loadMap);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	height: 445px;
+	height: var(--odk-map-height);
 	width: 100%;
 	background: var(--odk-light-background-color);
 	border-radius: var(--odk-radius);
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 17b54b702..ccfd28a02 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -45,6 +45,6 @@ onMounted(() => {
 <style scoped lang="scss">
 .map-block {
 	width: 100%;
-	height: 445px;
+	height: var(--odk-map-height);
 }
 </style>

From a7dea7314d51666b8117b87df98c875733148d04 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 1 Sep 2025 20:59:12 +0700
Subject: [PATCH 04/40] Map Component

---
 .../src/components/common/IconSVG.vue         |   6 +
 .../src/components/common/map/AsyncMap.vue    |  70 +++----
 .../src/components/common/map/MapBlock.vue    | 104 +++++++---
 .../src/components/common/map/useMapBlock.ts  | 181 ++++++++++++++++++
 4 files changed, 303 insertions(+), 58 deletions(-)
 create mode 100644 packages/web-forms/src/components/common/map/useMapBlock.ts

diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue
index c553f595e..e387cb571 100644
--- a/packages/web-forms/src/components/common/IconSVG.vue
+++ b/packages/web-forms/src/components/common/IconSVG.vue
@@ -3,16 +3,19 @@ import { computed } from 'vue';
 import {
 	mdiAlert,
 	mdiAlertCircleOutline,
+	mdiArrowExpandAll,
 	mdiCamera,
 	mdiCheck,
 	mdiChevronDown,
 	mdiChevronUp,
 	mdiClose,
+	mdiCrosshairsGps,
 	mdiDotsVertical,
 	mdiDownload,
 	mdiDragVertical,
 	mdiEyeOutline,
 	mdiFileOutline,
+	mdiFullscreen,
 	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
@@ -28,16 +31,19 @@ import {
 const iconMap: Record<string, string> = {
 	mdiAlert,
 	mdiAlertCircleOutline,
+	mdiArrowExpandAll,
 	mdiCamera,
 	mdiCheck,
 	mdiChevronDown,
 	mdiChevronUp,
 	mdiClose,
+	mdiCrosshairsGps,
 	mdiDotsVertical,
 	mdiDownload,
 	mdiDragVertical,
 	mdiEyeOutline,
 	mdiFileOutline,
+	mdiFullscreen,
 	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index a7e15f5ac..157df0376 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -1,35 +1,29 @@
 <script setup lang="ts">
-import IconSVG from '@/components/common/IconSVG.vue';
-import Button from 'primevue/button';
-import ProgressSpinner from 'primevue/progressspinner';
-
 /**
- * Note: OpenLayers and MapBlock are not statically imported here to enable bundling them into a separate chunk.
+ * IMPORTANT: OpenLayers and MapBlock are not statically imported here to enable bundling them into a separate chunk.
  * This prevents unnecessary bloat in the main application bundle, reducing initial load times and improving performance.
  * Use dynamic imports instead (e.g., `await import(importPath)`) for lazy-loading these dependencies only when required.
  */
-import { type DefineComponent, onMounted, ref, shallowRef } from 'vue';
-
-interface GeoJSON {
-	type: 'LineString' | 'Point' | 'Polygon';
-	properties?: Record<string, unknown> | null;
-	geometry?: Geometry | null;
-	features?: Feature[];
-}
-
-interface Geometry {
-	type: 'LineString' | 'Point' | 'Polygon';
-	coordinates: number[] | number[][];
-}
-
-interface Feature {
-	type: 'Feature';
-	geometry: Geometry | null;
-	properties: Record<string, unknown> | null;
+import IconSVG from '@/components/common/IconSVG.vue';
+import Button from 'primevue/button';
+import ProgressSpinner from 'primevue/progressspinner';
+import { type DefineComponent, onMounted, shallowRef } from 'vue';
+
+// TODO: This type will come from xforms-engine
+export interface GeoJSONInput {
+	type: string;
+	features?: Array<{
+		type: string;
+		geometry: {
+			type: string;
+			coordinates: unknown;
+		};
+		properties?: Record<string, unknown>;
+	}>;
 }
 
 interface MapBlockProps {
-	data: GeoJSON[];
+	data: GeoJSONInput;
 	config: {
 		viewCoordinates: [number, number];
 		zoom?: number;
@@ -40,15 +34,19 @@ type MapBlockComponent = DefineComponent<MapBlockProps>;
 
 defineProps<MapBlockProps>();
 
-const mapComponent = shallowRef<MapBlockComponent | null>(null);
-const loading = ref(true);
-const error = ref(false);
-const cacheBustCounter = ref(0);
 const TIMEOUT_MS = 5 * 1000;
+const STATES = {
+	READY: 'ready',
+	LOADING: 'loading',
+	ERROR: 'error',
+} as const;
+
+const mapComponent = shallowRef<MapBlockComponent | null>(null);
+const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
+const cacheBustCounter = shallowRef(0);
 
 const loadMap = async () => {
-	error.value = false;
-	loading.value = true;
+	currentState.value = STATES.LOADING;
 	cacheBustCounter.value++;
 
 	const timeoutId = setTimeout(() => {
@@ -58,11 +56,11 @@ const loadMap = async () => {
 	try {
 		const importPath = `./MapBlock.vue?bust=${cacheBustCounter.value}`;
 		mapComponent.value = ((await import(importPath)) as { default: MapBlockComponent }).default;
+		currentState.value = STATES.READY;
 	} catch {
-		error.value = true;
+		currentState.value = STATES.ERROR;
 	} finally {
 		clearTimeout(timeoutId);
-		loading.value = false;
 	}
 };
 
@@ -71,16 +69,18 @@ onMounted(loadMap);
 
 <template>
 	<div class="async-map-container">
-		<div v-if="error" class="map-error">
+		<div v-if="currentState === STATES.ERROR" class="map-error">
 			<!-- TODO: translations -->
-			<p class="map-error-message">Unable to load map</p>
+			<p class="map-error-message">
+				Unable to load map
+			</p>
 			<Button outlined severity="contrast" class="retry-button" @click="loadMap">
 				<IconSVG name="mdiRefresh" />
 				<!-- TODO: translations -->
 				<span>Try again</span>
 			</Button>
 		</div>
-		<ProgressSpinner v-else-if="loading" class="map-spinner" />
+		<ProgressSpinner v-else-if="currentState === STATES.LOADING" class="map-spinner" />
 		<component :is="mapComponent" v-else v-bind="{ ...$props, ...$attrs }" />
 	</div>
 </template>
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index ccfd28a02..0d13a5867 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -4,47 +4,105 @@
  * Keep OpenLayers imports/code here only to bundle separately and
  * load on demand. Avoids main bundle bloat.
  */
-import { Map, View } from 'ol';
-import type { Coordinate } from 'ol/coordinate';
-import GeoJSON from 'ol/format/GeoJSON';
-import TileLayer from 'ol/layer/Tile';
-import { OSM } from 'ol/source';
-import { onMounted, ref } from 'vue';
-
-// ToDo: document these props
+import IconSVG from '@/components/common/IconSVG.vue';
+import {
+	type GeoJSONInput,
+	type GeometryType,
+	type MapConfig,
+	useMapBlock,
+} from '@/components/common/map/useMapBlock.ts';
+import Feature from 'ol/Feature';
+import { Point } from 'ol/geom';
+import { fromLonLat } from 'ol/proj';
+import { onMounted, ref, watch } from 'vue';
+
+// ToDo: document these props, maybe change "data" for a better name
 interface MapBlockProps {
-	data: GeoJSON;
-	config: {
-		viewCoordinates: Coordinate;
-		zoom?: number; // Default 10.
-	};
+	data: GeoJSONInput;
+	config: MapConfig;
 }
+
 const props = defineProps<MapBlockProps>();
+const mapContainer = ref<HTMLElement | undefined>();
+const isFullScreen = ref(false);
+const savedFeature = ref<Feature<GeometryType> | undefined>();
 
-const mapContainer = ref<HTMLElement | null>(null);
+const mapHandler = useMapBlock(props.config);
 
 onMounted(() => {
-	if (!mapContainer.value) {
+	if (mapContainer.value == null || mapHandler == null) {
 		return;
 	}
 
-	const { viewCoordinates, zoom = 10 } = props.config;
+	mapHandler.initializeMap(mapContainer.value);
+	mapHandler.loadGeometries(props.data);
+});
+
+watch(
+	() => props.data,
+	(newData) => {
+		mapHandler?.loadGeometries(newData);
+	},
+	{ deep: true, immediate: true }
+);
 
-	const mapRef = new Map({
-		target: mapContainer.value,
-		layers: [new TileLayer({ source: new OSM() })], // ToDo: what's the default, and how can fd configure it
-		view: new View({ center: viewCoordinates, zoom }),
+const centerFeatureLocation = () => {
+	savedFeature.value = new Feature({
+		geometry: new Point(fromLonLat([-74.0059, 40.7128])), // Hardcoded: New York
 	});
-});
+	if (savedFeature.value == null || mapHandler == null) {
+		return;
+	}
+
+	mapHandler.centerFeatureLocation(savedFeature.value);
+};
 </script>
 
 <template>
-	<div ref="mapContainer" class="map-block" />
+	<div :class="{ 'map-block-component': true, 'map-full-screen': isFullScreen }">
+		<div class="control-bar">
+			<button :class="{ 'control-active': isFullScreen }" @click="isFullScreen = !isFullScreen">
+				<IconSVG name="mdiArrowExpandAll" />
+			</button>
+			<button @click="centerFeatureLocation">
+				<IconSVG name="mdiFullscreen" />
+			</button>
+			<button @click="mapHandler?.centerCurrentLocation">
+				<IconSVG name="mdiCrosshairsGps" />
+			</button>
+		</div>
+
+		<div ref="mapContainer" class="map-block" />
+
+		<div v-if="mapHandler?.errorMessage.value?.length" class="map-block-error">
+			<!-- TODO: translations -->
+			<strong>Cannot access location</strong>&nbsp;<span>Grant location permission in the browser settings and make sure location is turned on.</span>
+		</div>
+
+		<div v-if="Object.keys(mapHandler?.selectedFeatureProperties.value).length" class="map-block-properties">
+			<pre>{{ JSON.stringify(mapHandler?.selectedFeatureProperties.value) }}</pre>
+		</div>
+	</div>
 </template>
 
 <style scoped lang="scss">
-.map-block {
+.map-block-component {
 	width: 100%;
 	height: var(--odk-map-height);
+	background: var(--odk-light-background-color);
+
+	.map-block {
+		width: 100%;
+		height: 100%;
+	}
+
+	&.map-full-screen {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100vh;
+		width: 100vw;
+		z-index: var(--odk-z-index-overlay);
+	}
 }
 </style>
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
new file mode 100644
index 000000000..1fdc5ff0f
--- /dev/null
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -0,0 +1,181 @@
+import { Map, View } from 'ol';
+import { Zoom } from 'ol/control';
+import type { Coordinate } from 'ol/coordinate';
+import { getCenter } from 'ol/extent';
+import Feature from 'ol/Feature';
+import GeoJSON from 'ol/format/GeoJSON';
+import { LineString, Point, Polygon } from 'ol/geom';
+import TileLayer from 'ol/layer/Tile';
+import WebGLVectorLayer from 'ol/layer/WebGLVector';
+import type { Pixel } from 'ol/pixel';
+import { fromLonLat } from 'ol/proj';
+import { OSM } from 'ol/source';
+import VectorSource from 'ol/source/Vector';
+import { computed, ref, shallowRef, watch } from 'vue';
+
+export interface MapConfig {
+	viewCoordinates: Coordinate;
+	zoom?: number; // See DEFAULT_ZOOM
+}
+
+export type GeometryType = LineString | Point | Polygon;
+
+// TODO: This type will come from xforms-engine
+export interface GeoJSONInput {
+	type: string;
+	features?: Array<{
+		type: string;
+		geometry: {
+			type: string;
+			coordinates: unknown;
+		};
+		properties?: Record<string, unknown>;
+	}>;
+}
+
+export const STATES = {
+	LOADING: 'loading',
+	READY: 'ready',
+	READ_ONLY: 'read_only',
+	ERROR: 'error',
+} as const;
+
+const GEOLOCATION_TIMEOUT_MS = 10 * 1000;
+const DEFAULT_ZOOM = 10;
+const ANIMATION_TIME = 1000;
+const FEATURE_ID_PROPERTY = '__id';
+
+export function useMapBlock(config: MapConfig) {
+	const zoom = config.zoom ?? DEFAULT_ZOOM;
+
+	const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
+	const errorMessage = shallowRef<string | undefined>();
+	const mapInstance = ref<Map | undefined>();
+	const vectorLayer = ref<WebGLVectorLayer | undefined>(); // ToDo: better name - contains all the features
+	const selectedFeature = ref<Feature<GeometryType> | undefined>();
+	const selectedFeatureProperties = computed<Record<string, unknown>>(() => {
+		const { geometry, __id, ...props } = selectedFeature.value?.getProperties() ?? {};
+		return props;
+	});
+
+	const initializeMap = (mapContainer: HTMLElement): void => {
+		mapInstance.value = new Map({
+			target: mapContainer,
+			layers: [new TileLayer({ source: new OSM() })],
+			view: new View({
+				center: fromLonLat(config.viewCoordinates),
+				zoom: zoom,
+			}),
+			controls: [new Zoom()],
+		});
+	};
+
+	const centerCurrentLocation = (): void => {
+		if (!navigator.geolocation) {
+			currentState.value = STATES.ERROR;
+			errorMessage.value = 'Geolocation Error: Geolocation is not supported by this browser.';
+		}
+
+		navigator.geolocation.getCurrentPosition(
+			(position) => {
+				currentState.value = STATES.READY;
+				const coords = fromLonLat([position.coords.longitude, position.coords.latitude]);
+				mapInstance.value
+					?.getView()
+					.animate({ center: coords, zoom: zoom, duration: ANIMATION_TIME });
+			},
+			(error) => {
+				currentState.value = STATES.ERROR;
+				errorMessage.value = `Geolocation Error: ${error.message}`;
+			},
+			{ enableHighAccuracy: true, timeout: GEOLOCATION_TIMEOUT_MS }
+		);
+	};
+
+	const centerFeatureLocation = (feature: Feature<GeometryType>): void => {
+		const geometry = feature.getGeometry();
+		if (geometry == null) {
+			return;
+		}
+
+		mapInstance.value?.getView().animate({
+			center: getCenter(geometry.getExtent()),
+			zoom: zoom,
+			duration: ANIMATION_TIME,
+		});
+	};
+
+	const loadGeometries = (geoJSON: GeoJSONInput): void => {
+		if (mapInstance.value == null) {
+			return;
+		}
+
+		currentState.value = STATES.LOADING;
+		selectedFeature.value = undefined;
+		if (vectorLayer.value != null) {
+			mapInstance.value.removeLayer(vectorLayer.value);
+			vectorLayer.value.dispose();
+			vectorLayer.value = undefined;
+		}
+
+		const features = new GeoJSON().readFeatures(geoJSON, {
+			dataProjection: 'EPSG:4326', // ToDo: Typical for GeoJSON ?
+			featureProjection: mapInstance.value.getView().getProjection(), // ToDo: OSM uses EPSG:3857 ?
+		});
+
+		features.forEach((feature) => {
+			if (feature.get(FEATURE_ID_PROPERTY) == null) {
+				feature.set(FEATURE_ID_PROPERTY, crypto.randomUUID());
+			}
+		});
+
+		const style = {
+			'circle-radius': 7, // For points: circle style
+			'circle-fill-color': 'fuchsia',
+			'stroke-color': 'fuchsia', // For lines/polygons: stroke
+			'stroke-width': 3,
+			'fill-color': ['color', 191, 0, 255, 0.5], // For polygons: semi-transparent fill
+			// Example dynamic: 'circle-radius': ['interpolate', ['linear'], ['get', 'value'], 0, 3, 100, 10],
+		};
+
+		vectorLayer.value = new WebGLVectorLayer({ source: new VectorSource({ features }), style });
+		mapInstance.value.addLayer(vectorLayer.value);
+		mapInstance.value.on('singleclick', (event) => selectFeature(event.pixel));
+
+		currentState.value = STATES.READY;
+	};
+
+	const selectFeature = (position: Pixel): void => {
+		const hitFeatures = mapInstance.value?.getFeaturesAtPixel(position, {
+			hitTolerance: 5,
+			layerFilter: (layer) => layer === vectorLayer.value,
+		});
+
+		selectedFeature.value = hitFeatures?.length
+			? (hitFeatures[0] as Feature<GeometryType>)
+			: undefined;
+
+		vectorLayer.value?.updateStyleVariables({
+			selectedId: (selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? null,
+		});
+	};
+
+	watch(
+		() => currentState.value,
+		() => {
+			if (currentState.value !== STATES.ERROR) {
+				errorMessage.value = undefined;
+			}
+		},
+		{ immediate: true }
+	);
+
+	return {
+		selectedFeatureProperties,
+		errorMessage,
+		initializeMap,
+		centerFeatureLocation,
+		centerCurrentLocation,
+		loadGeometries,
+	};
+}

From 4823ebf8e2f6e1be9539e10d4a0b7b754ac1a7ca Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 3 Sep 2025 21:42:50 +0700
Subject: [PATCH 05/40] Adds new icons

---
 packages/web-forms/src/components/common/IconSVG.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue
index e387cb571..9ac58adda 100644
--- a/packages/web-forms/src/components/common/IconSVG.vue
+++ b/packages/web-forms/src/components/common/IconSVG.vue
@@ -9,6 +9,7 @@ import {
 	mdiChevronDown,
 	mdiChevronUp,
 	mdiClose,
+	mdiContentSave,
 	mdiCrosshairsGps,
 	mdiDotsVertical,
 	mdiDownload,
@@ -19,6 +20,7 @@ import {
 	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
+	mdiPencil,
 	mdiPlus,
 	mdiPrinter,
 	mdiRefresh,
@@ -37,6 +39,7 @@ const iconMap: Record<string, string> = {
 	mdiChevronDown,
 	mdiChevronUp,
 	mdiClose,
+	mdiContentSave,
 	mdiCrosshairsGps,
 	mdiDotsVertical,
 	mdiDownload,
@@ -47,6 +50,7 @@ const iconMap: Record<string, string> = {
 	mdiImage,
 	mdiMapMarkerOutline,
 	mdiMenu,
+	mdiPencil,
 	mdiPlus,
 	mdiPrinter,
 	mdiRefresh,

From 1e9feec9fc8ed6d11dc80c4cec2a23f15a24cece Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 3 Sep 2025 21:43:23 +0700
Subject: [PATCH 06/40] removes cache buste and timeout

---
 .../src/components/common/map/AsyncMap.vue     | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 157df0376..8f28e26ea 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -34,7 +34,6 @@ type MapBlockComponent = DefineComponent<MapBlockProps>;
 
 defineProps<MapBlockProps>();
 
-const TIMEOUT_MS = 5 * 1000;
 const STATES = {
 	READY: 'ready',
 	LOADING: 'loading',
@@ -43,24 +42,19 @@ const STATES = {
 
 const mapComponent = shallowRef<MapBlockComponent | null>(null);
 const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
-const cacheBustCounter = shallowRef(0);
 
 const loadMap = async () => {
 	currentState.value = STATES.LOADING;
-	cacheBustCounter.value++;
-
-	const timeoutId = setTimeout(() => {
-		throw new Error('Download of Map bundle timeout');
-	}, TIMEOUT_MS);
 
 	try {
-		const importPath = `./MapBlock.vue?bust=${cacheBustCounter.value}`;
-		mapComponent.value = ((await import(importPath)) as { default: MapBlockComponent }).default;
+		mapComponent.value = (
+			(await import('./MapBlock.vue')) as {
+				default: MapBlockComponent;
+			}
+		).default;
 		currentState.value = STATES.READY;
 	} catch {
 		currentState.value = STATES.ERROR;
-	} finally {
-		clearTimeout(timeoutId);
 	}
 };
 
@@ -90,7 +84,7 @@ onMounted(loadMap);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	height: var(--odk-map-height);
+	height: fit-content;
 	width: 100%;
 	background: var(--odk-light-background-color);
 	border-radius: var(--odk-radius);

From b009dc7ecdd4d4328d25137e0a192e16659f2bff Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Fri, 5 Sep 2025 01:05:29 +0700
Subject: [PATCH 07/40] Map UI features: properties popup and status bar

---
 .../src/assets/images/map-location.svg        |  23 +++
 .../web-forms/src/assets/styles/style.scss    |   1 -
 .../src/components/common/map/AsyncMap.vue    |   1 +
 .../src/components/common/map/MapBlock.vue    | 150 ++++++++++++---
 .../components/common/map/MapProperties.vue   | 114 +++++++++++
 .../components/common/map/MapStatusBar.vue    |  65 +++++++
 .../src/components/common/map/map-styles.ts   | 131 +++++++++++++
 .../src/components/common/map/useMapBlock.ts  | 177 +++++++++++++-----
 8 files changed, 590 insertions(+), 72 deletions(-)
 create mode 100644 packages/web-forms/src/assets/images/map-location.svg
 create mode 100644 packages/web-forms/src/components/common/map/MapProperties.vue
 create mode 100644 packages/web-forms/src/components/common/map/MapStatusBar.vue
 create mode 100644 packages/web-forms/src/components/common/map/map-styles.ts

diff --git a/packages/web-forms/src/assets/images/map-location.svg b/packages/web-forms/src/assets/images/map-location.svg
new file mode 100644
index 000000000..8aae37881
--- /dev/null
+++ b/packages/web-forms/src/assets/images/map-location.svg
@@ -0,0 +1,23 @@
+<svg width="86" height="84" viewBox="0 0 86 84" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3080_8764)">
+<g filter="url(#filter0_d_3080_8764)">
+<path d="M43.0003 7C29.1328 7 17.917 17.955 17.917 31.5C17.917 49.875 43.0003 77 43.0003 77C43.0003 77 68.0837 49.875 68.0837 31.5C68.0837 17.955 56.8678 7 43.0003 7ZM43.0003 40.25C38.0553 40.25 34.042 36.33 34.042 31.5C34.042 26.67 38.0553 22.75 43.0003 22.75C47.9453 22.75 51.9587 26.67 51.9587 31.5C51.9587 36.33 47.9453 40.25 43.0003 40.25Z" fill="#3E9FCC"/>
+</g>
+<circle cx="43" cy="32" r="10" fill="#E9F8FF"/>
+</g>
+<defs>
+<filter id="filter0_d_3080_8764" x="13.917" y="7" width="58.167" height="78" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3080_8764"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3080_8764" result="shape"/>
+</filter>
+<clipPath id="clip0_3080_8764">
+<rect width="86" height="84" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
index 5b9549c1e..313a535fc 100644
--- a/packages/web-forms/src/assets/styles/style.scss
+++ b/packages/web-forms/src/assets/styles/style.scss
@@ -51,7 +51,6 @@
 
 	--odk-max-image-height: 300px;
 	--odk-image-container-size: 300px;
-	--odk-map-height: 445px;
 
 	/*
 	 * This project uses a centralized z-index layering system to manage the stacking order of UI
diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 8f28e26ea..c1e608131 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -47,6 +47,7 @@ const loadMap = async () => {
 	currentState.value = STATES.LOADING;
 
 	try {
+		// ToDo: this is cached and retry doesn't work. Cannot add cache bust parameter.
 		mapComponent.value = (
 			(await import('./MapBlock.vue')) as {
 				default: MapBlockComponent;
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 0d13a5867..0bfed3680 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -5,16 +5,14 @@
  * load on demand. Avoids main bundle bloat.
  */
 import IconSVG from '@/components/common/IconSVG.vue';
+import MapProperties from '@/components/common/map/MapProperties.vue';
+import MapStatusBar from '@/components/common/map/MapStatusBar.vue';
 import {
 	type GeoJSONInput,
-	type GeometryType,
 	type MapConfig,
 	useMapBlock,
 } from '@/components/common/map/useMapBlock.ts';
-import Feature from 'ol/Feature';
-import { Point } from 'ol/geom';
-import { fromLonLat } from 'ol/proj';
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 
 // ToDo: document these props, maybe change "data" for a better name
 interface MapBlockProps {
@@ -23,9 +21,9 @@ interface MapBlockProps {
 }
 
 const props = defineProps<MapBlockProps>();
+const emit = defineEmits(['save']);
 const mapContainer = ref<HTMLElement | undefined>();
 const isFullScreen = ref(false);
-const savedFeature = ref<Feature<GeometryType> | undefined>();
 
 const mapHandler = useMapBlock(props.config);
 
@@ -46,15 +44,20 @@ watch(
 	{ deep: true, immediate: true }
 );
 
+const mapPropertiesTitle = computed(() => {
+	const label = mapHandler?.selectedFeatureProperties.value?.label;
+	return typeof label === 'string' ? label : '';
+});
+
 const centerFeatureLocation = () => {
-	savedFeature.value = new Feature({
-		geometry: new Point(fromLonLat([-74.0059, 40.7128])), // Hardcoded: New York
-	});
-	if (savedFeature.value == null || mapHandler == null) {
-		return;
+	if (mapHandler.savedFeature.value != null) {
+		mapHandler.centerFeatureLocation(mapHandler.savedFeature.value);
 	}
+};
 
-	mapHandler.centerFeatureLocation(savedFeature.value);
+const saveSelection = () => {
+	mapHandler?.saveFeature();
+	emit('save', mapHandler.savedFeature.value);
 };
 </script>
 
@@ -74,35 +77,140 @@ const centerFeatureLocation = () => {
 
 		<div ref="mapContainer" class="map-block" />
 
-		<div v-if="mapHandler?.errorMessage.value?.length" class="map-block-error">
-			<!-- TODO: translations -->
-			<strong>Cannot access location</strong>&nbsp;<span>Grant location permission in the browser settings and make sure location is turned on.</span>
-		</div>
+		<MapStatusBar
+			:has-saved-feature="mapHandler?.savedFeature.value != null"
+			class="map-status-bar-component"
+			@view-details="mapHandler?.selectFeature(mapHandler?.savedFeature.value)"
+		/>
 
-		<div v-if="Object.keys(mapHandler?.selectedFeatureProperties.value).length" class="map-block-properties">
-			<pre>{{ JSON.stringify(mapHandler?.selectedFeatureProperties.value) }}</pre>
+		<div v-if="mapHandler?.errorMessage.value != null" class="map-block-error">
+			<strong>{{ mapHandler?.errorMessage.value.title }}</strong>
+			&nbsp;
+			<span>{{ mapHandler?.errorMessage.value.message }}</span>
 		</div>
+
+		<MapProperties
+			v-if="mapHandler?.selectedFeatureProperties.value != null"
+			:title="mapPropertiesTitle"
+			:properties="mapHandler?.selectedFeatureProperties.value"
+			:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
+			@close="mapHandler.unselectFeature"
+			@discard="mapHandler?.discardSavedFeature"
+			@save="saveSelection"
+		/>
 	</div>
 </template>
 
 <style scoped lang="scss">
+@use 'primeflex/core/_variables.scss' as pf;
+
 .map-block-component {
+	position: relative;
 	width: 100%;
-	height: var(--odk-map-height);
+	height: fit-content;
 	background: var(--odk-light-background-color);
+	border-radius: var(--odk-radius) var(--odk-radius) 0 0;
+	overflow: hidden;
 
 	.map-block {
 		width: 100%;
-		height: 100%;
+		height: 445px;
 	}
 
 	&.map-full-screen {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
 		position: absolute;
 		top: 0;
 		left: 0;
 		height: 100vh;
 		width: 100vw;
-		z-index: var(--odk-z-index-overlay);
+		z-index: var(--odk-z-index-topmost);
+
+		.map-block {
+			flex-grow: 2;
+		}
+	}
+}
+
+.control-bar {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	top: 20px;
+	right: 20px;
+	z-index: var(--odk-z-index-overlay);
+	gap: 10px;
+
+	button {
+		background: white;
+		padding: 8px;
+		border-radius: var(--odk-radius);
+		border: 1px solid var(--odk-border-color);
+		cursor: pointer;
+	}
+}
+
+:deep(.ol-zoom) {
+	position: absolute;
+	right: 20px;
+	bottom: 20px;
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	align-items: center;
+	box-shadow: none;
+	background: #fff;
+	border-radius: var(--odk-radius);
+	overflow: hidden;
+	border: 1px solid var(--odk-border-color);
+
+	button,
+	button:hover,
+	button:focus,
+	button:active {
+		height: 37px;
+		width: 36px;
+		border: none;
+		border-bottom: 1px solid var(--odk-border-color);
+		background: #fff;
+		font-size: 24px;
+		font-weight: 300;
+		cursor: pointer;
+	}
+
+	button:hover {
+		background: #f1f3f6;
+	}
+}
+
+.map-block-error {
+	font-size: var(--odk-base-font-size);
+	color: var(--odk-error-text-color);
+	background-color: var(--odk-error-background-color);
+	border-radius: var(--odk-radius);
+	margin-top: 20px;
+	padding: 8px;
+
+	&.stack-errors {
+		padding: 0;
+	}
+}
+
+@media screen and (max-width: #{pf.$sm}) {
+	.map-block-component,
+	.map-block-component .map-block {
+		height: 100vh;
+
+		:deep(.ol-zoom) {
+			top: 165px;
+			bottom: unset;
+		}
+	}
+
+	.map-status-bar-component {
+		display: none;
 	}
 }
 </style>
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
new file mode 100644
index 000000000..caaad7400
--- /dev/null
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import IconSVG from '@/components/common/IconSVG.vue';
+import Button from 'primevue/button';
+import { defineEmits, defineProps } from 'vue';
+
+defineProps<{
+	title: string;
+	properties: Record<string, unknown>;
+	hasSavedFeature: boolean;
+}>();
+
+const emit = defineEmits(['close', 'save', 'discard']);
+</script>
+
+<template>
+	<div class="map-properties">
+		<div class="map-properties-header">
+			<strong>{{ title }}</strong>
+			<button class="close-icon" @click="emit('close')">
+				<IconSVG name="mdiClose" />
+			</button>
+		</div>
+
+		<div class="map-properties-content">
+			<div v-for="[key, value] in Object.entries(properties)" :key="key" class="property-line">
+				{{ key }}: {{ value }}
+			</div>
+		</div>
+
+		<div class="map-properties-footer">
+			<Button v-if="hasSavedFeature" outlined severity="contrast" @click="emit('discard')">
+				<IconSVG name="mdiPencil" />
+				<!-- TODO: translations -->
+				<span>Remove selection</span>
+			</Button>
+			<Button v-else outlined severity="contrast" @click="emit('save')">
+				<IconSVG name="mdiContentSave" />
+				<!-- TODO: translations -->
+				<span>Save selected</span>
+			</Button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@use 'primeflex/core/_variables.scss' as pf;
+
+.map-properties {
+	--odk-standard-map-spacing: 20px;
+}
+
+.map-properties {
+	background: var(--odk-base-background-color);
+	position: absolute;
+	top: var(--odk-standard-map-spacing);
+	left: var(--odk-standard-map-spacing);
+	padding: var(--odk-standard-map-spacing);
+	border-radius: var(--odk-radius);
+	display: flex;
+	flex-direction: column;
+	gap: var(--odk-standard-map-spacing);
+	min-width: 300px;
+	max-width: 360px;
+	max-height: 370px;
+}
+
+.map-properties-header {
+	padding: 10px 0px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: space-between;
+
+	strong {
+		font-size: var(--odk-dialog-title-font-size);
+	}
+
+	.close-icon {
+		cursor: pointer;
+	}
+}
+
+.map-properties-content {
+	overflow: auto;
+
+	.property-line {
+		padding: 15px 0;
+
+		&:not(:last-child) {
+			border-bottom: 1px solid var(--odk-border-color);
+		}
+	}
+}
+
+.map-properties-footer :deep(.p-button).p-button-contrast.p-button-outlined {
+	background: var(--odk-base-background-color);
+
+	&:hover {
+		background: var(--odk-muted-background-color);
+	}
+}
+
+@media screen and (max-width: #{pf.$sm}) {
+	.map-properties {
+		top: unset;
+		bottom: var(--odk-standard-map-spacing);
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		max-width: calc(100% - (var(--odk-standard-map-spacing) * 2));
+		max-height: 50%;
+	}
+}
+</style>
diff --git a/packages/web-forms/src/components/common/map/MapStatusBar.vue b/packages/web-forms/src/components/common/map/MapStatusBar.vue
new file mode 100644
index 000000000..4d53d4ab5
--- /dev/null
+++ b/packages/web-forms/src/components/common/map/MapStatusBar.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import IconSVG from '@/components/common/IconSVG.vue';
+import Button from 'primevue/button';
+
+defineProps<{ hasSavedFeature: boolean }>();
+const emit = defineEmits(['view-details']);
+</script>
+
+<template>
+	<div class="map-status-bar">
+		<div v-if="hasSavedFeature" class="map-status-wrap">
+			<div class="map-status">
+				<IconSVG name="mdiCheck" />
+				<!-- TODO: translations -->
+				<span>Point saved</span>
+			</div>
+			<Button outlined severity="contrast" @click="emit('view-details')">
+				<!-- TODO: translations -->
+				<span>View details</span>
+			</Button>
+		</div>
+
+		<div v-else class="map-status">
+			<IconSVG name="mdiCrosshairsGps" />
+			<!-- TODO: translations -->
+			<span>No point saved</span>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@use 'primeflex/core/_variables.scss' as pf;
+
+.map-status-bar,
+.map-status,
+.map-status-wrap {
+	display: flex;
+	align-items: center;
+	flex-wrap: nowrap;
+}
+
+.map-status-bar {
+	padding: 10px 20px;
+	min-height: 60px;
+	background: var(--odk-light-background-color);
+	border: 1px solid var(--odk-border-color);
+}
+
+.map-status {
+	gap: 10px;
+}
+
+.map-status-wrap {
+	justify-content: space-between;
+	width: 100%;
+}
+
+.map-status-bar :deep(.p-button).p-button-contrast.p-button-outlined {
+	background: var(--odk-base-background-color);
+
+	&:hover {
+		background: var(--odk-muted-background-color);
+	}
+}
+</style>
diff --git a/packages/web-forms/src/components/common/map/map-styles.ts b/packages/web-forms/src/components/common/map/map-styles.ts
new file mode 100644
index 000000000..b1a469421
--- /dev/null
+++ b/packages/web-forms/src/components/common/map/map-styles.ts
@@ -0,0 +1,131 @@
+import type { Rule } from 'ol/style/flat';
+import mapLocationIcon from '@/assets/images/map-location.svg';
+
+const DEFAULT_POINT_STYLE = {
+	'icon-src': mapLocationIcon,
+	'icon-width': 40,
+	'icon-height': 40,
+};
+
+const DEFAULT_LINE_STYLE = {
+	'stroke-width': 6,
+	'stroke-color': '#3E9FCC',
+};
+
+const DEFAULT_POLYGON_STYLE = {
+	'fill-color': 'rgba(233, 248, 255, 0.8)',
+	'stroke-width': 6,
+	'stroke-color': '#3E9FCC',
+};
+
+const SCALE_POINT_STYLE = {
+	'icon-src': mapLocationIcon,
+	'icon-width': 50,
+	'icon-height': 50,
+};
+
+const SCALE_LINE_STYLE = {
+	'stroke-width': 10,
+	'stroke-color': '#3E9FCC',
+};
+
+const SCALE_POLYGON_STYLE = {
+	'stroke-width': 10,
+};
+
+const GLOW_POINT_STYLE = {
+	'circle-radius': 30,
+	'circle-fill-color': 'rgba(148, 224, 237, 0.7)',
+	'circle-displacement': [0, 0],
+};
+
+const GLOW_LINE_STYLE = {
+	'stroke-width': 20,
+	'stroke-color': 'rgba(148, 224, 237, 0.7)',
+};
+
+const GLOW_POLYGON_STYLE = {
+	'stroke-width': 20,
+	'stroke-color': 'rgba(148, 224, 237, 0.7)',
+	'fill-color': 'transparent',
+};
+
+export function getUnselectedStyles(
+	featureIdProp: string,
+	selectedPropName: string,
+	savedPropName: string
+): Rule[] {
+	const makeFilter = (type: string) => {
+		return [
+			'all',
+			['match', ['geometry-type'], type, true, false],
+			['!=', ['get', featureIdProp], ['var', selectedPropName]],
+			['!=', ['get', featureIdProp], ['var', savedPropName]],
+		];
+	};
+
+	return [
+		{
+			filter: makeFilter('Point'),
+			style: DEFAULT_POINT_STYLE,
+		},
+		{
+			filter: makeFilter('LineString'),
+			style: DEFAULT_LINE_STYLE,
+		},
+		{
+			filter: makeFilter('Polygon'),
+			style: DEFAULT_POLYGON_STYLE,
+		},
+	];
+}
+
+export function getSelectedStyles(featureIdProp: string, selectedPropName: string): Rule[] {
+	const makeFilter = (type: string) => {
+		return [
+			'all',
+			['match', ['geometry-type'], type, true, false],
+			['==', ['get', featureIdProp], ['var', selectedPropName]],
+		];
+	};
+
+	return [
+		{
+			filter: makeFilter('Point'),
+			style: [GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
+		},
+		{
+			filter: makeFilter('LineString'),
+			style: [GLOW_LINE_STYLE, DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
+		},
+		{
+			filter: makeFilter('Polygon'),
+			style: [GLOW_POLYGON_STYLE, DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
+		},
+	];
+}
+
+export function getSavedStyles(featureIdProp: string, savedPropName: string): Rule[] {
+	const makeFilter = (type: string) => {
+		return [
+			'all',
+			['match', ['geometry-type'], type, true, false],
+			['==', ['get', featureIdProp], ['var', savedPropName]],
+		];
+	};
+
+	return [
+		{
+			filter: makeFilter('Point'),
+			style: [DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
+		},
+		{
+			filter: makeFilter('LineString'),
+			style: [DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
+		},
+		{
+			filter: makeFilter('Polygon'),
+			style: [DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
+		},
+	];
+}
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 1fdc5ff0f..13219b448 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -1,7 +1,11 @@
+import {
+	getSavedStyles,
+	getSelectedStyles,
+	getUnselectedStyles,
+} from '@/components/common/map/map-styles.ts';
 import { Map, View } from 'ol';
 import { Zoom } from 'ol/control';
 import type { Coordinate } from 'ol/coordinate';
-import { getCenter } from 'ol/extent';
 import Feature from 'ol/Feature';
 import GeoJSON from 'ol/format/GeoJSON';
 import { LineString, Point, Polygon } from 'ol/geom';
@@ -18,7 +22,7 @@ export interface MapConfig {
 	zoom?: number; // See DEFAULT_ZOOM
 }
 
-export type GeometryType = LineString | Point | Polygon;
+type GeometryType = LineString | Point | Polygon;
 
 // TODO: This type will come from xforms-engine
 export interface GeoJSONInput {
@@ -33,29 +37,39 @@ export interface GeoJSONInput {
 	}>;
 }
 
-export const STATES = {
+const STATES = {
 	LOADING: 'loading',
 	READY: 'ready',
-	READ_ONLY: 'read_only',
 	ERROR: 'error',
 } as const;
 
+const DEFAULT_GEOJSON_PROJECTION = 'EPSG:4326';
+const DEFAULT_ZOOM = 12;
 const GEOLOCATION_TIMEOUT_MS = 10 * 1000;
-const DEFAULT_ZOOM = 10;
 const ANIMATION_TIME = 1000;
-const FEATURE_ID_PROPERTY = '__id';
+const SMALL_DEVICE_WIDTH = 576;
+const MAP_HIT_TOLERANCE = 5;
+const FEATURE_ID_PROPERTY = 'feature_id';
+const SAVED_ID_PROPERTY = 'savedId';
+const SELECTED_ID_PROPERTY = 'selectedId';
 
 export function useMapBlock(config: MapConfig) {
 	const zoom = config.zoom ?? DEFAULT_ZOOM;
 
 	const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
-	const errorMessage = shallowRef<string | undefined>();
+	const errorMessage = shallowRef<{ title: string; message: string } | undefined>();
 	const mapInstance = ref<Map | undefined>();
-	const vectorLayer = ref<WebGLVectorLayer | undefined>(); // ToDo: better name - contains all the features
+	const featuresVectorLayer = ref<WebGLVectorLayer | undefined>();
+	const savedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeature = ref<Feature<GeometryType> | undefined>();
-	const selectedFeatureProperties = computed<Record<string, unknown>>(() => {
-		const { geometry, __id, ...props } = selectedFeature.value?.getProperties() ?? {};
-		return props;
+	const selectedFeatureProperties = computed<Record<string, unknown> | undefined>(() => {
+		// Removing OpenLayers properties and FEATURE_ID_PROPERTY
+		const {
+			geometry,
+			[FEATURE_ID_PROPERTY]: id,
+			...props
+		} = selectedFeature.value?.getProperties() ?? {};
+		return Object.keys(props).length ? props : undefined;
 	});
 
 	const initializeMap = (mapContainer: HTMLElement): void => {
@@ -68,25 +82,33 @@ export function useMapBlock(config: MapConfig) {
 			}),
 			controls: [new Zoom()],
 		});
+		currentState.value = STATES.READY;
 	};
 
 	const centerCurrentLocation = (): void => {
+		// TODO: translations
+		const friendlyError = {
+			title: 'Cannot access location',
+			message:
+				'Grant location permission in the browser settings and make sure location is turned on.',
+		};
+
 		if (!navigator.geolocation) {
 			currentState.value = STATES.ERROR;
-			errorMessage.value = 'Geolocation Error: Geolocation is not supported by this browser.';
+			errorMessage.value = friendlyError;
 		}
 
 		navigator.geolocation.getCurrentPosition(
 			(position) => {
-				currentState.value = STATES.READY;
 				const coords = fromLonLat([position.coords.longitude, position.coords.latitude]);
 				mapInstance.value
 					?.getView()
 					.animate({ center: coords, zoom: zoom, duration: ANIMATION_TIME });
+				currentState.value = STATES.READY;
 			},
-			(error) => {
+			() => {
 				currentState.value = STATES.ERROR;
-				errorMessage.value = `Geolocation Error: ${error.message}`;
+				errorMessage.value = friendlyError;
 			},
 			{ enableHighAccuracy: true, timeout: GEOLOCATION_TIMEOUT_MS }
 		);
@@ -94,15 +116,26 @@ export function useMapBlock(config: MapConfig) {
 
 	const centerFeatureLocation = (feature: Feature<GeometryType>): void => {
 		const geometry = feature.getGeometry();
-		if (geometry == null) {
+		const size = mapInstance.value?.getSize();
+		const view = mapInstance.value?.getView();
+
+		if (geometry == null || !size?.length || view == null) {
 			return;
 		}
 
-		mapInstance.value?.getView().animate({
-			center: getCenter(geometry.getExtent()),
-			zoom: zoom,
-			duration: ANIMATION_TIME,
-		});
+		const width = size[0];
+		const height = size[1];
+		let pixelOffsetY = 0;
+		let pixelOffsetX = -50;
+		if (width < SMALL_DEVICE_WIDTH) {
+			pixelOffsetY = 130;
+			pixelOffsetX = 0;
+		}
+
+		view.centerOn(geometry.getExtent(), size, [
+			width / 2 - pixelOffsetX,
+			height / 2 - pixelOffsetY,
+		]);
 	};
 
 	const loadGeometries = (geoJSON: GeoJSONInput): void => {
@@ -111,16 +144,18 @@ export function useMapBlock(config: MapConfig) {
 		}
 
 		currentState.value = STATES.LOADING;
-		selectedFeature.value = undefined;
-		if (vectorLayer.value != null) {
-			mapInstance.value.removeLayer(vectorLayer.value);
-			vectorLayer.value.dispose();
-			vectorLayer.value = undefined;
+		unselectFeature();
+		discardSavedFeature();
+
+		if (featuresVectorLayer.value != null) {
+			mapInstance.value.removeLayer(featuresVectorLayer.value);
+			featuresVectorLayer.value.dispose();
+			featuresVectorLayer.value = undefined;
 		}
 
 		const features = new GeoJSON().readFeatures(geoJSON, {
-			dataProjection: 'EPSG:4326', // ToDo: Typical for GeoJSON ?
-			featureProjection: mapInstance.value.getView().getProjection(), // ToDo: OSM uses EPSG:3857 ?
+			dataProjection: DEFAULT_GEOJSON_PROJECTION, // ToDo: do we support different GeoJSON projections?
+			featureProjection: mapInstance.value.getView().getProjection(),
 		});
 
 		features.forEach((feature) => {
@@ -129,37 +164,70 @@ export function useMapBlock(config: MapConfig) {
 			}
 		});
 
-		const style = {
-			'circle-radius': 7, // For points: circle style
-			'circle-fill-color': 'fuchsia',
-			'stroke-color': 'fuchsia', // For lines/polygons: stroke
-			'stroke-width': 3,
-			'fill-color': ['color', 191, 0, 255, 0.5], // For polygons: semi-transparent fill
-			// Example dynamic: 'circle-radius': ['interpolate', ['linear'], ['get', 'value'], 0, 3, 100, 10],
-		};
-
-		vectorLayer.value = new WebGLVectorLayer({ source: new VectorSource({ features }), style });
-		mapInstance.value.addLayer(vectorLayer.value);
-		mapInstance.value.on('singleclick', (event) => selectFeature(event.pixel));
+		featuresVectorLayer.value = new WebGLVectorLayer({
+			source: new VectorSource({ features }),
+			style: [
+				...getUnselectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
+				...getSelectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY),
+				...getSavedStyles(FEATURE_ID_PROPERTY, SAVED_ID_PROPERTY),
+			],
+			variables: { [SAVED_ID_PROPERTY]: '', [SELECTED_ID_PROPERTY]: '' },
+		});
+		mapInstance.value.addLayer(featuresVectorLayer.value);
+		mapInstance.value.on('singleclick', (event) => selectFeatureByPosition(event.pixel));
 
 		currentState.value = STATES.READY;
 	};
 
-	const selectFeature = (position: Pixel): void => {
+	const selectFeatureByPosition = (position: Pixel): void => {
 		const hitFeatures = mapInstance.value?.getFeaturesAtPixel(position, {
-			hitTolerance: 5,
-			layerFilter: (layer) => layer === vectorLayer.value,
+			hitTolerance: MAP_HIT_TOLERANCE,
+			layerFilter: (layer) => layer === featuresVectorLayer.value,
 		});
 
-		selectedFeature.value = hitFeatures?.length
+		const featureToSelect = hitFeatures?.length
 			? (hitFeatures[0] as Feature<GeometryType>)
 			: undefined;
 
-		vectorLayer.value?.updateStyleVariables({
-			selectedId: (selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? null,
+		selectFeature(featureToSelect);
+	};
+
+	const selectFeature = (feature: Feature<GeometryType> | undefined): void => {
+		selectedFeature.value = feature;
+
+		featuresVectorLayer.value?.updateStyleVariables({
+			[SELECTED_ID_PROPERTY]: (selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '',
+		});
+
+		if (selectedFeature.value != null) {
+			centerFeatureLocation(selectedFeature.value);
+		}
+	};
+
+	const unselectFeature = (): void => {
+		selectedFeature.value = undefined;
+		featuresVectorLayer.value?.updateStyleVariables({ [SELECTED_ID_PROPERTY]: '' });
+	};
+
+	const saveFeature = (): void => {
+		savedFeature.value = selectedFeature.value;
+		const savedFeatureId = (savedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '';
+		featuresVectorLayer.value?.updateStyleVariables({
+			[SAVED_ID_PROPERTY]: savedFeatureId,
 		});
 	};
 
+	const discardSavedFeature = (): void => {
+		savedFeature.value = undefined;
+		featuresVectorLayer.value?.updateStyleVariables({ [SAVED_ID_PROPERTY]: '' });
+	};
+
+	const isSelectedFeatureSaved = (): boolean => {
+		const savedId = savedFeature.value?.get(FEATURE_ID_PROPERTY) as string;
+		const selectedId = selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string;
+		return savedId?.length > 0 && savedId === selectedId;
+	};
+
 	watch(
 		() => currentState.value,
 		() => {
@@ -171,11 +239,20 @@ export function useMapBlock(config: MapConfig) {
 	);
 
 	return {
-		selectedFeatureProperties,
-		errorMessage,
 		initializeMap,
-		centerFeatureLocation,
-		centerCurrentLocation,
 		loadGeometries,
+		errorMessage,
+
+		centerCurrentLocation,
+		centerFeatureLocation,
+
+		savedFeature,
+		discardSavedFeature,
+		saveFeature,
+
+		selectedFeatureProperties,
+		selectFeature,
+		isSelectedFeatureSaved,
+		unselectFeature,
 	};
 }

From 01a4fa53de69bd10be1dfa882b3af786c7c39759 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Fri, 5 Sep 2025 02:38:01 +0700
Subject: [PATCH 08/40] fixes styles and icons based on feedback

---
 .../web-forms/src/assets/styles/style.scss    |  3 ++
 .../src/components/common/IconSVG.vue         |  8 +++-
 .../src/components/common/map/AsyncMap.vue    |  1 +
 .../src/components/common/map/MapBlock.vue    | 41 +++++++++++--------
 .../components/common/map/MapProperties.vue   |  9 +++-
 .../components/common/map/MapStatusBar.vue    |  4 +-
 6 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/packages/web-forms/src/assets/styles/style.scss b/packages/web-forms/src/assets/styles/style.scss
index 313a535fc..d289de837 100644
--- a/packages/web-forms/src/assets/styles/style.scss
+++ b/packages/web-forms/src/assets/styles/style.scss
@@ -34,6 +34,9 @@
 	--odk-warning-text-color: var(--p-yellow-600);
 	--odk-warning-background-color: var(--p-yellow-50);
 
+	--odk-success-text-color: var(--p-green-500);
+	--odk-success-background-color: var(--p-green-50);
+
 	--odk-text-color: var(--p-surface-900);
 	--odk-inverted-text-color: var(--p-surface-0);
 	--odk-muted-text-color: var(--p-surface-500);
diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue
index 9ac58adda..995701639 100644
--- a/packages/web-forms/src/components/common/IconSVG.vue
+++ b/packages/web-forms/src/components/common/IconSVG.vue
@@ -6,6 +6,7 @@ import {
 	mdiArrowExpandAll,
 	mdiCamera,
 	mdiCheck,
+	mdiCheckCircle,
 	mdiChevronDown,
 	mdiChevronUp,
 	mdiClose,
@@ -36,6 +37,7 @@ const iconMap: Record<string, string> = {
 	mdiArrowExpandAll,
 	mdiCamera,
 	mdiCheck,
+	mdiCheckCircle,
 	mdiChevronDown,
 	mdiChevronUp,
 	mdiClose,
@@ -60,7 +62,7 @@ const iconMap: Record<string, string> = {
 };
 
 type IconName = keyof typeof iconMap;
-type IconVariant = 'base' | 'error' | 'inverted' | 'muted' | 'primary' | 'warning';
+type IconVariant = 'base' | 'error' | 'inverted' | 'muted' | 'primary' | 'warning' | 'success';
 type IconSize = 'md' | 'sm';
 
 /**
@@ -123,6 +125,10 @@ const iconSize = computed(() => props.size ?? 'md');
 	fill: var(--odk-warning-text-color);
 }
 
+.odk-icon.success path {
+	fill: var(--odk-success-text-color);
+}
+
 .odk-icon.odk-icon-sm {
 	height: 14px;
 	width: 14px;
diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index c1e608131..79201eed6 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -87,6 +87,7 @@ onMounted(loadMap);
 	justify-content: center;
 	height: fit-content;
 	width: 100%;
+	min-height: 445px;
 	background: var(--odk-light-background-color);
 	border-radius: var(--odk-radius);
 	color: var(--odk-text-color);
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 0bfed3680..3a00cbac8 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -45,6 +45,7 @@ watch(
 );
 
 const mapPropertiesTitle = computed(() => {
+	// ToDo: use correct labels
 	const label = mapHandler?.selectedFeatureProperties.value?.label;
 	return typeof label === 'string' ? label : '';
 });
@@ -104,11 +105,15 @@ const saveSelection = () => {
 <style scoped lang="scss">
 @use 'primeflex/core/_variables.scss' as pf;
 
+.map-block-component {
+	--odk-standard-map-spacing: 20px;
+}
+
 .map-block-component {
 	position: relative;
 	width: 100%;
 	height: fit-content;
-	background: var(--odk-light-background-color);
+	background: var(--odk-base-background-color);
 	border-radius: var(--odk-radius) var(--odk-radius) 0 0;
 	overflow: hidden;
 
@@ -138,30 +143,34 @@ const saveSelection = () => {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	top: 20px;
-	right: 20px;
+	top: var(--odk-standard-map-spacing);
+	right: var(--odk-standard-map-spacing);
 	z-index: var(--odk-z-index-overlay);
 	gap: 10px;
 
 	button {
-		background: white;
+		background: var(--odk-base-background-color);
 		padding: 8px;
 		border-radius: var(--odk-radius);
 		border: 1px solid var(--odk-border-color);
 		cursor: pointer;
+
+		&:hover {
+			background: var(--odk-muted-background-color);
+		}
 	}
 }
 
-:deep(.ol-zoom) {
+.map-block-component :deep(.ol-zoom) {
 	position: absolute;
-	right: 20px;
-	bottom: 20px;
+	right: var(--odk-standard-map-spacing);
+	bottom: var(--odk-standard-map-spacing);
 	display: flex;
 	flex-direction: column;
 	flex-wrap: nowrap;
 	align-items: center;
 	box-shadow: none;
-	background: #fff;
+	background: var(--odk-base-background-color);
 	border-radius: var(--odk-radius);
 	overflow: hidden;
 	border: 1px solid var(--odk-border-color);
@@ -174,14 +183,14 @@ const saveSelection = () => {
 		width: 36px;
 		border: none;
 		border-bottom: 1px solid var(--odk-border-color);
-		background: #fff;
+		background: var(--odk-base-background-color);
 		font-size: 24px;
 		font-weight: 300;
 		cursor: pointer;
-	}
 
-	button:hover {
-		background: #f1f3f6;
+		&:hover {
+			background: var(--odk-muted-background-color);
+		}
 	}
 }
 
@@ -190,12 +199,8 @@ const saveSelection = () => {
 	color: var(--odk-error-text-color);
 	background-color: var(--odk-error-background-color);
 	border-radius: var(--odk-radius);
-	margin-top: 20px;
-	padding: 8px;
-
-	&.stack-errors {
-		padding: 0;
-	}
+	margin-top: var(--odk-standard-map-spacing);
+	padding: var(--odk-standard-map-spacing);
 }
 
 @media screen and (max-width: #{pf.$sm}) {
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index caaad7400..c8da650ae 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -15,6 +15,7 @@ const emit = defineEmits(['close', 'save', 'discard']);
 <template>
 	<div class="map-properties">
 		<div class="map-properties-header">
+			<IconSVG v-if="hasSavedFeature" name="mdiCheck" variant="primary"/>
 			<strong>{{ title }}</strong>
 			<button class="close-icon" @click="emit('close')">
 				<IconSVG name="mdiClose" />
@@ -54,14 +55,15 @@ const emit = defineEmits(['close', 'save', 'discard']);
 	position: absolute;
 	top: var(--odk-standard-map-spacing);
 	left: var(--odk-standard-map-spacing);
-	padding: var(--odk-standard-map-spacing);
+	padding: var(--odk-standard-map-spacing) 15px;
 	border-radius: var(--odk-radius);
 	display: flex;
 	flex-direction: column;
-	gap: var(--odk-standard-map-spacing);
+	gap: 10px;
 	min-width: 300px;
 	max-width: 360px;
 	max-height: 370px;
+	box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2);
 }
 
 .map-properties-header {
@@ -70,6 +72,8 @@ const emit = defineEmits(['close', 'save', 'discard']);
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: space-between;
+	align-items: flex-start;
+	gap: 10px;
 
 	strong {
 		font-size: var(--odk-dialog-title-font-size);
@@ -77,6 +81,7 @@ const emit = defineEmits(['close', 'save', 'discard']);
 
 	.close-icon {
 		cursor: pointer;
+		margin-top: -15px;
 	}
 }
 
diff --git a/packages/web-forms/src/components/common/map/MapStatusBar.vue b/packages/web-forms/src/components/common/map/MapStatusBar.vue
index 4d53d4ab5..c26e65e71 100644
--- a/packages/web-forms/src/components/common/map/MapStatusBar.vue
+++ b/packages/web-forms/src/components/common/map/MapStatusBar.vue
@@ -10,7 +10,7 @@ const emit = defineEmits(['view-details']);
 	<div class="map-status-bar">
 		<div v-if="hasSavedFeature" class="map-status-wrap">
 			<div class="map-status">
-				<IconSVG name="mdiCheck" />
+				<IconSVG name="mdiCheckCircle" variant="success"/>
 				<!-- TODO: translations -->
 				<span>Point saved</span>
 			</div>
@@ -21,7 +21,7 @@ const emit = defineEmits(['view-details']);
 		</div>
 
 		<div v-else class="map-status">
-			<IconSVG name="mdiCrosshairsGps" />
+			<IconSVG name="mdiMapMarkerOutline" />
 			<!-- TODO: translations -->
 			<span>No point saved</span>
 		</div>

From 313e751e0506ea434a2609e3561ae30056212f84 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 22 Sep 2025 22:20:26 +0700
Subject: [PATCH 09/40] Reverts changes in engine. We decided another solution

---
 packages/xforms-engine/src/client/RankNode.ts |  7 +++-
 .../xforms-engine/src/client/SelectNode.ts    |  8 ++--
 .../lib/reactivity/createItemCollection.ts    | 40 ++++---------------
 .../parse/body/control/ItemsetDefinition.ts   | 19 +--------
 .../expression/ItemsetGeometryExpression.ts   |  8 ----
 .../expression/ItemsetMetadataExpression.ts   | 14 -------
 6 files changed, 17 insertions(+), 79 deletions(-)
 delete mode 100644 packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts
 delete mode 100644 packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts

diff --git a/packages/xforms-engine/src/client/RankNode.ts b/packages/xforms-engine/src/client/RankNode.ts
index 78927b174..94510fa9c 100644
--- a/packages/xforms-engine/src/client/RankNode.ts
+++ b/packages/xforms-engine/src/client/RankNode.ts
@@ -1,4 +1,3 @@
-import type { BaseItem } from '../lib/reactivity/createItemCollection.ts';
 import type { RankControlDefinition } from '../parse/body/control/RankControlDefinition.ts';
 import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
 import type { BaseValueNode, BaseValueNodeState } from './BaseValueNode.ts';
@@ -9,7 +8,11 @@ import type { LeafNodeValidationState } from './validation.ts';
 import type { UnknownAppearanceDefinition } from '../parse/body/appearance/unknownAppearanceParser.ts';
 import type { ValueType } from './ValueType.ts';
 
-export type RankItem = BaseItem;
+export interface RankItem {
+	get label(): TextRange<'item-label'>;
+	get value(): string;
+}
+
 export type RankValueOptions = readonly RankItem[];
 
 export interface RankNodeState extends BaseValueNodeState<readonly string[]> {
diff --git a/packages/xforms-engine/src/client/SelectNode.ts b/packages/xforms-engine/src/client/SelectNode.ts
index 35d6a9964..f9844a734 100644
--- a/packages/xforms-engine/src/client/SelectNode.ts
+++ b/packages/xforms-engine/src/client/SelectNode.ts
@@ -1,4 +1,3 @@
-import type { BaseItem } from '../lib/reactivity/createItemCollection.ts';
 import type {
 	AnySelectControlDefinition,
 	SelectType,
@@ -7,13 +6,14 @@ import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
 import type { BaseValueNode, BaseValueNodeState } from './BaseValueNode.ts';
 import type { NodeAppearances } from './NodeAppearances.ts';
 import type { RootNode } from './RootNode.ts';
+import type { TextRange } from './TextRange.ts';
 import type { ValueType } from './ValueType.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { LeafNodeValidationState } from './validation.ts';
 
-export interface SelectItem extends BaseItem {
-	geometry?(): string;
-	metadata?: Array<{ label: string; value(): string }>;
+export interface SelectItem {
+	get label(): TextRange<'item-label'>;
+	get value(): string;
 }
 
 export type SelectValueOptions = readonly SelectItem[];
diff --git a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
index 405184592..f7a7f75e6 100644
--- a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
+++ b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
@@ -2,6 +2,8 @@ import { UpsertableMap } from '@getodk/common/lib/collections/UpsertableMap.ts';
 import type { Accessor } from 'solid-js';
 import { createMemo } from 'solid-js';
 import type { ActiveLanguage } from '../../client/FormLanguage.ts';
+import type { SelectItem } from '../../client/SelectNode.ts';
+import type { RankItem } from '../../client/RankNode.ts';
 import type { TextRange as ClientTextRange } from '../../client/TextRange.ts';
 import type { EvaluationContext } from '../../instance/internal-api/EvaluationContext.ts';
 import type { TranslationContext } from '../../instance/internal-api/TranslationContext.ts';
@@ -18,11 +20,8 @@ import type { ReactiveScope } from './scope.ts';
 import { createTextRange } from './text/createTextRange.ts';
 
 export type ItemCollectionControl = RankControl | SelectControl;
+type Item = RankItem | SelectItem;
 type DerivedItemLabel = ClientTextRange<'item-label', 'form-derived'>;
-export interface BaseItem {
-	get label(): ClientTextRange<'item-label'>;
-	get value(): string;
-}
 
 const derivedItemLabel = (context: TranslationContext, value: string): DerivedItemLabel => {
 	const chunk = new TextChunk(context, 'literal', value);
@@ -46,7 +45,7 @@ const createItemLabel = (
 const createTranslatedStaticItems = (
 	control: ItemCollectionControl,
 	items: readonly ItemDefinition[]
-): Accessor<readonly BaseItem[]> => {
+): Accessor<readonly Item[]> => {
 	return control.scope.runTask(() => {
 		const labeledItems = items.map((item) => {
 			const { value } = item;
@@ -102,8 +101,6 @@ const createItemsetItemLabel = (
 interface ItemsetItem {
 	label(): ClientTextRange<'item-label'>;
 	value(): string;
-	geometry(): string;
-	metadata: Array<{ label: string; value(): string }>;
 }
 
 const createItemsetItems = (
@@ -123,30 +120,11 @@ const createItemsetItems = (
 					const value = createComputedExpression(context, itemset.value, {
 						defaultValue: '',
 					});
-
 					const label = createItemsetItemLabel(context, itemset, value);
 
-					const geometry = createComputedExpression(context, itemset.geometry, {
-						defaultValue: '',
-					});
-
-					const nodeElements = itemNode
-						.getXPathChildNodes()
-						.filter((node) => node.nodeType === 'static-element');
-					const metadata = itemset.getMetadataExpressions(nodeElements).map((meta) => {
-						return {
-							label: meta.elementName,
-							value: createComputedExpression(context, meta, {
-								defaultValue: '',
-							}),
-						};
-					});
-
 					return {
 						label,
 						value,
-						geometry,
-						metadata,
 					};
 				});
 			});
@@ -157,7 +135,7 @@ const createItemsetItems = (
 const createItemset = (
 	control: ItemCollectionControl,
 	itemset: ItemsetDefinition
-): Accessor<readonly BaseItem[]> => {
+): Accessor<readonly Item[]> => {
 	return control.scope.runTask(() => {
 		const itemsetItems = createItemsetItems(control, itemset);
 
@@ -166,8 +144,6 @@ const createItemset = (
 				return {
 					label: item.label(),
 					value: item.value(),
-					geometry: item.geometry(),
-					metadata: item.metadata.map((meta) => ({ label: meta.label, value: meta.value() })),
 				};
 			});
 		});
@@ -176,7 +152,7 @@ const createItemset = (
 
 /**
  * Creates a reactive computation of a {@link ItemCollectionControl}'s
- * {@link BaseItem}s, in support of the field's `valueOptions`.
+ * {@link Item}s, in support of the field's `valueOptions`.
  *
  * - The control defined with static `<item>`s will compute to an corresponding
  *   static list of items.
@@ -186,9 +162,7 @@ const createItemset = (
  *   their appropriate dependencies (whether relative to the itemset item node,
  *   referencing a form's `itext` translations, etc).
  */
-export const createItemCollection = (
-	control: ItemCollectionControl
-): Accessor<readonly BaseItem[]> => {
+export const createItemCollection = (control: ItemCollectionControl): Accessor<readonly Item[]> => {
 	const { items, itemset } = control.definition.bodyElement;
 
 	if (itemset != null) {
diff --git a/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts b/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
index 921429f7a..593bd7700 100644
--- a/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
+++ b/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
@@ -1,8 +1,5 @@
-import { StaticElement } from '../../../integration/xpath/static-dom/StaticElement.ts';
 import type { ItemsetElement } from '../../../lib/dom/query.ts';
 import { getValueElement } from '../../../lib/dom/query.ts';
-import { ItemsetGeometryExpression } from '../../expression/ItemsetGeometryExpression.ts';
-import { ItemsetMetadataExpression } from '../../expression/ItemsetMetadataExpression.ts';
 import { ItemsetNodesetExpression } from '../../expression/ItemsetNodesetExpression.ts';
 import { ItemsetValueExpression } from '../../expression/ItemsetValueExpression.ts';
 import { ItemsetLabelDefinition } from '../../text/ItemsetLabelDefinition.ts';
@@ -21,8 +18,6 @@ export class ItemsetDefinition extends BodyElementDefinition<'itemset'> {
 
 	readonly nodes: ItemsetNodesetExpression;
 	readonly value: ItemsetValueExpression;
-	readonly geometry: ItemsetGeometryExpression;
-	readonly metadataExclusions: string[];
 
 	constructor(
 		form: XFormDefinition,
@@ -54,19 +49,7 @@ export class ItemsetDefinition extends BodyElementDefinition<'itemset'> {
 			throw new Error(`<itemset> has no <value>`);
 		}
 
-		this.label = ItemsetLabelDefinition.from(form, this);
 		this.value = new ItemsetValueExpression(this, valueExpression);
-		this.geometry = new ItemsetGeometryExpression(this);
-
-		this.metadataExclusions = ['itextId', this.value.expression, this.geometry.expression];
-	}
-
-	getMetadataExpressions(metadataNodes: StaticElement[]): ItemsetMetadataExpression[] {
-		return metadataNodes
-			.filter((node) => {
-				const { localName } = node.qualifiedName;
-				return localName.length && !this.metadataExclusions.includes(localName);
-			})
-			.map((node) => new ItemsetMetadataExpression(this, node.qualifiedName.localName));
+		this.label = ItemsetLabelDefinition.from(form, this);
 	}
 }
diff --git a/packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts b/packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts
deleted file mode 100644
index 6d8702f08..000000000
--- a/packages/xforms-engine/src/parse/expression/ItemsetGeometryExpression.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { ItemsetDefinition } from '../body/control/ItemsetDefinition.ts';
-import { DependentExpression } from './abstract/DependentExpression.ts';
-
-export class ItemsetGeometryExpression extends DependentExpression<'string'> {
-	constructor(readonly itemset: ItemsetDefinition) {
-		super(itemset, 'string', 'geometry');
-	}
-}
diff --git a/packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts b/packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts
deleted file mode 100644
index c249f3435..000000000
--- a/packages/xforms-engine/src/parse/expression/ItemsetMetadataExpression.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { ItemsetDefinition } from '../body/control/ItemsetDefinition.ts';
-import { DependentExpression } from './abstract/DependentExpression.ts';
-
-export class ItemsetMetadataExpression extends DependentExpression<'string'> {
-	readonly elementName: string;
-
-	constructor(
-		readonly itemset: ItemsetDefinition,
-		elementName: string
-	) {
-		super(itemset, 'string', elementName);
-		this.elementName = elementName;
-	}
-}

From 6c0ab6f9a84be2bfe947a9de3aef3b02be48ac85 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 23 Sep 2025 15:39:40 +0700
Subject: [PATCH 10/40] Applies latest designer feedback

---
 .../src/components/common/map/MapBlock.vue    | 51 +++++++++++++------
 .../components/common/map/MapProperties.vue   | 28 +++++-----
 .../components/common/map/MapStatusBar.vue    | 11 ++--
 .../src/components/common/map/map-styles.ts   | 42 +++++++++++----
 .../src/components/common/map/useMapBlock.ts  |  2 +-
 5 files changed, 90 insertions(+), 44 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 3a00cbac8..d1cbd28dd 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -66,13 +66,13 @@ const saveSelection = () => {
 	<div :class="{ 'map-block-component': true, 'map-full-screen': isFullScreen }">
 		<div class="control-bar">
 			<button :class="{ 'control-active': isFullScreen }" @click="isFullScreen = !isFullScreen">
-				<IconSVG name="mdiArrowExpandAll" />
+				<IconSVG name="mdiArrowExpandAll" size="sm" />
 			</button>
 			<button @click="centerFeatureLocation">
 				<IconSVG name="mdiFullscreen" />
 			</button>
 			<button @click="mapHandler?.centerCurrentLocation">
-				<IconSVG name="mdiCrosshairsGps" />
+				<IconSVG name="mdiCrosshairsGps" size="sm" />
 			</button>
 		</div>
 
@@ -106,7 +106,9 @@ const saveSelection = () => {
 @use 'primeflex/core/_variables.scss' as pf;
 
 .map-block-component {
-	--odk-standard-map-spacing: 20px;
+	--odk-map-spacing-lg: 20px;
+	--odk-map-spacing-md: 10px;
+	--odk-map-spacing-sm: 5px;
 }
 
 .map-block-component {
@@ -114,7 +116,8 @@ const saveSelection = () => {
 	width: 100%;
 	height: fit-content;
 	background: var(--odk-base-background-color);
-	border-radius: var(--odk-radius) var(--odk-radius) 0 0;
+	border: 1px solid var(--odk-border-color);
+	border-radius: var(--odk-radius);
 	overflow: hidden;
 
 	.map-block {
@@ -143,10 +146,10 @@ const saveSelection = () => {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	top: var(--odk-standard-map-spacing);
-	right: var(--odk-standard-map-spacing);
+	top: var(--odk-map-spacing-md);
+	right: var(--odk-map-spacing-md);
 	z-index: var(--odk-z-index-overlay);
-	gap: 10px;
+	gap: 4px;
 
 	button {
 		background: var(--odk-base-background-color);
@@ -154,6 +157,7 @@ const saveSelection = () => {
 		border-radius: var(--odk-radius);
 		border: 1px solid var(--odk-border-color);
 		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
 
 		&:hover {
 			background: var(--odk-muted-background-color);
@@ -163,8 +167,8 @@ const saveSelection = () => {
 
 .map-block-component :deep(.ol-zoom) {
 	position: absolute;
-	right: var(--odk-standard-map-spacing);
-	bottom: var(--odk-standard-map-spacing);
+	right: var(--odk-map-spacing-md);
+	bottom: var(--odk-map-spacing-md);
 	display: flex;
 	flex-direction: column;
 	flex-wrap: nowrap;
@@ -182,12 +186,16 @@ const saveSelection = () => {
 		height: 37px;
 		width: 36px;
 		border: none;
-		border-bottom: 1px solid var(--odk-border-color);
 		background: var(--odk-base-background-color);
+		-webkit-tap-highlight-color: transparent;
 		font-size: 24px;
 		font-weight: 300;
 		cursor: pointer;
 
+		&:first-child {
+			border-bottom: 1px solid var(--odk-border-color);
+		}
+
 		&:hover {
 			background: var(--odk-muted-background-color);
 		}
@@ -199,14 +207,19 @@ const saveSelection = () => {
 	color: var(--odk-error-text-color);
 	background-color: var(--odk-error-background-color);
 	border-radius: var(--odk-radius);
-	margin-top: var(--odk-standard-map-spacing);
-	padding: var(--odk-standard-map-spacing);
+	margin-top: var(--odk-map-spacing-lg);
+	padding: var(--odk-map-spacing-lg);
 }
 
 @media screen and (max-width: #{pf.$sm}) {
-	.map-block-component,
+	.map-block-component {
+		height: fit-content;
+	}
+
 	.map-block-component .map-block {
-		height: 100vh;
+		--map-status-bar-min-height: 60px;
+		--map-label-min-height: 60px;
+		height: calc(100vh - var(--map-status-bar-min-height) - var(--map-label-min-height));
 
 		:deep(.ol-zoom) {
 			top: 165px;
@@ -214,8 +227,14 @@ const saveSelection = () => {
 		}
 	}
 
-	.map-status-bar-component {
-		display: none;
+	.control-bar {
+		top: var(--odk-map-spacing-sm);
+		right: var(--odk-map-spacing-sm);
+	}
+
+	.map-block-component :deep(.ol-zoom) {
+		right: var(--odk-map-spacing-sm);
+		bottom: var(--odk-map-spacing-sm);
 	}
 }
 </style>
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index c8da650ae..ad785d746 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -15,7 +15,6 @@ const emit = defineEmits(['close', 'save', 'discard']);
 <template>
 	<div class="map-properties">
 		<div class="map-properties-header">
-			<IconSVG v-if="hasSavedFeature" name="mdiCheck" variant="primary"/>
 			<strong>{{ title }}</strong>
 			<button class="close-icon" @click="emit('close')">
 				<IconSVG name="mdiClose" />
@@ -30,12 +29,12 @@ const emit = defineEmits(['close', 'save', 'discard']);
 
 		<div class="map-properties-footer">
 			<Button v-if="hasSavedFeature" outlined severity="contrast" @click="emit('discard')">
-				<IconSVG name="mdiPencil" />
+				<span>–</span>
 				<!-- TODO: translations -->
 				<span>Remove selection</span>
 			</Button>
 			<Button v-else outlined severity="contrast" @click="emit('save')">
-				<IconSVG name="mdiContentSave" />
+				<IconSVG name="mdiCheck" size="sm"/>
 				<!-- TODO: translations -->
 				<span>Save selected</span>
 			</Button>
@@ -47,19 +46,21 @@ const emit = defineEmits(['close', 'save', 'discard']);
 @use 'primeflex/core/_variables.scss' as pf;
 
 .map-properties {
-	--odk-standard-map-spacing: 20px;
+	--odk-map-properties-spacing-lg: 20px;
+	--odk-map-properties-spacing-md: 10px;
 }
 
 .map-properties {
 	background: var(--odk-base-background-color);
 	position: absolute;
-	top: var(--odk-standard-map-spacing);
-	left: var(--odk-standard-map-spacing);
-	padding: var(--odk-standard-map-spacing) 15px;
+	top: var(--odk-map-properties-spacing-md);
+	left: var(--odk-map-properties-spacing-md);
+	padding: var(--odk-map-properties-spacing-lg) var(--odk-map-properties-spacing-md);
+	border: 1px solid var(--odk-border-color);
 	border-radius: var(--odk-radius);
 	display: flex;
 	flex-direction: column;
-	gap: 10px;
+	gap: var(--odk-map-properties-spacing-md);
 	min-width: 300px;
 	max-width: 360px;
 	max-height: 370px;
@@ -67,13 +68,13 @@ const emit = defineEmits(['close', 'save', 'discard']);
 }
 
 .map-properties-header {
-	padding: 10px 0px;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
 	justify-content: space-between;
 	align-items: flex-start;
-	gap: 10px;
+	gap: var(--odk-map-properties-spacing-md);
+	padding: 0;
 
 	strong {
 		font-size: var(--odk-dialog-title-font-size);
@@ -82,6 +83,8 @@ const emit = defineEmits(['close', 'save', 'discard']);
 	.close-icon {
 		cursor: pointer;
 		margin-top: -15px;
+		padding: 5px 0;
+		margin-right: -3px;
 	}
 }
 
@@ -99,6 +102,7 @@ const emit = defineEmits(['close', 'save', 'discard']);
 
 .map-properties-footer :deep(.p-button).p-button-contrast.p-button-outlined {
 	background: var(--odk-base-background-color);
+	-webkit-tap-highlight-color: transparent;
 
 	&:hover {
 		background: var(--odk-muted-background-color);
@@ -108,11 +112,11 @@ const emit = defineEmits(['close', 'save', 'discard']);
 @media screen and (max-width: #{pf.$sm}) {
 	.map-properties {
 		top: unset;
-		bottom: var(--odk-standard-map-spacing);
+		bottom: 70px;
 		left: 0;
 		right: 0;
 		margin: 0 auto;
-		max-width: calc(100% - (var(--odk-standard-map-spacing) * 2));
+		max-width: calc(100% - var(--odk-map-properties-spacing-md));
 		max-height: 50%;
 	}
 }
diff --git a/packages/web-forms/src/components/common/map/MapStatusBar.vue b/packages/web-forms/src/components/common/map/MapStatusBar.vue
index c26e65e71..f41703939 100644
--- a/packages/web-forms/src/components/common/map/MapStatusBar.vue
+++ b/packages/web-forms/src/components/common/map/MapStatusBar.vue
@@ -8,7 +8,7 @@ const emit = defineEmits(['view-details']);
 
 <template>
 	<div class="map-status-bar">
-		<div v-if="hasSavedFeature" class="map-status-wrap">
+		<div v-if="hasSavedFeature" class="map-status-saved">
 			<div class="map-status">
 				<IconSVG name="mdiCheckCircle" variant="success"/>
 				<!-- TODO: translations -->
@@ -33,30 +33,31 @@ const emit = defineEmits(['view-details']);
 
 .map-status-bar,
 .map-status,
-.map-status-wrap {
+.map-status-saved {
 	display: flex;
 	align-items: center;
 	flex-wrap: nowrap;
 }
 
 .map-status-bar {
-	padding: 10px 20px;
+	padding: 10px 17px;
 	min-height: 60px;
 	background: var(--odk-light-background-color);
-	border: 1px solid var(--odk-border-color);
 }
 
 .map-status {
 	gap: 10px;
 }
 
-.map-status-wrap {
+.map-status-saved {
 	justify-content: space-between;
 	width: 100%;
 }
 
 .map-status-bar :deep(.p-button).p-button-contrast.p-button-outlined {
 	background: var(--odk-base-background-color);
+	-webkit-tap-highlight-color: transparent;
+	flex-shrink: 0;
 
 	&:hover {
 		background: var(--odk-muted-background-color);
diff --git a/packages/web-forms/src/components/common/map/map-styles.ts b/packages/web-forms/src/components/common/map/map-styles.ts
index b1a469421..a80557ac6 100644
--- a/packages/web-forms/src/components/common/map/map-styles.ts
+++ b/packages/web-forms/src/components/common/map/map-styles.ts
@@ -33,23 +33,40 @@ const SCALE_POLYGON_STYLE = {
 	'stroke-width': 10,
 };
 
-const GLOW_POINT_STYLE = {
+const BLUE_GLOW_POINT_STYLE = {
 	'circle-radius': 30,
 	'circle-fill-color': 'rgba(148, 224, 237, 0.7)',
 	'circle-displacement': [0, 0],
 };
 
-const GLOW_LINE_STYLE = {
+const BLUE_GLOW_LINE_STYLE = {
 	'stroke-width': 20,
 	'stroke-color': 'rgba(148, 224, 237, 0.7)',
 };
 
-const GLOW_POLYGON_STYLE = {
+const BLUE_GLOW_POLYGON_STYLE = {
 	'stroke-width': 20,
 	'stroke-color': 'rgba(148, 224, 237, 0.7)',
 	'fill-color': 'transparent',
 };
 
+const GREEN_GLOW_POINT_STYLE = {
+	'circle-radius': 30,
+	'circle-fill-color': 'rgba(34, 197, 94, 0.7)',
+	'circle-displacement': [0, 0],
+};
+
+const GREEN_GLOW_LINE_STYLE = {
+	'stroke-width': 20,
+	'stroke-color': 'rgba(34, 197, 94, 0.7)',
+};
+
+const GREEN_GLOW_POLYGON_STYLE = {
+	'stroke-width': 20,
+	'stroke-color': 'rgba(34, 197, 94, 0.7)',
+	'fill-color': 'transparent',
+};
+
 export function getUnselectedStyles(
 	featureIdProp: string,
 	selectedPropName: string,
@@ -80,27 +97,32 @@ export function getUnselectedStyles(
 	];
 }
 
-export function getSelectedStyles(featureIdProp: string, selectedPropName: string): Rule[] {
+export function getSelectedStyles(
+	featureIdProp: string,
+	selectedPropName: string,
+	savedPropName: string
+): Rule[] {
 	const makeFilter = (type: string) => {
 		return [
 			'all',
 			['match', ['geometry-type'], type, true, false],
 			['==', ['get', featureIdProp], ['var', selectedPropName]],
+			['!=', ['get', featureIdProp], ['var', savedPropName]],
 		];
 	};
 
 	return [
 		{
 			filter: makeFilter('Point'),
-			style: [GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
+			style: [BLUE_GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
 		},
 		{
 			filter: makeFilter('LineString'),
-			style: [GLOW_LINE_STYLE, DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
+			style: [BLUE_GLOW_LINE_STYLE, DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
 		},
 		{
 			filter: makeFilter('Polygon'),
-			style: [GLOW_POLYGON_STYLE, DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
+			style: [BLUE_GLOW_POLYGON_STYLE, DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
 		},
 	];
 }
@@ -117,15 +139,15 @@ export function getSavedStyles(featureIdProp: string, savedPropName: string): Ru
 	return [
 		{
 			filter: makeFilter('Point'),
-			style: [DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
+			style: [GREEN_GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
 		},
 		{
 			filter: makeFilter('LineString'),
-			style: [DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
+			style: [GREEN_GLOW_LINE_STYLE, DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
 		},
 		{
 			filter: makeFilter('Polygon'),
-			style: [DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
+			style: [GREEN_GLOW_POLYGON_STYLE, DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
 		},
 	];
 }
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 13219b448..f15523666 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -168,7 +168,7 @@ export function useMapBlock(config: MapConfig) {
 			source: new VectorSource({ features }),
 			style: [
 				...getUnselectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
-				...getSelectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY),
+				...getSelectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
 				...getSavedStyles(FEATURE_ID_PROPERTY, SAVED_ID_PROPERTY),
 			],
 			variables: { [SAVED_ID_PROPERTY]: '', [SELECTED_ID_PROPERTY]: '' },

From 4b0a7e40f90f106ff512965fe2be691984ba60f8 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 23 Sep 2025 15:59:58 +0700
Subject: [PATCH 11/40] fixes lint, handles esc key

---
 .../web-forms/src/components/common/IconSVG.vue     |  2 +-
 .../src/components/common/map/MapBlock.vue          | 13 ++++++++++++-
 .../src/components/common/map/MapProperties.vue     |  2 +-
 .../src/components/common/map/MapStatusBar.vue      |  2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/web-forms/src/components/common/IconSVG.vue b/packages/web-forms/src/components/common/IconSVG.vue
index 995701639..50adc3500 100644
--- a/packages/web-forms/src/components/common/IconSVG.vue
+++ b/packages/web-forms/src/components/common/IconSVG.vue
@@ -62,7 +62,7 @@ const iconMap: Record<string, string> = {
 };
 
 type IconName = keyof typeof iconMap;
-type IconVariant = 'base' | 'error' | 'inverted' | 'muted' | 'primary' | 'warning' | 'success';
+type IconVariant = 'base' | 'error' | 'inverted' | 'muted' | 'primary' | 'success' | 'warning';
 type IconSize = 'md' | 'sm';
 
 /**
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index d1cbd28dd..17d0dea79 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -12,7 +12,7 @@ import {
 	type MapConfig,
 	useMapBlock,
 } from '@/components/common/map/useMapBlock.ts';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 // ToDo: document these props, maybe change "data" for a better name
 interface MapBlockProps {
@@ -34,6 +34,11 @@ onMounted(() => {
 
 	mapHandler.initializeMap(mapContainer.value);
 	mapHandler.loadGeometries(props.data);
+	document.addEventListener('keydown', handleEscapeKey);
+});
+
+onUnmounted(() => {
+	document.removeEventListener('keydown', handleEscapeKey);
 });
 
 watch(
@@ -50,6 +55,12 @@ const mapPropertiesTitle = computed(() => {
 	return typeof label === 'string' ? label : '';
 });
 
+const handleEscapeKey = (event: KeyboardEvent) => {
+	if (event.key === 'Escape' && isFullScreen.value) {
+		isFullScreen.value = false;
+	}
+};
+
 const centerFeatureLocation = () => {
 	if (mapHandler.savedFeature.value != null) {
 		mapHandler.centerFeatureLocation(mapHandler.savedFeature.value);
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index ad785d746..263378ef9 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -34,7 +34,7 @@ const emit = defineEmits(['close', 'save', 'discard']);
 				<span>Remove selection</span>
 			</Button>
 			<Button v-else outlined severity="contrast" @click="emit('save')">
-				<IconSVG name="mdiCheck" size="sm"/>
+				<IconSVG name="mdiCheck" size="sm" />
 				<!-- TODO: translations -->
 				<span>Save selected</span>
 			</Button>
diff --git a/packages/web-forms/src/components/common/map/MapStatusBar.vue b/packages/web-forms/src/components/common/map/MapStatusBar.vue
index f41703939..cea8d353f 100644
--- a/packages/web-forms/src/components/common/map/MapStatusBar.vue
+++ b/packages/web-forms/src/components/common/map/MapStatusBar.vue
@@ -10,7 +10,7 @@ const emit = defineEmits(['view-details']);
 	<div class="map-status-bar">
 		<div v-if="hasSavedFeature" class="map-status-saved">
 			<div class="map-status">
-				<IconSVG name="mdiCheckCircle" variant="success"/>
+				<IconSVG name="mdiCheckCircle" variant="success" />
 				<!-- TODO: translations -->
 				<span>Point saved</span>
 			</div>

From 2467720df2d43ea6757feea5d2110277dccf2d72 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 23 Sep 2025 16:13:50 +0700
Subject: [PATCH 12/40] Makes lines less thick

---
 .../src/components/common/map/map-styles.ts          | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/map-styles.ts b/packages/web-forms/src/components/common/map/map-styles.ts
index a80557ac6..003059cb8 100644
--- a/packages/web-forms/src/components/common/map/map-styles.ts
+++ b/packages/web-forms/src/components/common/map/map-styles.ts
@@ -14,7 +14,7 @@ const DEFAULT_LINE_STYLE = {
 
 const DEFAULT_POLYGON_STYLE = {
 	'fill-color': 'rgba(233, 248, 255, 0.8)',
-	'stroke-width': 6,
+	'stroke-width': 4,
 	'stroke-color': '#3E9FCC',
 };
 
@@ -25,12 +25,12 @@ const SCALE_POINT_STYLE = {
 };
 
 const SCALE_LINE_STYLE = {
-	'stroke-width': 10,
+	'stroke-width': 8,
 	'stroke-color': '#3E9FCC',
 };
 
 const SCALE_POLYGON_STYLE = {
-	'stroke-width': 10,
+	'stroke-width': 6,
 };
 
 const BLUE_GLOW_POINT_STYLE = {
@@ -52,18 +52,18 @@ const BLUE_GLOW_POLYGON_STYLE = {
 
 const GREEN_GLOW_POINT_STYLE = {
 	'circle-radius': 30,
-	'circle-fill-color': 'rgba(34, 197, 94, 0.7)',
+	'circle-fill-color': 'rgba(34, 197, 94, 0.6)',
 	'circle-displacement': [0, 0],
 };
 
 const GREEN_GLOW_LINE_STYLE = {
 	'stroke-width': 20,
-	'stroke-color': 'rgba(34, 197, 94, 0.7)',
+	'stroke-color': 'rgba(34, 197, 94, 0.6)',
 };
 
 const GREEN_GLOW_POLYGON_STYLE = {
 	'stroke-width': 20,
-	'stroke-color': 'rgba(34, 197, 94, 0.7)',
+	'stroke-color': 'rgba(34, 197, 94, 0.6)',
 	'fill-color': 'transparent',
 };
 

From 294ddd55c89ecc3caeecaaba413dbceb5e04a74f Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 23 Sep 2025 16:58:41 +0700
Subject: [PATCH 13/40] stacking errors

---
 .../src/components/common/map/MapBlock.vue    | 119 ++++++++++--------
 1 file changed, 70 insertions(+), 49 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 17d0dea79..7ca858f99 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -12,7 +12,8 @@ import {
 	type MapConfig,
 	useMapBlock,
 } from '@/components/common/map/useMapBlock.ts';
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { QUESTION_HAS_ERROR } from '@/lib/constants/injection-keys.ts';
+import { computed, type ComputedRef, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 
 // ToDo: document these props, maybe change "data" for a better name
 interface MapBlockProps {
@@ -22,17 +23,21 @@ interface MapBlockProps {
 
 const props = defineProps<MapBlockProps>();
 const emit = defineEmits(['save']);
-const mapContainer = ref<HTMLElement | undefined>();
+const mapElement = ref<HTMLElement | undefined>();
 const isFullScreen = ref(false);
+const showErrorStyle = inject<ComputedRef<boolean>>(
+	QUESTION_HAS_ERROR,
+	computed(() => false)
+);
 
 const mapHandler = useMapBlock(props.config);
 
 onMounted(() => {
-	if (mapContainer.value == null || mapHandler == null) {
+	if (mapElement.value == null || mapHandler == null) {
 		return;
 	}
 
-	mapHandler.initializeMap(mapContainer.value);
+	mapHandler.initializeMap(mapElement.value);
 	mapHandler.loadGeometries(props.data);
 	document.addEventListener('keydown', handleEscapeKey);
 });
@@ -74,42 +79,47 @@ const saveSelection = () => {
 </script>
 
 <template>
-	<div :class="{ 'map-block-component': true, 'map-full-screen': isFullScreen }">
-		<div class="control-bar">
-			<button :class="{ 'control-active': isFullScreen }" @click="isFullScreen = !isFullScreen">
-				<IconSVG name="mdiArrowExpandAll" size="sm" />
-			</button>
-			<button @click="centerFeatureLocation">
-				<IconSVG name="mdiFullscreen" />
-			</button>
-			<button @click="mapHandler?.centerCurrentLocation">
-				<IconSVG name="mdiCrosshairsGps" size="sm" />
-			</button>
+	<div class="map-block-component" >
+		<div :class="{ 'map-container': true, 'map-full-screen': isFullScreen }">
+			<div class="control-bar">
+				<button :class="{ 'control-active': isFullScreen }" @click="isFullScreen = !isFullScreen">
+					<IconSVG name="mdiArrowExpandAll" size="sm" />
+				</button>
+				<button @click="centerFeatureLocation">
+					<IconSVG name="mdiFullscreen" />
+				</button>
+				<button @click="mapHandler?.centerCurrentLocation">
+					<IconSVG name="mdiCrosshairsGps" size="sm" />
+				</button>
+			</div>
+
+			<div ref="mapElement" class="map-block" />
+
+			<MapStatusBar
+				:has-saved-feature="mapHandler?.savedFeature.value != null"
+				class="map-status-bar-component"
+				@view-details="mapHandler?.selectFeature(mapHandler?.savedFeature.value)"
+			/>
+
+			<MapProperties
+				v-if="mapHandler?.selectedFeatureProperties.value != null"
+				:title="mapPropertiesTitle"
+				:properties="mapHandler?.selectedFeatureProperties.value"
+				:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
+				@close="mapHandler.unselectFeature"
+				@discard="mapHandler?.discardSavedFeature"
+				@save="saveSelection"
+			/>
 		</div>
 
-		<div ref="mapContainer" class="map-block" />
-
-		<MapStatusBar
-			:has-saved-feature="mapHandler?.savedFeature.value != null"
-			class="map-status-bar-component"
-			@view-details="mapHandler?.selectFeature(mapHandler?.savedFeature.value)"
-		/>
-
-		<div v-if="mapHandler?.errorMessage.value != null" class="map-block-error">
+		<div
+			v-if="mapHandler?.errorMessage.value != null"
+			:class="{ 'map-block-error': true, 'stack-errors': showErrorStyle }"
+		>
 			<strong>{{ mapHandler?.errorMessage.value.title }}</strong>
 			&nbsp;
 			<span>{{ mapHandler?.errorMessage.value.message }}</span>
 		</div>
-
-		<MapProperties
-			v-if="mapHandler?.selectedFeatureProperties.value != null"
-			:title="mapPropertiesTitle"
-			:properties="mapHandler?.selectedFeatureProperties.value"
-			:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
-			@close="mapHandler.unselectFeature"
-			@discard="mapHandler?.discardSavedFeature"
-			@save="saveSelection"
-		/>
 	</div>
 </template>
 
@@ -127,6 +137,11 @@ const saveSelection = () => {
 	width: 100%;
 	height: fit-content;
 	background: var(--odk-base-background-color);
+	border-radius: var(--odk-radius);
+}
+
+.map-container {
+	position: relative;
 	border: 1px solid var(--odk-border-color);
 	border-radius: var(--odk-radius);
 	overflow: hidden;
@@ -135,21 +150,21 @@ const saveSelection = () => {
 		width: 100%;
 		height: 445px;
 	}
+}
 
-	&.map-full-screen {
-		display: flex;
-		flex-direction: column;
-		justify-content: flex-start;
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100vh;
-		width: 100vw;
-		z-index: var(--odk-z-index-topmost);
-
-		.map-block {
-			flex-grow: 2;
-		}
+.map-container.map-full-screen {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: 100vh;
+	width: 100vw;
+	z-index: var(--odk-z-index-topmost);
+
+	.map-block {
+		flex-grow: 2;
 	}
 }
 
@@ -159,7 +174,7 @@ const saveSelection = () => {
 	flex-direction: column;
 	top: var(--odk-map-spacing-md);
 	right: var(--odk-map-spacing-md);
-	z-index: var(--odk-z-index-overlay);
+	z-index: var(--odk-z-index-form-floating);
 	gap: 4px;
 
 	button {
@@ -220,6 +235,12 @@ const saveSelection = () => {
 	border-radius: var(--odk-radius);
 	margin-top: var(--odk-map-spacing-lg);
 	padding: var(--odk-map-spacing-lg);
+
+	&.stack-errors {
+		padding: 20px 0 5px 0;
+		margin-top: 0;
+		border-radius: 0;
+	}
 }
 
 @media screen and (max-width: #{pf.$sm}) {

From a4d3056c0d2dfe8de7f9cfdf3db2dba8265edbd2 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:17:00 +0700
Subject: [PATCH 14/40] Adds map background for full screen

---
 packages/web-forms/src/components/common/map/MapBlock.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 7ca858f99..781521431 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -147,6 +147,7 @@ const saveSelection = () => {
 	overflow: hidden;
 
 	.map-block {
+		background: var(--odk-base-background-color);
 		width: 100%;
 		height: 445px;
 	}

From 087645fb661874fadfca5336cc2b14672716d534 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 24 Sep 2025 22:35:30 +0700
Subject: [PATCH 15/40] Adds support for properties in the engine

---
 .../common/src/fixtures/select/geodataCsv.csv |   7 +
 .../fixtures/select/geodataGeoJson.geojson    | 141 ++++++++++++++++++
 .../select-one-from-map-external-files.xml    |  92 ++++++++++++
 .../src/components/common/map/MapBlock.vue    |   2 +-
 packages/xforms-engine/src/client/RankNode.ts |   1 +
 .../xforms-engine/src/client/SelectNode.ts    |   1 +
 .../lib/reactivity/createItemCollection.ts    |  16 ++
 .../parse/body/control/ItemsetDefinition.ts   |   7 +
 .../expression/ItemPropertyExpression.ts      |  12 ++
 9 files changed, 278 insertions(+), 1 deletion(-)
 create mode 100644 packages/common/src/fixtures/select/geodataCsv.csv
 create mode 100644 packages/common/src/fixtures/select/geodataGeoJson.geojson
 create mode 100644 packages/common/src/fixtures/select/select-one-from-map-external-files.xml
 create mode 100644 packages/xforms-engine/src/parse/expression/ItemPropertyExpression.ts

diff --git a/packages/common/src/fixtures/select/geodataCsv.csv b/packages/common/src/fixtures/select/geodataCsv.csv
new file mode 100644
index 000000000..98102431b
--- /dev/null
+++ b/packages/common/src/fixtures/select/geodataCsv.csv
@@ -0,0 +1,7 @@
+name,label,geometry
+1,Madrid,40.446254412914385 -3.7445467750577563
+2,Warsaw,52.18544754541023 21.1006145352125
+3,Stockholm-Copenhagen-Berlin,59.31284185390564 18.04203801493341; 55.7237702447557 12.59922155107742; 52.48574101841746 13.337427033540052
+4,Prague-Vienna-Budapest,47.485570717616696 19.04921763281365; 48.19954394662233 16.42105774490628; 50.139932923435055 14.417694964430638
+5,London-Leeds-Liverpool-London,53.40903732686215 -2.991905620523312; 51.505094241512666 -0.1321803079139272; 53.8052722823615 -1.5363611594108022; 53.40903732686215 -2.991905620523312
+6,Paris-Basel-Frankfurt-Paris,48.840915452897946 2.3146557958955327; 47.54579786412256 7.63542665300713; 50.10149750150822 8.703168961933983; 48.840915452897946 2.3146557958955327
diff --git a/packages/common/src/fixtures/select/geodataGeoJson.geojson b/packages/common/src/fixtures/select/geodataGeoJson.geojson
new file mode 100644
index 000000000..e89fb6929
--- /dev/null
+++ b/packages/common/src/fixtures/select/geodataGeoJson.geojson
@@ -0,0 +1,141 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {
+        "title": "Madrid",
+        "id": "1"
+      },
+      "geometry": {
+        "coordinates": [
+          -3.7445467750577563,
+          40.446254412914385
+        ],
+        "type": "Point"
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "title": "Warsaw",
+        "id": "2"
+      },
+      "geometry": {
+        "coordinates": [
+          21.100614535212543,
+          52.18544754541023
+        ],
+        "type": "Point"
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "title": "Stockholm-Copenhagen-Berlin",
+        "id": "3"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            18.04203801493341,
+            59.31284185390564
+          ],
+          [
+            12.59922155107742,
+            55.72377024475574
+          ],
+          [
+            13.337427033540052,
+            52.48574101841746
+          ]
+        ],
+        "type": "LineString"
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "title": "Prague-Vienna-Budapest",
+        "id": "4"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            19.04921763281365,
+            47.485570717616696
+          ],
+          [
+            16.42105774490628,
+            48.19954394662233
+          ],
+          [
+            14.417694964430638,
+            50.139932923435055
+          ]
+        ],
+        "type": "LineString"
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "title": "London-Leeds-Liverpool-London",
+        "id": "5"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -2.991905620523312,
+              53.40903732686215
+            ],
+            [
+              -0.1321803079139272,
+              51.505094241512666
+            ],
+            [
+              -1.5363611594108022,
+              53.8052722823615
+            ],
+            [
+              -2.991905620523312,
+              53.40903732686215
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    },
+    {
+      "type": "Feature",
+      "properties": {
+        "title": "Paris-Basel-Frankfurt-Paris",
+        "id": "6"
+      },
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              2.3146557958955327,
+              48.840915452897946
+            ],
+            [
+              7.63542665300713,
+              47.54579786412256
+            ],
+            [
+              8.703168961933983,
+              50.10149750150822
+            ],
+            [
+              2.3146557958955327,
+              48.840915452897946
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}
diff --git a/packages/common/src/fixtures/select/select-one-from-map-external-files.xml b/packages/common/src/fixtures/select/select-one-from-map-external-files.xml
new file mode 100644
index 000000000..c5a4a83fe
--- /dev/null
+++ b/packages/common/src/fixtures/select/select-one-from-map-external-files.xml
@@ -0,0 +1,92 @@
+<?xml version="1.0"?>
+<h:html xmlns="http://www.w3.org/2002/xforms" xmlns:h="http://www.w3.org/1999/xhtml"
+        xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsd="http://www.w3.org/2001/XMLSchema"
+        xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms"
+        xmlns:odk="http://www.opendatakit.org/xforms">
+  <h:head>
+    <h:title>select-one-from-map-external-files</h:title>
+    <model odk:xforms-version="1.0.0">
+      <instance>
+        <data id="select-one-from-map-external-files">
+          <q1/>
+          <q2/>
+          <q3/>
+          <meta>
+            <instanceID/>
+          </meta>
+        </data>
+      </instance>
+      <instance id="geodataGeoJson" src="jr://file/geodataGeoJson.geojson"/>
+      <instance id="geodataCsv" src="jr://file-csv/geodataCsv.csv"/>
+      <instance id="geodataXml">
+        <root>
+          <item>
+            <name>1</name>
+            <label>Madrid</label>
+            <geometry>40.446254412914385 -3.7445467750577563</geometry>
+          </item>
+          <item>
+            <name>2</name>
+            <label>Warsaw</label>
+            <geometry>52.18544754541023 21.1006145352125</geometry>
+          </item>
+          <item>
+            <name>3</name>
+            <label>Stockholm-Copenhagen-Berlin</label>
+            <geometry>59.31284185390564 18.04203801493341; 55.7237702447557 12.59922155107742; 52.48574101841746
+              13.337427033540052
+            </geometry>
+          </item>
+          <item>
+            <name>4</name>
+            <label>Prague-Vienna-Budapest</label>
+            <geometry>47.485570717616696 19.04921763281365; 48.19954394662233 16.42105774490628; 50.139932923435055
+              14.417694964430638
+            </geometry>
+          </item>
+          <item>
+            <name>5</name>
+            <label>London-Leeds-Liverpool-London</label>
+            <geometry>53.40903732686215 -2.991905620523312; 51.505094241512666 -0.1321803079139272; 53.8052722823615
+              -1.5363611594108022; 53.40903732686215 -2.991905620523312
+            </geometry>
+          </item>
+          <item>
+            <name>6</name>
+            <label>Paris-Basel-Frankfurt-Paris</label>
+            <geometry>48.840915452897946 2.3146557958955327; 47.54579786412256 7.63542665300713; 50.10149750150822
+              8.703168961933983; 48.840915452897946 2.3146557958955327
+            </geometry>
+          </item>
+        </root>
+      </instance>
+      <bind nodeset="/data/q1" type="string"/>
+      <bind nodeset="/data/q2" type="string"/>
+      <bind nodeset="/data/q3" type="string"/>
+      <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/>
+    </model>
+  </h:head>
+  <h:body>
+    <select1 ref="/data/q1" appearance="map">
+      <label>Select one from geojson file</label>
+      <itemset nodeset="instance('geodataGeoJson')/root/item">
+        <value ref="id"/>
+        <label ref="title"/>
+      </itemset>
+    </select1>
+    <select1 ref="/data/q2" appearance="map">
+      <label>Select one from csv file</label>
+      <itemset nodeset="instance('geodataCsv')/root/item">
+        <value ref="name"/>
+        <label ref="label"/>
+      </itemset>
+    </select1>
+    <select1 ref="/data/q3" appearance="map">
+      <label>Select one from xml file</label>
+      <itemset nodeset="instance('geodataXml')/root/item[true()]">
+        <value ref="name"/>
+        <label ref="label"/>
+      </itemset>
+    </select1>
+  </h:body>
+</h:html>
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 781521431..71431c860 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -79,7 +79,7 @@ const saveSelection = () => {
 </script>
 
 <template>
-	<div class="map-block-component" >
+	<div class="map-block-component">
 		<div :class="{ 'map-container': true, 'map-full-screen': isFullScreen }">
 			<div class="control-bar">
 				<button :class="{ 'control-active': isFullScreen }" @click="isFullScreen = !isFullScreen">
diff --git a/packages/xforms-engine/src/client/RankNode.ts b/packages/xforms-engine/src/client/RankNode.ts
index 94510fa9c..a0a69d78f 100644
--- a/packages/xforms-engine/src/client/RankNode.ts
+++ b/packages/xforms-engine/src/client/RankNode.ts
@@ -11,6 +11,7 @@ import type { ValueType } from './ValueType.ts';
 export interface RankItem {
 	get label(): TextRange<'item-label'>;
 	get value(): string;
+	properties: Array<[string, string]>;
 }
 
 export type RankValueOptions = readonly RankItem[];
diff --git a/packages/xforms-engine/src/client/SelectNode.ts b/packages/xforms-engine/src/client/SelectNode.ts
index f9844a734..bb941b162 100644
--- a/packages/xforms-engine/src/client/SelectNode.ts
+++ b/packages/xforms-engine/src/client/SelectNode.ts
@@ -14,6 +14,7 @@ import type { LeafNodeValidationState } from './validation.ts';
 export interface SelectItem {
 	get label(): TextRange<'item-label'>;
 	get value(): string;
+	properties: Array<[string, string]>;
 }
 
 export type SelectValueOptions = readonly SelectItem[];
diff --git a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
index f7a7f75e6..0aef5bb83 100644
--- a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
+++ b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
@@ -54,6 +54,7 @@ const createTranslatedStaticItems = (
 			return () => ({
 				value,
 				label: label(),
+				properties: [],
 			});
 		});
 
@@ -101,6 +102,7 @@ const createItemsetItemLabel = (
 interface ItemsetItem {
 	label(): ClientTextRange<'item-label'>;
 	value(): string;
+	properties: Array<[string, () => string]>;
 }
 
 const createItemsetItems = (
@@ -122,9 +124,20 @@ const createItemsetItems = (
 					});
 					const label = createItemsetItemLabel(context, itemset, value);
 
+					const nodeElements = itemNode
+						.getXPathChildNodes()
+						.filter((node) => node.nodeType === 'static-element');
+					const properties = itemset.getPropertiesExpressions(nodeElements).map((expression) => {
+						return [expression.toString(), createComputedExpression(context, expression)] as [
+							string,
+							() => string,
+						];
+					});
+
 					return {
 						label,
 						value,
+						properties,
 					};
 				});
 			});
@@ -144,6 +157,9 @@ const createItemset = (
 				return {
 					label: item.label(),
 					value: item.value(),
+					properties: item.properties.map(
+						([propLabel, propValue]) => [propLabel, propValue()] as [string, string]
+					),
 				};
 			});
 		});
diff --git a/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts b/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
index 593bd7700..2c7960c13 100644
--- a/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
+++ b/packages/xforms-engine/src/parse/body/control/ItemsetDefinition.ts
@@ -1,5 +1,8 @@
+import type { StaticElement } from '../../../integration/xpath/static-dom/StaticElement.ts';
 import type { ItemsetElement } from '../../../lib/dom/query.ts';
 import { getValueElement } from '../../../lib/dom/query.ts';
+import { DependentExpression } from '../../expression/abstract/DependentExpression.ts';
+import { ItemPropertyExpression } from '../../expression/ItemPropertyExpression.ts';
 import { ItemsetNodesetExpression } from '../../expression/ItemsetNodesetExpression.ts';
 import { ItemsetValueExpression } from '../../expression/ItemsetValueExpression.ts';
 import { ItemsetLabelDefinition } from '../../text/ItemsetLabelDefinition.ts';
@@ -52,4 +55,8 @@ export class ItemsetDefinition extends BodyElementDefinition<'itemset'> {
 		this.value = new ItemsetValueExpression(this, valueExpression);
 		this.label = ItemsetLabelDefinition.from(form, this);
 	}
+
+	getPropertiesExpressions(propertiesNodes: StaticElement[]): Array<DependentExpression<'string'>> {
+		return ItemPropertyExpression.from(propertiesNodes);
+	}
 }
diff --git a/packages/xforms-engine/src/parse/expression/ItemPropertyExpression.ts b/packages/xforms-engine/src/parse/expression/ItemPropertyExpression.ts
new file mode 100644
index 000000000..59c400775
--- /dev/null
+++ b/packages/xforms-engine/src/parse/expression/ItemPropertyExpression.ts
@@ -0,0 +1,12 @@
+import type { StaticElement } from '../../integration/xpath/static-dom/StaticElement.ts';
+import { DependentExpression } from './abstract/DependentExpression.ts';
+
+export class ItemPropertyExpression extends DependentExpression<'string'> {
+	static from(propertiesNodes: StaticElement[]) {
+		return propertiesNodes.map((node: StaticElement) => new this(node.qualifiedName.localName));
+	}
+
+	constructor(propertyName: string) {
+		super('string', propertyName);
+	}
+}

From 34ebdb4bb5f86fc4e62bf3398062a8a07a98208c Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:56:28 +0700
Subject: [PATCH 16/40] Fixes scenario tests

---
 .../scenario/src/jr/select/SelectChoice.ts    |  35 +---
 .../select/SelectChoiceArbitraryChildList.ts  |   3 -
 packages/scenario/test/select.test.ts         | 196 ++++--------------
 packages/xforms-engine/src/client/BaseItem.ts |   7 +
 packages/xforms-engine/src/client/RankNode.ts |   8 +-
 .../xforms-engine/src/client/SelectNode.ts    |   9 +-
 .../lib/reactivity/createItemCollection.ts    |  18 +-
 .../reactivity/createItemCollection.test.ts   |   5 +-
 8 files changed, 65 insertions(+), 216 deletions(-)
 delete mode 100644 packages/scenario/src/jr/select/SelectChoiceArbitraryChildList.ts
 create mode 100644 packages/xforms-engine/src/client/BaseItem.ts

diff --git a/packages/scenario/src/jr/select/SelectChoice.ts b/packages/scenario/src/jr/select/SelectChoice.ts
index 2d0705ee5..c49deea56 100644
--- a/packages/scenario/src/jr/select/SelectChoice.ts
+++ b/packages/scenario/src/jr/select/SelectChoice.ts
@@ -1,10 +1,9 @@
 import type { SelectItem } from '@getodk/xforms-engine';
 import { ComparableChoice } from '../../choice/ComparableChoice.ts';
-import { UnclearApplicabilityError } from '../../error/UnclearApplicabilityError.ts';
-import type { SelectChoiceArbitraryChildList } from './SelectChoiceArbitraryChildList.ts';
 
 export class SelectChoice extends ComparableChoice {
 	readonly value: string;
+	readonly properties: Array<[string, string]>;
 
 	get label(): string {
 		return this.selectItem.label.asString;
@@ -14,37 +13,11 @@ export class SelectChoice extends ComparableChoice {
 		super();
 
 		this.value = selectItem.value;
+		this.properties = selectItem.properties;
 	}
 
-	/**
-	 * **PORTING NOTES**
-	 *
-	 * This was
-	 * {@link https://github.com/getodk/javarosa/pull/660 | introduced in JavaRosa to support geo functionality}.
-	 * The method may access a well-known `geometry` child (or any arbitrary
-	 * child) by name,
-	 * {@link https://github.com/getodk/web-forms/pull/110#discussion_r1610611805 | where}…
-	 *
-	 * > Could be a repeat, a secondary instance or an external secondary instance
-	 * > (csv, xml or geojson). The `map` appearance that uses the `geometry`
-	 * > child for mapping works identically for all of those.
-	 *
-	 * @todo This is currently unimplemented (and will cause failures in tests
-	 * accessing it, even if other functionality is introduced to unblock code
-	 * paths leading to its access) until we deem it appropriate to address.
-	 * Addressing it will likely involve understanding how it relates to and/or
-	 * affected tests can be expressed at an integration level.
-	 */
-	getChild(_childName: string): string | null {
-		throw new UnclearApplicabilityError(
-			'select choice: getting arbitrary child of secondary instance nodes by name'
-		);
-	}
-
-	getAdditionalChildren(): SelectChoiceArbitraryChildList {
-		throw new UnclearApplicabilityError(
-			`select choice: getting arbitrary children of secondary instance nodes`
-		);
+	getProperties(): Array<[string, string]> {
+		return this.properties;
 	}
 
 	getValue(): string {
diff --git a/packages/scenario/src/jr/select/SelectChoiceArbitraryChildList.ts b/packages/scenario/src/jr/select/SelectChoiceArbitraryChildList.ts
deleted file mode 100644
index 850eb2025..000000000
--- a/packages/scenario/src/jr/select/SelectChoiceArbitraryChildList.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import type { JavaUtilList } from '../../java/util/List.ts';
-
-export interface SelectChoiceArbitraryChildList extends JavaUtilList<readonly [string, string]> {}
diff --git a/packages/scenario/test/select.test.ts b/packages/scenario/test/select.test.ts
index 090ed3cd0..8bee275f3 100644
--- a/packages/scenario/test/select.test.ts
+++ b/packages/scenario/test/select.test.ts
@@ -26,7 +26,6 @@ import { setUpSimpleReferenceManager } from '../src/jr/reference/ReferenceManage
 import { r } from '../src/jr/resource/ResourcePathHelper.ts';
 import type { SelectChoice } from '../src/jr/select/SelectChoice.ts';
 import { ANSWER_REQUIRED_BUT_EMPTY } from '../src/jr/validation/ValidateOutcome.ts';
-import { nullValue } from '../src/value/ExpectedNullValue.ts';
 
 // Ported as of https://github.com/getodk/javarosa/commit/5ae68946c47419b83e7d28290132d846e457eea6
 describe('DynamicSelectUpdateTest.java', () => {
@@ -624,165 +623,62 @@ describe('SelectChoiceTest.java', () => {
 	/**
 	 * **PORTING NOTES**
 	 *
-	 * The tests in this sub-suite are currently blocked by several absent features:
+	 * Some tests in this suite are blocked by the absence of support for repeat-based itemsets.
 	 *
-	 * 1. Retrieving external secondary instance resources
-	 * 2. Support for external secondary instance resources when evaluating
-	 *    XPath expressions referencing them
-	 * 3. Any notion of engine API access to the well-known GeoJSON `geometry`
-	 *    property, or any other arbitrary named child nodes present in any
-	 *    secondary instance (whether external or otherwise)
 	 */
 	describe('`getChild`', () => {
-		it.fails('returns named child when choices are from secondary instance', async () => {
+		it('returns properties in order when choices are from secondary instance', async () => {
 			setUpSimpleReferenceManager(r('external-select-geojson.xml').getParent(), 'file');
 
 			const scenario = await Scenario.init('external-select-geojson.xml');
 
-			expect(scenario.choicesOf('/data/q').get(1)?.getChild('geometry')).toBe('0.5 104 0 0');
-			expect(scenario.choicesOf('/data/q').get(1)?.getChild('special-property')).toBe(
-				'special value'
-			);
-		});
-
-		it.fails(
-			'returns null when choices are from secondary instance and requested child does not exist',
-			async () => {
-				setUpSimpleReferenceManager(r('external-select-geojson.xml').getParent(), 'file');
-
-				const scenario = await Scenario.init('external-select-geojson.xml');
-
-				expect(scenario.choicesOf('/data/q').get(1)?.getChild('non-existent')).toBe(null);
-			}
-		);
-
-		it.fails(
-			'returns empty string when choices are from secondary instance and requested child has no value',
-			async () => {
-				const scenario = await Scenario.init(
-					'Select with empty value',
-					html(
-						head(
-							title('Select with empty value'),
-							model(
-								mainInstance(t("data id='select-empty'", t('select'))),
-								instance('choices', t('item', t('label', 'Item'), t('property', '')))
-							)
-						),
-						body(select1Dynamic('/data/select', "instance('choices')/root/item", 'name', 'label'))
-					)
-				);
+			const firstChoiceProperties = scenario.choicesOf('/data/q').get(0)?.getProperties();
+			expect(firstChoiceProperties?.length).toEqual(4);
+			expect(firstChoiceProperties).deep.equal([
+				['geometry', '0.5 102 0 0'],
+				['id', 'fs87b'],
+				['name', 'My cool point'],
+				['foo', 'bar'],
+			]);
 
-				expect(scenario.choicesOf('/data/select').get(0)?.getChild('property')).toBe('');
-			}
-		);
+			const secondChoiceProperties = scenario.choicesOf('/data/q').get(1)?.getProperties();
+			expect(secondChoiceProperties?.length).toEqual(5);
+			expect(scenario.choicesOf('/data/q').get(1)?.getProperties()).deep.equal([
+				['geometry', '0.5 104 0 0'],
+				['id', '67'],
+				['name', 'Your cool point'],
+				['foo', 'quux'],
+				['special-property', 'special value'],
+			]);
+		});
 
-		/**
-		 * **PORTING NOTES**
-		 *
-		 * This test is also blocked on lack of support for repeat-based itemsets.
-		 */
-		it.fails('updates when choices are from repeat', async () => {
+		it('returns properties with empty string when no value and choices are from secondary instance', async () => {
 			const scenario = await Scenario.init(
-				'Select from repeat',
+				'Select with empty value',
 				html(
 					head(
-						title('Select from repeat'),
+						title('Select with empty value'),
 						model(
-							mainInstance(
-								t(
-									"data id='repeat-select'",
-									t('repeat', t('value'), t('label'), t('special-property')),
-									t('filter'),
-									t('select')
-								)
-							)
+							mainInstance(t("data id='select-empty'", t('select'))),
+							instance('choices', t('item', t('label', 'Item'), t('details', '')))
 						)
 					),
-					body(
-						repeat('/data/repeat', input('value'), input('label'), input('special-property')),
-						input('filter'),
-						select1Dynamic('/data/select', '../repeat')
-					)
+					body(select1Dynamic('/data/select', "instance('choices')/root/item", 'name', 'label'))
 				)
 			);
-			scenario.answer('/data/repeat[0]/value', 'a');
-			scenario.answer('/data/repeat[0]/label', 'A');
-			scenario.answer('/data/repeat[0]/special-property', 'AA');
 
-			expect(scenario.choicesOf('/data/select').get(0)?.getValue()).toBe('a');
-			expect(scenario.choicesOf('/data/select').get(0)?.getChild('special-property')).toBe('AA');
-
-			scenario.answer('/data/repeat[0]/special-property', 'changed');
-
-			expect(scenario.choicesOf('/data/select').get(0)?.getChild('special-property')).toBe(
-				'changed'
-			);
-		});
-
-		/**
-		 * **PORTING NOTES**
-		 *
-		 * In theory, this could be made to pass! It makes more sense to fail it
-		 * with the same error as the others above, as it is also subject to the
-		 * same API design considerations. It also may be moot depending on our
-		 * posture towards inline select items generally.
-		 */
-		it.fails('returns null when called on a choice from [an] inline select', async () => {
-			const scenario = await Scenario.init(
-				'Static select',
-				html(
-					head(
-						title('Static select'),
-						model(mainInstance(t("data id='static-select'", t('select'))))
-					),
-					body(select1('/data/select', item('one', 'One'), item('two', 'Two')))
-				)
-			);
-
-			expect(scenario.choicesOf('/data/select').get(0)?.getChild('invalid-property')).toBe(
-				nullValue()
-			);
-		});
-	});
-
-	/**
-	 * **PORTING NOTES**
-	 *
-	 * It is already obvious at the outset that this API will fall into the same
-	 * category as `getChild` above. Minimal effort has gone into porting these.
-	 * Any further notes that might arise will come from further analysis when the
-	 * affected functionality is prioritized.
-	 */
-	describe('`getAdditionalChildren`', () => {
-		it.fails('returns children in order when choices are from secondary instance', async () => {
-			setUpSimpleReferenceManager(r('external-select-geojson.xml').getParent(), 'file');
-
-			const scenario = await Scenario.init('external-select-geojson.xml');
-
-			const firstNodeChildren = scenario.choicesOf('/data/q').get(0)?.getAdditionalChildren();
-
-			expect(firstNodeChildren?.size()).toBe(3);
-			expect(firstNodeChildren?.get(0)).toEqual(['geometry', '0.5 102 0 0']);
-			expect(firstNodeChildren?.get(1)).toEqual(['id', 'fs87b']);
-			expect(firstNodeChildren?.get(2)).toEqual(['foo', 'bar']);
-
-			const secondNodeChildren = scenario.choicesOf('/data/q').get(1)?.getAdditionalChildren();
-
-			expect(secondNodeChildren?.size()).toBe(4);
-			expect(secondNodeChildren?.get(0)).toEqual(['geometry', '0.5 104 0 0']);
-			expect(secondNodeChildren?.get(1)).toEqual(['id', '67']);
-			expect(secondNodeChildren?.get(2)).toEqual(['foo', 'quux']);
-			expect(secondNodeChildren?.get(3)).toEqual(['special-property', 'special value']);
+			expect(scenario.choicesOf('/data/select').get(0)?.getProperties()).deep.equal([
+				['label', 'Item'],
+				['details', ''],
+			]);
 		});
 
 		/**
 		 * **PORTING NOTES**
 		 *
-		 * The corresponding JavaRosa test name begins with `getChildren`, which seems
-		 * to be a typo (or surprising shorthand) for `getAdditionalChildren
+		 * This test is blocked on lack of support for repeat-based itemsets.
 		 */
-		it.fails('updates when choices are from repeat', async () => {
+		it.fails('updates when choices are from repeat and preserve order', async () => {
 			const scenario = await Scenario.init(
 				'Select from repeat',
 				html(
@@ -811,28 +707,18 @@ describe('SelectChoiceTest.java', () => {
 			scenario.answer('/data/repeat[0]/special-property', 'AA');
 
 			expect(scenario.choicesOf('/data/select').get(0)?.getValue()).toBe('a');
-
-			let children = scenario.choicesOf('/data/select').get(0)?.getAdditionalChildren();
-
-			expect(children?.size()).toBe(2);
-			expect(children?.get(0)).toEqual(['value', 'a']);
-			expect(children?.get(1)).toEqual(['special-property', 'AA']);
+			expect(scenario.choicesOf('/data/select').get(0)?.getProperties()).deep.equal([
+				['special-property', 'AA'],
+			]);
 
 			scenario.answer('/data/repeat[0]/special-property', 'changed');
 
-			children = scenario.choicesOf('/data/select').get(0)?.getAdditionalChildren();
-
-			expect(children?.get(1)).toEqual(['special-property', 'changed']);
+			expect(scenario.choicesOf('/data/select').get(0)?.getProperties()).deep.equal([
+				['special-property', 'changed'],
+			]);
 		});
 
-		/**
-		 * **PORTING NOTES**
-		 *
-		 * Like the inline (non-itemset) select test for `getChild`, this could be
-		 * made to pass, but was left failing with the rest of the sub-suite based
-		 * on the same reasoning.
-		 */
-		it.fails('returns empty when called on a choice from inline select', async () => {
+		it('returns empty properties when called on a choice from [an] inline select', async () => {
 			const scenario = await Scenario.init(
 				'Static select',
 				html(
@@ -844,9 +730,7 @@ describe('SelectChoiceTest.java', () => {
 				)
 			);
 
-			expect(scenario.choicesOf('/data/select').get(0)?.getAdditionalChildren().isEmpty()).toBe(
-				true
-			);
+			expect(scenario.choicesOf('/data/select').get(0)?.getProperties()).deep.equal([]);
 		});
 	});
 });
diff --git a/packages/xforms-engine/src/client/BaseItem.ts b/packages/xforms-engine/src/client/BaseItem.ts
new file mode 100644
index 000000000..947bb8aa5
--- /dev/null
+++ b/packages/xforms-engine/src/client/BaseItem.ts
@@ -0,0 +1,7 @@
+import type { TextRange } from './TextRange.ts';
+
+export interface BaseItem {
+	get label(): TextRange<'item-label'>;
+	get value(): string;
+	properties: Array<[string, string]>;
+}
diff --git a/packages/xforms-engine/src/client/RankNode.ts b/packages/xforms-engine/src/client/RankNode.ts
index a0a69d78f..225fb3cc2 100644
--- a/packages/xforms-engine/src/client/RankNode.ts
+++ b/packages/xforms-engine/src/client/RankNode.ts
@@ -1,6 +1,7 @@
 import type { RankControlDefinition } from '../parse/body/control/RankControlDefinition.ts';
 import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
 import type { BaseValueNode, BaseValueNodeState } from './BaseValueNode.ts';
+import type { BaseItem } from './BaseItem.ts';
 import type { RootNode } from './RootNode.ts';
 import type { TextRange } from './TextRange.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
@@ -8,12 +9,7 @@ import type { LeafNodeValidationState } from './validation.ts';
 import type { UnknownAppearanceDefinition } from '../parse/body/appearance/unknownAppearanceParser.ts';
 import type { ValueType } from './ValueType.ts';
 
-export interface RankItem {
-	get label(): TextRange<'item-label'>;
-	get value(): string;
-	properties: Array<[string, string]>;
-}
-
+export type RankItem = BaseItem;
 export type RankValueOptions = readonly RankItem[];
 
 export interface RankNodeState extends BaseValueNodeState<readonly string[]> {
diff --git a/packages/xforms-engine/src/client/SelectNode.ts b/packages/xforms-engine/src/client/SelectNode.ts
index bb941b162..f811e453e 100644
--- a/packages/xforms-engine/src/client/SelectNode.ts
+++ b/packages/xforms-engine/src/client/SelectNode.ts
@@ -4,19 +4,14 @@ import type {
 } from '../parse/body/control/SelectControlDefinition.ts';
 import type { LeafNodeDefinition } from '../parse/model/LeafNodeDefinition.ts';
 import type { BaseValueNode, BaseValueNodeState } from './BaseValueNode.ts';
+import type { BaseItem } from './BaseItem.ts';
 import type { NodeAppearances } from './NodeAppearances.ts';
 import type { RootNode } from './RootNode.ts';
-import type { TextRange } from './TextRange.ts';
 import type { ValueType } from './ValueType.ts';
 import type { GeneralParentNode } from './hierarchy.ts';
 import type { LeafNodeValidationState } from './validation.ts';
 
-export interface SelectItem {
-	get label(): TextRange<'item-label'>;
-	get value(): string;
-	properties: Array<[string, string]>;
-}
-
+export type SelectItem = BaseItem;
 export type SelectValueOptions = readonly SelectItem[];
 
 export interface SelectNodeState extends BaseValueNodeState<readonly string[]> {
diff --git a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
index 0aef5bb83..10ebc31af 100644
--- a/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
+++ b/packages/xforms-engine/src/lib/reactivity/createItemCollection.ts
@@ -2,13 +2,12 @@ import { UpsertableMap } from '@getodk/common/lib/collections/UpsertableMap.ts';
 import type { Accessor } from 'solid-js';
 import { createMemo } from 'solid-js';
 import type { ActiveLanguage } from '../../client/FormLanguage.ts';
-import type { SelectItem } from '../../client/SelectNode.ts';
-import type { RankItem } from '../../client/RankNode.ts';
+import type { BaseItem } from '../../client/BaseItem.ts';
 import type { TextRange as ClientTextRange } from '../../client/TextRange.ts';
 import type { EvaluationContext } from '../../instance/internal-api/EvaluationContext.ts';
 import type { TranslationContext } from '../../instance/internal-api/TranslationContext.ts';
-import type { SelectControl } from '../../instance/SelectControl.ts';
 import type { RankControl } from '../../instance/RankControl.ts';
+import type { SelectControl } from '../../instance/SelectControl.ts';
 import { TextChunk } from '../../instance/text/TextChunk.ts';
 import { TextRange } from '../../instance/text/TextRange.ts';
 import type { EngineXPathNode } from '../../integration/xpath/adapter/kind.ts';
@@ -19,8 +18,7 @@ import { createComputedExpression } from './createComputedExpression.ts';
 import type { ReactiveScope } from './scope.ts';
 import { createTextRange } from './text/createTextRange.ts';
 
-export type ItemCollectionControl = RankControl | SelectControl;
-type Item = RankItem | SelectItem;
+type ItemCollectionControl = RankControl | SelectControl;
 type DerivedItemLabel = ClientTextRange<'item-label', 'form-derived'>;
 
 const derivedItemLabel = (context: TranslationContext, value: string): DerivedItemLabel => {
@@ -45,7 +43,7 @@ const createItemLabel = (
 const createTranslatedStaticItems = (
 	control: ItemCollectionControl,
 	items: readonly ItemDefinition[]
-): Accessor<readonly Item[]> => {
+): Accessor<readonly BaseItem[]> => {
 	return control.scope.runTask(() => {
 		const labeledItems = items.map((item) => {
 			const { value } = item;
@@ -148,7 +146,7 @@ const createItemsetItems = (
 const createItemset = (
 	control: ItemCollectionControl,
 	itemset: ItemsetDefinition
-): Accessor<readonly Item[]> => {
+): Accessor<readonly BaseItem[]> => {
 	return control.scope.runTask(() => {
 		const itemsetItems = createItemsetItems(control, itemset);
 
@@ -168,7 +166,7 @@ const createItemset = (
 
 /**
  * Creates a reactive computation of a {@link ItemCollectionControl}'s
- * {@link Item}s, in support of the field's `valueOptions`.
+ * {@link BaseItem}s, in support of the field's `valueOptions`.
  *
  * - The control defined with static `<item>`s will compute to an corresponding
  *   static list of items.
@@ -178,7 +176,9 @@ const createItemset = (
  *   their appropriate dependencies (whether relative to the itemset item node,
  *   referencing a form's `itext` translations, etc).
  */
-export const createItemCollection = (control: ItemCollectionControl): Accessor<readonly Item[]> => {
+export const createItemCollection = (
+	control: ItemCollectionControl
+): Accessor<readonly BaseItem[]> => {
 	const { items, itemset } = control.definition.bodyElement;
 
 	if (itemset != null) {
diff --git a/packages/xforms-engine/test/lib/reactivity/createItemCollection.test.ts b/packages/xforms-engine/test/lib/reactivity/createItemCollection.test.ts
index 11fa546dc..625af8e8e 100644
--- a/packages/xforms-engine/test/lib/reactivity/createItemCollection.test.ts
+++ b/packages/xforms-engine/test/lib/reactivity/createItemCollection.test.ts
@@ -14,10 +14,7 @@ import {
 } from '@getodk/common/test/fixtures/xform-dsl/index.ts';
 import { describe, expect, it } from 'vitest';
 import { createInstance } from '../../../src/entrypoints/createInstance.ts';
-import type {
-	createItemCollection,
-	ItemCollectionControl,
-} from '../../../src/lib/reactivity/createItemCollection.ts';
+import type { createItemCollection } from '../../../src/lib/reactivity/createItemCollection.ts';
 import { reactiveTestScope } from '../../helpers/reactive/internal.ts';
 
 /**

From 62562bf17643bfabcd8f0ca609f1b165434bc080 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Sat, 27 Sep 2025 02:30:10 +0700
Subject: [PATCH 17/40] Integration engine and client

---
 .../src/components/common/map/AsyncMap.vue    |  30 +++--
 .../src/components/common/map/MapBlock.vue    |  25 +---
 .../components/common/map/MapProperties.vue   |   8 +-
 .../src/components/common/map/useMapBlock.ts  | 102 ++++++++-------
 .../form-elements/select/Select1Control.vue   | 120 +++++++++++++++++-
 5 files changed, 196 insertions(+), 89 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 79201eed6..9d89f60ae 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -9,23 +9,27 @@ import Button from 'primevue/button';
 import ProgressSpinner from 'primevue/progressspinner';
 import { type DefineComponent, onMounted, shallowRef } from 'vue';
 
-// TODO: This type will come from xforms-engine
-export interface GeoJSONInput {
-	type: string;
-	features?: Array<{
-		type: string;
-		geometry: {
-			type: string;
-			coordinates: unknown;
-		};
-		properties?: Record<string, unknown>;
-	}>;
+type Longitude = number;
+type Latitude = number;
+
+export interface Feature {
+	type: 'Feature';
+	geometry: {
+		type: 'Point' | 'LineString' | 'Polygon';
+		coordinates: Array<[Longitude, Latitude]> | [Longitude, Latitude];
+	};
+	properties: Record<string, unknown>;
+}
+
+export interface FeatureCollection {
+	type: 'FeatureCollection';
+	features: Feature[];
 }
 
 interface MapBlockProps {
-	data: GeoJSONInput;
+	featureCollection: FeatureCollection;
 	config: {
-		viewCoordinates: [number, number];
+		viewCoordinates: [Longitude, Latitude] | undefined;
 		zoom?: number;
 	};
 }
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 71431c860..5a7233454 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -7,17 +7,13 @@
 import IconSVG from '@/components/common/IconSVG.vue';
 import MapProperties from '@/components/common/map/MapProperties.vue';
 import MapStatusBar from '@/components/common/map/MapStatusBar.vue';
-import {
-	type GeoJSONInput,
-	type MapConfig,
-	useMapBlock,
-} from '@/components/common/map/useMapBlock.ts';
+import { type MapConfig, useMapBlock } from '@/components/common/map/useMapBlock.ts';
 import { QUESTION_HAS_ERROR } from '@/lib/constants/injection-keys.ts';
+import type { FeatureCollection } from 'geojson';
 import { computed, type ComputedRef, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 
-// ToDo: document these props, maybe change "data" for a better name
 interface MapBlockProps {
-	data: GeoJSONInput;
+	featureCollection: FeatureCollection;
 	config: MapConfig;
 }
 
@@ -37,8 +33,7 @@ onMounted(() => {
 		return;
 	}
 
-	mapHandler.initializeMap(mapElement.value);
-	mapHandler.loadGeometries(props.data);
+	mapHandler.initializeMap(mapElement.value, props.featureCollection);
 	document.addEventListener('keydown', handleEscapeKey);
 });
 
@@ -47,19 +42,13 @@ onUnmounted(() => {
 });
 
 watch(
-	() => props.data,
+	() => props.featureCollection,
 	(newData) => {
 		mapHandler?.loadGeometries(newData);
 	},
 	{ deep: true, immediate: true }
 );
 
-const mapPropertiesTitle = computed(() => {
-	// ToDo: use correct labels
-	const label = mapHandler?.selectedFeatureProperties.value?.label;
-	return typeof label === 'string' ? label : '';
-});
-
 const handleEscapeKey = (event: KeyboardEvent) => {
 	if (event.key === 'Escape' && isFullScreen.value) {
 		isFullScreen.value = false;
@@ -103,8 +92,8 @@ const saveSelection = () => {
 
 			<MapProperties
 				v-if="mapHandler?.selectedFeatureProperties.value != null"
-				:title="mapPropertiesTitle"
-				:properties="mapHandler?.selectedFeatureProperties.value"
+				:reserved-props="mapHandler?.selectedFeatureProperties.value.reservedProps"
+				:ordered-props="mapHandler?.selectedFeatureProperties.value.orderedProps"
 				:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
 				@close="mapHandler.unselectFeature"
 				@discard="mapHandler?.discardSavedFeature"
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 263378ef9..2c5441b84 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -4,8 +4,8 @@ import Button from 'primevue/button';
 import { defineEmits, defineProps } from 'vue';
 
 defineProps<{
-	title: string;
-	properties: Record<string, unknown>;
+	reservedProps: Record<string, string>;
+	orderedProps: Array<[string, string]>;
 	hasSavedFeature: boolean;
 }>();
 
@@ -15,14 +15,14 @@ const emit = defineEmits(['close', 'save', 'discard']);
 <template>
 	<div class="map-properties">
 		<div class="map-properties-header">
-			<strong>{{ title }}</strong>
+			<strong>{{ reservedProps.label ?? reservedProps.geometry }}</strong>
 			<button class="close-icon" @click="emit('close')">
 				<IconSVG name="mdiClose" />
 			</button>
 		</div>
 
 		<div class="map-properties-content">
-			<div v-for="[key, value] in Object.entries(properties)" :key="key" class="property-line">
+			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
 				{{ key }}: {{ value }}
 			</div>
 		</div>
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index f15523666..1c7cafc90 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -3,6 +3,7 @@ import {
 	getSelectedStyles,
 	getUnselectedStyles,
 } from '@/components/common/map/map-styles.ts';
+import type { FeatureCollection } from 'geojson';
 import { Map, View } from 'ol';
 import { Zoom } from 'ol/control';
 import type { Coordinate } from 'ol/coordinate';
@@ -18,25 +19,12 @@ import VectorSource from 'ol/source/Vector';
 import { computed, ref, shallowRef, watch } from 'vue';
 
 export interface MapConfig {
-	viewCoordinates: Coordinate;
+	viewCoordinates: Coordinate | undefined;
 	zoom?: number; // See DEFAULT_ZOOM
 }
 
 type GeometryType = LineString | Point | Polygon;
 
-// TODO: This type will come from xforms-engine
-export interface GeoJSONInput {
-	type: string;
-	features?: Array<{
-		type: string;
-		geometry: {
-			type: string;
-			coordinates: unknown;
-		};
-		properties?: Record<string, unknown>;
-	}>;
-}
-
 const STATES = {
 	LOADING: 'loading',
 	READY: 'ready',
@@ -59,30 +47,52 @@ export function useMapBlock(config: MapConfig) {
 	const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
 	const errorMessage = shallowRef<{ title: string; message: string } | undefined>();
 	const mapInstance = ref<Map | undefined>();
-	const featuresVectorLayer = ref<WebGLVectorLayer | undefined>();
 	const savedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeatureProperties = computed<Record<string, unknown> | undefined>(() => {
-		// Removing OpenLayers properties and FEATURE_ID_PROPERTY
-		const {
-			geometry,
-			[FEATURE_ID_PROPERTY]: id,
-			...props
-		} = selectedFeature.value?.getProperties() ?? {};
-		return Object.keys(props).length ? props : undefined;
+		return selectedFeature.value?.getProperties();
+	});
+
+	const featuresVectorLayer = new WebGLVectorLayer({
+		source: new VectorSource(),
+		style: [
+			...getUnselectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
+			...getSelectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
+			...getSavedStyles(FEATURE_ID_PROPERTY, SAVED_ID_PROPERTY),
+		],
+		variables: { [SAVED_ID_PROPERTY]: '', [SELECTED_ID_PROPERTY]: '' },
 	});
 
-	const initializeMap = (mapContainer: HTMLElement): void => {
+	const initializeMap = (mapContainer: HTMLElement, geoJSON: FeatureCollection): void => {
+		if (mapInstance.value) {
+			return;
+		}
+
 		mapInstance.value = new Map({
 			target: mapContainer,
-			layers: [new TileLayer({ source: new OSM() })],
+			layers: [new TileLayer({ source: new OSM() }), featuresVectorLayer],
 			view: new View({
-				center: fromLonLat(config.viewCoordinates),
-				zoom: zoom,
+				center: config.viewCoordinates ? fromLonLat(config.viewCoordinates) : [0, 0],
+				zoom: config.viewCoordinates ? zoom : 2,
 			}),
 			controls: [new Zoom()],
 		});
+
+		mapInstance.value.on('singleclick', (event) => selectFeatureByPosition(event.pixel));
 		currentState.value = STATES.READY;
+		loadGeometries(geoJSON);
+	};
+
+	const fitToAllFeatures = (): void => {
+		const source = featuresVectorLayer.getSource() as VectorSource | undefined;
+		const extent = source?.getExtent();
+		if (extent) {
+			mapInstance.value?.getView().fit(extent, {
+				padding: [50, 50, 50, 50],
+				duration: ANIMATION_TIME,
+				maxZoom: 16,
+			});
+		}
 	};
 
 	const centerCurrentLocation = (): void => {
@@ -138,7 +148,7 @@ export function useMapBlock(config: MapConfig) {
 		]);
 	};
 
-	const loadGeometries = (geoJSON: GeoJSONInput): void => {
+	const loadGeometries = (geoJSON: FeatureCollection): void => {
 		if (mapInstance.value == null) {
 			return;
 		}
@@ -146,15 +156,16 @@ export function useMapBlock(config: MapConfig) {
 		currentState.value = STATES.LOADING;
 		unselectFeature();
 		discardSavedFeature();
+		const source = featuresVectorLayer.getSource();
+		source?.clear();
 
-		if (featuresVectorLayer.value != null) {
-			mapInstance.value.removeLayer(featuresVectorLayer.value);
-			featuresVectorLayer.value.dispose();
-			featuresVectorLayer.value = undefined;
+		if (!geoJSON.features.length || !source) {
+			currentState.value = STATES.READY;
+			return;
 		}
 
 		const features = new GeoJSON().readFeatures(geoJSON, {
-			dataProjection: DEFAULT_GEOJSON_PROJECTION, // ToDo: do we support different GeoJSON projections?
+			dataProjection: DEFAULT_GEOJSON_PROJECTION,
 			featureProjection: mapInstance.value.getView().getProjection(),
 		});
 
@@ -163,26 +174,19 @@ export function useMapBlock(config: MapConfig) {
 				feature.set(FEATURE_ID_PROPERTY, crypto.randomUUID());
 			}
 		});
-
-		featuresVectorLayer.value = new WebGLVectorLayer({
-			source: new VectorSource({ features }),
-			style: [
-				...getUnselectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
-				...getSelectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
-				...getSavedStyles(FEATURE_ID_PROPERTY, SAVED_ID_PROPERTY),
-			],
-			variables: { [SAVED_ID_PROPERTY]: '', [SELECTED_ID_PROPERTY]: '' },
-		});
-		mapInstance.value.addLayer(featuresVectorLayer.value);
-		mapInstance.value.on('singleclick', (event) => selectFeatureByPosition(event.pixel));
+		source.addFeatures(features);
 
 		currentState.value = STATES.READY;
+
+		if (!config.viewCoordinates) {
+			fitToAllFeatures();
+		}
 	};
 
 	const selectFeatureByPosition = (position: Pixel): void => {
 		const hitFeatures = mapInstance.value?.getFeaturesAtPixel(position, {
 			hitTolerance: MAP_HIT_TOLERANCE,
-			layerFilter: (layer) => layer === featuresVectorLayer.value,
+			layerFilter: (layer) => layer instanceof WebGLVectorLayer,
 		});
 
 		const featureToSelect = hitFeatures?.length
@@ -195,7 +199,7 @@ export function useMapBlock(config: MapConfig) {
 	const selectFeature = (feature: Feature<GeometryType> | undefined): void => {
 		selectedFeature.value = feature;
 
-		featuresVectorLayer.value?.updateStyleVariables({
+		featuresVectorLayer.updateStyleVariables({
 			[SELECTED_ID_PROPERTY]: (selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '',
 		});
 
@@ -206,20 +210,20 @@ export function useMapBlock(config: MapConfig) {
 
 	const unselectFeature = (): void => {
 		selectedFeature.value = undefined;
-		featuresVectorLayer.value?.updateStyleVariables({ [SELECTED_ID_PROPERTY]: '' });
+		featuresVectorLayer.updateStyleVariables({ [SELECTED_ID_PROPERTY]: '' });
 	};
 
 	const saveFeature = (): void => {
 		savedFeature.value = selectedFeature.value;
 		const savedFeatureId = (savedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '';
-		featuresVectorLayer.value?.updateStyleVariables({
+		featuresVectorLayer.updateStyleVariables({
 			[SAVED_ID_PROPERTY]: savedFeatureId,
 		});
 	};
 
 	const discardSavedFeature = (): void => {
 		savedFeature.value = undefined;
-		featuresVectorLayer.value?.updateStyleVariables({ [SAVED_ID_PROPERTY]: '' });
+		featuresVectorLayer.updateStyleVariables({ [SAVED_ID_PROPERTY]: '' });
 	};
 
 	const isSelectedFeatureSaved = (): boolean => {
diff --git a/packages/web-forms/src/components/form-elements/select/Select1Control.vue b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
index 686353f07..a946264d0 100644
--- a/packages/web-forms/src/components/form-elements/select/Select1Control.vue
+++ b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
@@ -2,15 +2,28 @@
 import ColumnarAppearance from '@/components/appearances/ColumnarAppearance.vue';
 import FieldListTable from '@/components/appearances/FieldListTable.vue';
 import UnsupportedAppearance from '@/components/appearances/UnsupportedAppearance.vue';
-import AsyncMap from '@/components/common/map/AsyncMap.vue';
+import AsyncMap, {
+	type Feature,
+	type FeatureCollection,
+} from '@/components/common/map/AsyncMap.vue';
 import ControlText from '@/components/form-elements/ControlText.vue';
 import ValidationMessage from '@/components/common/ValidationMessage.vue';
 import LikertWidget from '@/components/common/LikertWidget.vue';
 import RadioButton from '@/components/common/RadioButton.vue';
 import SearchableDropdown from '@/components/common/SearchableDropdown.vue';
-import type { SelectNode } from '@getodk/xforms-engine';
+import type { SelectItem, SelectNode } from '@getodk/xforms-engine';
 import { computed, ref, watchEffect } from 'vue';
 
+const RESERVED_MAP_PROPERTIES = [
+	'itextId',
+	'geometry',
+	'marker-color',
+	'marker-symbol',
+	'stroke',
+	'stroke-width',
+	'fill',
+];
+
 interface Select1ControlProps {
 	readonly question: SelectNode;
 }
@@ -19,9 +32,12 @@ const props = defineProps<Select1ControlProps>();
 const isSelectWithImages = computed(() => props.question.currentState.isSelectWithImages);
 const hasColumnsAppearance = ref(false);
 const hasFieldListRelatedAppearance = ref(false);
+const hasMapAppearance = ref(false);
 
 watchEffect(() => {
 	const appearances = [...props.question.appearances];
+	hasMapAppearance.value = appearances.includes('map');
+
 	hasFieldListRelatedAppearance.value = appearances.some((appearance) => {
 		return ['label', 'list-nolabel', 'list'].includes(appearance);
 	});
@@ -32,6 +48,87 @@ watchEffect(() => {
 		hasColumnsAppearance.value = appearances.some((appearance) => appearance.startsWith('columns'));
 	}
 });
+
+const featureCollection = computed(() => {
+	if (!hasMapAppearance.value) {
+		return;
+	}
+
+	const features: Feature[] = [];
+	props.question.currentState.valueOptions.forEach((option: SelectItem) => {
+		try {
+			const reservedProps: Record<string, string> = {
+				label: option.label?.asString,
+				value: option.value,
+			};
+			const orderedProps: Array<[string, string]> = [];
+
+			option.properties.forEach(([key, value]) => {
+				if (RESERVED_MAP_PROPERTIES.includes(key)) {
+					reservedProps[key] = value;
+				} else {
+					orderedProps.push([key, value]);
+				}
+			});
+
+			if (!reservedProps.geometry) {
+				throw new Error('Missing geometry');
+			}
+
+			const coordinates = getGeoJSONCoordinates(reservedProps.geometry);
+			if (coordinates.length === 0) {
+				throw new Error('Missing geo points');
+			}
+
+			const geometryType = getGeometryType(coordinates);
+			features.push({
+				type: 'Feature',
+				geometry: {
+					type: geometryType,
+					coordinates: geometryType === 'Point' ? coordinates[0] : coordinates,
+				},
+				properties: { reservedProps, orderedProps },
+			});
+		} catch {
+			// Skip invalid options silently to match Collect behaviour.
+		}
+	});
+
+	return { type: 'FeatureCollection', features };
+});
+
+const viewCoordinates = computed(() => {
+	if (!hasMapAppearance.value || !props.question.currentState.value?.length) {
+		return;
+	}
+
+	const coordinates = getGeoJSONCoordinates(props.question.currentState.value[0]);
+	return coordinates.length ? coordinates[0] : undefined;
+});
+
+const getGeometryType = (coords: Array<[number, number]>): 'Point' | 'LineString' | 'Polygon' => {
+	if (coords.length === 1) {
+		return 'Point';
+	}
+	const first = coords[0];
+	const last = coords[coords.length - 1];
+	return first[0] === last[0] && first[1] === last[1] ? 'Polygon' : 'LineString';
+};
+
+const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
+	return geometry.split(',').map((coord) => {
+		const [lat, lon] = coord.split(/\s+/).map(Number);
+
+		const isNullLocation = lat === 0 && lon === 0;
+		const isValidLatitude = lat != null && !Number.isNaN(lat) && Math.abs(lat) <= 90;
+		const isValidLongitude = lon != null && !Number.isNaN(lon) && Math.abs(lon) <= 180;
+		if (isNullLocation || !isValidLatitude || !isValidLongitude) {
+			throw new Error('Invalid geo point coordinates');
+		}
+
+		return [lon, lat];
+	});
+};
 </script>
 
 <template>
@@ -48,9 +145,18 @@ watchEffect(() => {
 		:question="question"
 	/>
 
-	<AsyncMap v-else-if="question.appearances.map" :data="question.currentState.value" :config="{viewCoordinates: [-122.4194, 37.7749]}" />
+	<AsyncMap
+		v-else-if="hasMapAppearance && featureCollection"
+		:feature-collection="featureCollection"
+		:config="{ viewCoordinates }"
+		@save
+	/>
 
-	<FieldListTable v-else-if="hasFieldListRelatedAppearance" :class="{ 'select-with-images': isSelectWithImages }" :appearances="question.appearances">
+	<FieldListTable
+		v-else-if="hasFieldListRelatedAppearance"
+		:class="{ 'select-with-images': isSelectWithImages }"
+		:appearances="question.appearances"
+	>
 		<template #firstColumn>
 			<ControlText :question="question" />
 		</template>
@@ -59,7 +165,11 @@ watchEffect(() => {
 		</template>
 	</FieldListTable>
 
-	<ColumnarAppearance v-else-if="hasColumnsAppearance" :class="{ 'select-with-images': isSelectWithImages }" :appearances="question.appearances">
+	<ColumnarAppearance
+		v-else-if="hasColumnsAppearance"
+		:class="{ 'select-with-images': isSelectWithImages }"
+		:appearances="question.appearances"
+	>
 		<RadioButton :question="question" />
 	</ColumnarAppearance>
 

From 7ff1896471f005e3daaa219ab8e1a7683ea75780 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 29 Sep 2025 19:31:35 +0700
Subject: [PATCH 18/40] Refactored component input types and fixed view center
 when no features

---
 .../src/components/common/map/AsyncMap.vue    | 150 ++++++++++++++----
 .../src/components/common/map/MapBlock.vue    |  23 ++-
 .../components/common/map/MapProperties.vue   |   7 +-
 .../src/components/common/map/useMapBlock.ts  |  75 +++++----
 .../form-elements/select/Select1Control.vue   | 110 +------------
 5 files changed, 196 insertions(+), 169 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 9d89f60ae..b4a62a088 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -4,39 +4,34 @@
  * This prevents unnecessary bloat in the main application bundle, reducing initial load times and improving performance.
  * Use dynamic imports instead (e.g., `await import(importPath)`) for lazy-loading these dependencies only when required.
  */
-import IconSVG from '@/components/common/IconSVG.vue';
-import Button from 'primevue/button';
+import type { SelectItem } from '@getodk/xforms-engine';
 import ProgressSpinner from 'primevue/progressspinner';
-import { type DefineComponent, onMounted, shallowRef } from 'vue';
+import { computed, type DefineComponent, onMounted, shallowRef } from 'vue';
 
-type Longitude = number;
-type Latitude = number;
+type Coordinates = [longitude: number, latitude: number];
+type GeometryType = 'LineString' | 'Point' | 'Polygon';
 
-export interface Feature {
+interface Feature {
 	type: 'Feature';
-	geometry: {
-		type: 'Point' | 'LineString' | 'Polygon';
-		coordinates: Array<[Longitude, Latitude]> | [Longitude, Latitude];
-	};
+	geometry: { type: GeometryType; coordinates: Coordinates | Coordinates[] };
 	properties: Record<string, unknown>;
 }
 
-export interface FeatureCollection {
-	type: 'FeatureCollection';
-	features: Feature[];
+type MapBlockComponent = DefineComponent<{
+	featureCollection: { type: string; features: Feature[] };
+	disabled: boolean;
+	savedFeatureValue: string | undefined;
+}>;
+
+interface AsyncMapProps {
+	// ToDo: Expand typing when implementing Geo Point/Shape/Trace question types.
+	features: readonly SelectItem[];
+	disabled: boolean;
+	savedFeatureValue: string | undefined;
 }
 
-interface MapBlockProps {
-	featureCollection: FeatureCollection;
-	config: {
-		viewCoordinates: [Longitude, Latitude] | undefined;
-		zoom?: number;
-	};
-}
-
-type MapBlockComponent = DefineComponent<MapBlockProps>;
-
-defineProps<MapBlockProps>();
+const props = defineProps<AsyncMapProps>();
+const emit = defineEmits(['save']);
 
 const STATES = {
 	READY: 'ready',
@@ -44,14 +39,97 @@ const STATES = {
 	ERROR: 'error',
 } as const;
 
+const RESERVED_MAP_PROPERTIES = [
+	'itextId',
+	'geometry',
+	'marker-color',
+	'marker-symbol',
+	'stroke',
+	'stroke-width',
+	'fill',
+];
+
 const mapComponent = shallowRef<MapBlockComponent | null>(null);
 const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
 
+const featureCollection = computed(() => {
+	const features: Feature[] = [];
+	props.features?.forEach((option) => {
+		try {
+			const reservedProps: Record<string, string> = {
+				label: option.label?.asString,
+				value: option.value,
+			};
+			const orderedProps: Array<[string, string]> = [];
+
+			option.properties.forEach(([key, value]) => {
+				if (RESERVED_MAP_PROPERTIES.includes(key)) {
+					reservedProps[key] = value;
+				} else {
+					orderedProps.push([key, value]);
+				}
+			});
+
+			if (!reservedProps.geometry) {
+				throw new Error('Missing geometry');
+			}
+
+			const coordinates = getGeoJSONCoordinates(reservedProps.geometry);
+			if (coordinates.length === 0) {
+				throw new Error('Missing geo points');
+			}
+
+			const geometryType = getGeometryType(coordinates);
+			features.push({
+				type: 'Feature',
+				geometry: {
+					type: geometryType,
+					coordinates: geometryType === 'Point' ? coordinates[0] : coordinates,
+				},
+				properties: { reservedProps, orderedProps },
+			});
+		} catch {
+			// Skip invalid options silently to match Collect behaviour.
+		}
+	});
+
+	return { type: 'FeatureCollection', features };
+});
+
+const getGeometryType = (coords: Array<[number, number]>): 'LineString' | 'Point' | 'Polygon' => {
+	if (coords.length === 1) {
+		return 'Point';
+	}
+
+	const first = coords[0];
+	const last = coords[coords.length - 1];
+	return first[0] === last[0] && first[1] === last[1] ? 'Polygon' : 'LineString';
+};
+
+const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
+	return geometry.split(',').map((coord) => {
+		const [lat, lon] = coord.split(/\s+/).map(Number);
+
+		const isNullLocation = lat === 0 && lon === 0;
+		const isValidLatitude = lat != null && !Number.isNaN(lat) && Math.abs(lat) <= 90;
+		const isValidLongitude = lon != null && !Number.isNaN(lon) && Math.abs(lon) <= 180;
+
+		if (isNullLocation || !isValidLatitude || !isValidLongitude) {
+			throw new Error('Invalid geo point coordinates');
+		}
+
+		return [lon, lat];
+	});
+};
+
 const loadMap = async () => {
 	currentState.value = STATES.LOADING;
 
 	try {
-		// ToDo: this is cached and retry doesn't work. Cannot add cache bust parameter.
+		/**
+		 * TODO: Implement retry mechanism for when the bundle fails to download.
+		 *       Adding a cache bust parameter doesn't work in Central.
+		 */
 		mapComponent.value = (
 			(await import('./MapBlock.vue')) as {
 				default: MapBlockComponent;
@@ -63,6 +141,8 @@ const loadMap = async () => {
 	}
 };
 
+const save = (feature: Feature) => emit('save', feature);
+
 onMounted(loadMap);
 </script>
 
@@ -73,14 +153,26 @@ onMounted(loadMap);
 			<p class="map-error-message">
 				Unable to load map
 			</p>
-			<Button outlined severity="contrast" class="retry-button" @click="loadMap">
+
+			<!-- TODO: Uncomment once retry mechanism is implemented.
+				<Button outlined severity="contrast" class="retry-button" @click="loadMap">
 				<IconSVG name="mdiRefresh" />
-				<!-- TODO: translations -->
+				// TODO: translations
 				<span>Try again</span>
-			</Button>
+				</Button>
+			-->
 		</div>
+
 		<ProgressSpinner v-else-if="currentState === STATES.LOADING" class="map-spinner" />
-		<component :is="mapComponent" v-else v-bind="{ ...$props, ...$attrs }" />
+
+		<component
+			:is="mapComponent"
+			v-else
+			:feature-collection="featureCollection"
+			:saved-feature-value="savedFeatureValue"
+			:disabled="disabled"
+			@save="save"
+		/>
 	</div>
 </template>
 
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 5a7233454..d205deca5 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -7,14 +7,15 @@
 import IconSVG from '@/components/common/IconSVG.vue';
 import MapProperties from '@/components/common/map/MapProperties.vue';
 import MapStatusBar from '@/components/common/map/MapStatusBar.vue';
-import { type MapConfig, useMapBlock } from '@/components/common/map/useMapBlock.ts';
+import { useMapBlock } from '@/components/common/map/useMapBlock.ts';
 import { QUESTION_HAS_ERROR } from '@/lib/constants/injection-keys.ts';
 import type { FeatureCollection } from 'geojson';
 import { computed, type ComputedRef, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 
 interface MapBlockProps {
 	featureCollection: FeatureCollection;
-	config: MapConfig;
+	disabled: boolean;
+	savedFeatureValue: string | undefined;
 }
 
 const props = defineProps<MapBlockProps>();
@@ -26,7 +27,7 @@ const showErrorStyle = inject<ComputedRef<boolean>>(
 	computed(() => false)
 );
 
-const mapHandler = useMapBlock(props.config);
+const mapHandler = useMapBlock();
 
 onMounted(() => {
 	if (mapElement.value == null || mapHandler == null) {
@@ -49,6 +50,12 @@ watch(
 	{ deep: true, immediate: true }
 );
 
+watch(
+	() => props.savedFeatureValue,
+	(newSaved) => mapHandler?.setSavedByValueProp(newSaved),
+	{ deep: true, immediate: true }
+);
+
 const handleEscapeKey = (event: KeyboardEvent) => {
 	if (event.key === 'Escape' && isFullScreen.value) {
 		isFullScreen.value = false;
@@ -63,7 +70,12 @@ const centerFeatureLocation = () => {
 
 const saveSelection = () => {
 	mapHandler?.saveFeature();
-	emit('save', mapHandler.savedFeature.value);
+	emit('save', mapHandler.savedFeature.value?.getProperties()?.reservedProps);
+};
+
+const discardSavedFeature = () => {
+	mapHandler?.discardSavedFeature();
+	emit('save', null);
 };
 </script>
 
@@ -95,8 +107,9 @@ const saveSelection = () => {
 				:reserved-props="mapHandler?.selectedFeatureProperties.value.reservedProps"
 				:ordered-props="mapHandler?.selectedFeatureProperties.value.orderedProps"
 				:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
+				:disabled="disabled"
 				@close="mapHandler.unselectFeature"
-				@discard="mapHandler?.discardSavedFeature"
+				@discard="discardSavedFeature"
 				@save="saveSelection"
 			/>
 		</div>
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 2c5441b84..0d91a76cc 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -7,6 +7,7 @@ defineProps<{
 	reservedProps: Record<string, string>;
 	orderedProps: Array<[string, string]>;
 	hasSavedFeature: boolean;
+	disabled: boolean;
 }>();
 
 const emit = defineEmits(['close', 'save', 'discard']);
@@ -28,13 +29,13 @@ const emit = defineEmits(['close', 'save', 'discard']);
 		</div>
 
 		<div class="map-properties-footer">
-			<Button v-if="hasSavedFeature" outlined severity="contrast" @click="emit('discard')">
+			<Button v-if="hasSavedFeature && !disabled" outlined severity="contrast" @click="emit('discard')">
 				<span>–</span>
 				<!-- TODO: translations -->
 				<span>Remove selection</span>
 			</Button>
-			<Button v-else outlined severity="contrast" @click="emit('save')">
-				<IconSVG name="mdiCheck" size="sm" />
+			<Button v-if="!hasSavedFeature && !disabled" @click="emit('save')">
+				<IconSVG name="mdiCheck" size="sm" variant="inverted" />
 				<!-- TODO: translations -->
 				<span>Save selected</span>
 			</Button>
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 1c7cafc90..ae2cfb837 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -6,7 +6,6 @@ import {
 import type { FeatureCollection } from 'geojson';
 import { Map, View } from 'ol';
 import { Zoom } from 'ol/control';
-import type { Coordinate } from 'ol/coordinate';
 import Feature from 'ol/Feature';
 import GeoJSON from 'ol/format/GeoJSON';
 import { LineString, Point, Polygon } from 'ol/geom';
@@ -18,12 +17,11 @@ import { OSM } from 'ol/source';
 import VectorSource from 'ol/source/Vector';
 import { computed, ref, shallowRef, watch } from 'vue';
 
-export interface MapConfig {
-	viewCoordinates: Coordinate | undefined;
-	zoom?: number; // See DEFAULT_ZOOM
-}
-
 type GeometryType = LineString | Point | Polygon;
+interface FeatureProperties {
+	reservedProps: Record<string, string>;
+	orderedProps: Array<[string, string]>;
+}
 
 const STATES = {
 	LOADING: 'loading',
@@ -32,7 +30,9 @@ const STATES = {
 } as const;
 
 const DEFAULT_GEOJSON_PROJECTION = 'EPSG:4326';
-const DEFAULT_ZOOM = 12;
+const DEFAULT_VIEW_CENTER = [0, 0];
+const MAX_ZOOM = 16;
+const MIN_ZOOM = 2;
 const GEOLOCATION_TIMEOUT_MS = 10 * 1000;
 const ANIMATION_TIME = 1000;
 const SMALL_DEVICE_WIDTH = 576;
@@ -41,16 +41,14 @@ const FEATURE_ID_PROPERTY = 'feature_id';
 const SAVED_ID_PROPERTY = 'savedId';
 const SELECTED_ID_PROPERTY = 'selectedId';
 
-export function useMapBlock(config: MapConfig) {
-	const zoom = config.zoom ?? DEFAULT_ZOOM;
-
+export function useMapBlock() {
 	const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
 	const errorMessage = shallowRef<{ title: string; message: string } | undefined>();
 	const mapInstance = ref<Map | undefined>();
 	const savedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeature = ref<Feature<GeometryType> | undefined>();
-	const selectedFeatureProperties = computed<Record<string, unknown> | undefined>(() => {
-		return selectedFeature.value?.getProperties();
+	const selectedFeatureProperties = computed<FeatureProperties | undefined>(() => {
+		return selectedFeature.value?.getProperties() as FeatureProperties | undefined;
 	});
 
 	const featuresVectorLayer = new WebGLVectorLayer({
@@ -71,10 +69,7 @@ export function useMapBlock(config: MapConfig) {
 		mapInstance.value = new Map({
 			target: mapContainer,
 			layers: [new TileLayer({ source: new OSM() }), featuresVectorLayer],
-			view: new View({
-				center: config.viewCoordinates ? fromLonLat(config.viewCoordinates) : [0, 0],
-				zoom: config.viewCoordinates ? zoom : 2,
-			}),
+			view: new View({ center: DEFAULT_VIEW_CENTER, zoom: MIN_ZOOM }),
 			controls: [new Zoom()],
 		});
 
@@ -90,7 +85,7 @@ export function useMapBlock(config: MapConfig) {
 			mapInstance.value?.getView().fit(extent, {
 				padding: [50, 50, 50, 50],
 				duration: ANIMATION_TIME,
-				maxZoom: 16,
+				maxZoom: MAX_ZOOM,
 			});
 		}
 	};
@@ -113,7 +108,7 @@ export function useMapBlock(config: MapConfig) {
 				const coords = fromLonLat([position.coords.longitude, position.coords.latitude]);
 				mapInstance.value
 					?.getView()
-					.animate({ center: coords, zoom: zoom, duration: ANIMATION_TIME });
+					.animate({ center: coords, zoom: MAX_ZOOM, duration: ANIMATION_TIME });
 				currentState.value = STATES.READY;
 			},
 			() => {
@@ -149,17 +144,22 @@ export function useMapBlock(config: MapConfig) {
 	};
 
 	const loadGeometries = (geoJSON: FeatureCollection): void => {
-		if (mapInstance.value == null) {
+		const source = featuresVectorLayer.getSource();
+		if (mapInstance.value == null || source == null) {
 			return;
 		}
 
 		currentState.value = STATES.LOADING;
 		unselectFeature();
 		discardSavedFeature();
-		const source = featuresVectorLayer.getSource();
-		source?.clear();
+		source.clear();
 
-		if (!geoJSON.features.length || !source) {
+		if (!geoJSON.features.length) {
+			mapInstance.value?.getView().animate({
+				center: DEFAULT_VIEW_CENTER,
+				zoom: MIN_ZOOM,
+				duration: ANIMATION_TIME,
+			});
 			currentState.value = STATES.READY;
 			return;
 		}
@@ -175,12 +175,9 @@ export function useMapBlock(config: MapConfig) {
 			}
 		});
 		source.addFeatures(features);
-
 		currentState.value = STATES.READY;
 
-		if (!config.viewCoordinates) {
-			fitToAllFeatures();
-		}
+		fitToAllFeatures();
 	};
 
 	const selectFeatureByPosition = (position: Pixel): void => {
@@ -213,8 +210,8 @@ export function useMapBlock(config: MapConfig) {
 		featuresVectorLayer.updateStyleVariables({ [SELECTED_ID_PROPERTY]: '' });
 	};
 
-	const saveFeature = (): void => {
-		savedFeature.value = selectedFeature.value;
+	const saveFeature = (feature: Feature<GeometryType> | undefined): void => {
+		savedFeature.value = feature;
 		const savedFeatureId = (savedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '';
 		featuresVectorLayer.updateStyleVariables({
 			[SAVED_ID_PROPERTY]: savedFeatureId,
@@ -226,6 +223,25 @@ export function useMapBlock(config: MapConfig) {
 		featuresVectorLayer.updateStyleVariables({ [SAVED_ID_PROPERTY]: '' });
 	};
 
+	const setSavedByValueProp = (value: string | undefined): void => {
+		if (!value?.length) {
+			return;
+		}
+
+		const features = featuresVectorLayer.getSource()?.getFeatures();
+		const featureToSave = features?.find((feature) => {
+			const { reservedProps } = feature.getProperties() as FeatureProperties;
+			return reservedProps.value === value;
+		}) as Feature<GeometryType>;
+
+		if (!featureToSave) {
+			return;
+		}
+
+		saveFeature(featureToSave);
+		centerFeatureLocation(featureToSave);
+	};
+
 	const isSelectedFeatureSaved = (): boolean => {
 		const savedId = savedFeature.value?.get(FEATURE_ID_PROPERTY) as string;
 		const selectedId = selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string;
@@ -252,7 +268,8 @@ export function useMapBlock(config: MapConfig) {
 
 		savedFeature,
 		discardSavedFeature,
-		saveFeature,
+		saveFeature: () => saveFeature(selectedFeature.value),
+		setSavedByValueProp,
 
 		selectedFeatureProperties,
 		selectFeature,
diff --git a/packages/web-forms/src/components/form-elements/select/Select1Control.vue b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
index a946264d0..564851b9f 100644
--- a/packages/web-forms/src/components/form-elements/select/Select1Control.vue
+++ b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
@@ -2,28 +2,15 @@
 import ColumnarAppearance from '@/components/appearances/ColumnarAppearance.vue';
 import FieldListTable from '@/components/appearances/FieldListTable.vue';
 import UnsupportedAppearance from '@/components/appearances/UnsupportedAppearance.vue';
-import AsyncMap, {
-	type Feature,
-	type FeatureCollection,
-} from '@/components/common/map/AsyncMap.vue';
+import AsyncMap from '@/components/common/map/AsyncMap.vue';
 import ControlText from '@/components/form-elements/ControlText.vue';
 import ValidationMessage from '@/components/common/ValidationMessage.vue';
 import LikertWidget from '@/components/common/LikertWidget.vue';
 import RadioButton from '@/components/common/RadioButton.vue';
 import SearchableDropdown from '@/components/common/SearchableDropdown.vue';
-import type { SelectItem, SelectNode } from '@getodk/xforms-engine';
+import type { SelectNode } from '@getodk/xforms-engine';
 import { computed, ref, watchEffect } from 'vue';
 
-const RESERVED_MAP_PROPERTIES = [
-	'itextId',
-	'geometry',
-	'marker-color',
-	'marker-symbol',
-	'stroke',
-	'stroke-width',
-	'fill',
-];
-
 interface Select1ControlProps {
 	readonly question: SelectNode;
 }
@@ -32,12 +19,9 @@ const props = defineProps<Select1ControlProps>();
 const isSelectWithImages = computed(() => props.question.currentState.isSelectWithImages);
 const hasColumnsAppearance = ref(false);
 const hasFieldListRelatedAppearance = ref(false);
-const hasMapAppearance = ref(false);
 
 watchEffect(() => {
 	const appearances = [...props.question.appearances];
-	hasMapAppearance.value = appearances.includes('map');
-
 	hasFieldListRelatedAppearance.value = appearances.some((appearance) => {
 		return ['label', 'list-nolabel', 'list'].includes(appearance);
 	});
@@ -48,87 +32,6 @@ watchEffect(() => {
 		hasColumnsAppearance.value = appearances.some((appearance) => appearance.startsWith('columns'));
 	}
 });
-
-const featureCollection = computed(() => {
-	if (!hasMapAppearance.value) {
-		return;
-	}
-
-	const features: Feature[] = [];
-	props.question.currentState.valueOptions.forEach((option: SelectItem) => {
-		try {
-			const reservedProps: Record<string, string> = {
-				label: option.label?.asString,
-				value: option.value,
-			};
-			const orderedProps: Array<[string, string]> = [];
-
-			option.properties.forEach(([key, value]) => {
-				if (RESERVED_MAP_PROPERTIES.includes(key)) {
-					reservedProps[key] = value;
-				} else {
-					orderedProps.push([key, value]);
-				}
-			});
-
-			if (!reservedProps.geometry) {
-				throw new Error('Missing geometry');
-			}
-
-			const coordinates = getGeoJSONCoordinates(reservedProps.geometry);
-			if (coordinates.length === 0) {
-				throw new Error('Missing geo points');
-			}
-
-			const geometryType = getGeometryType(coordinates);
-			features.push({
-				type: 'Feature',
-				geometry: {
-					type: geometryType,
-					coordinates: geometryType === 'Point' ? coordinates[0] : coordinates,
-				},
-				properties: { reservedProps, orderedProps },
-			});
-		} catch {
-			// Skip invalid options silently to match Collect behaviour.
-		}
-	});
-
-	return { type: 'FeatureCollection', features };
-});
-
-const viewCoordinates = computed(() => {
-	if (!hasMapAppearance.value || !props.question.currentState.value?.length) {
-		return;
-	}
-
-	const coordinates = getGeoJSONCoordinates(props.question.currentState.value[0]);
-	return coordinates.length ? coordinates[0] : undefined;
-});
-
-const getGeometryType = (coords: Array<[number, number]>): 'Point' | 'LineString' | 'Polygon' => {
-	if (coords.length === 1) {
-		return 'Point';
-	}
-	const first = coords[0];
-	const last = coords[coords.length - 1];
-	return first[0] === last[0] && first[1] === last[1] ? 'Polygon' : 'LineString';
-};
-
-const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
-	return geometry.split(',').map((coord) => {
-		const [lat, lon] = coord.split(/\s+/).map(Number);
-
-		const isNullLocation = lat === 0 && lon === 0;
-		const isValidLatitude = lat != null && !Number.isNaN(lat) && Math.abs(lat) <= 90;
-		const isValidLongitude = lon != null && !Number.isNaN(lon) && Math.abs(lon) <= 180;
-		if (isNullLocation || !isValidLatitude || !isValidLongitude) {
-			throw new Error('Invalid geo point coordinates');
-		}
-
-		return [lon, lat];
-	});
-};
 </script>
 
 <template>
@@ -146,10 +49,11 @@ const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
 	/>
 
 	<AsyncMap
-		v-else-if="hasMapAppearance && featureCollection"
-		:feature-collection="featureCollection"
-		:config="{ viewCoordinates }"
-		@save
+		v-else-if="question.appearances.map"
+		:features="question.currentState.valueOptions"
+		:saved-feature-value="question.currentState.value?.[0]"
+		:disabled="question.currentState.readonly"
+		@save="(properties) => question.selectValue(properties?.value ?? '')"
 	/>
 
 	<FieldListTable

From f1494a695c6d5cee69e10b5dfc99b32cfda773b4 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 29 Sep 2025 20:00:13 +0700
Subject: [PATCH 19/40] Simplified map ref and source get

---
 .../src/components/common/map/MapBlock.vue    |  2 +-
 .../components/common/map/MapProperties.vue   |  1 -
 .../src/components/common/map/useMapBlock.ts  | 42 +++++++++----------
 3 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index d205deca5..83eecafb5 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -30,7 +30,7 @@ const showErrorStyle = inject<ComputedRef<boolean>>(
 const mapHandler = useMapBlock();
 
 onMounted(() => {
-	if (mapElement.value == null || mapHandler == null) {
+	if (!mapElement.value || !mapHandler) {
 		return;
 	}
 
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 0d91a76cc..829a42491 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import IconSVG from '@/components/common/IconSVG.vue';
 import Button from 'primevue/button';
-import { defineEmits, defineProps } from 'vue';
 
 defineProps<{
 	reservedProps: Record<string, string>;
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index ae2cfb837..af0aa8e2a 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -44,15 +44,16 @@ const SELECTED_ID_PROPERTY = 'selectedId';
 export function useMapBlock() {
 	const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
 	const errorMessage = shallowRef<{ title: string; message: string } | undefined>();
-	const mapInstance = ref<Map | undefined>();
+	let mapInstance: Map | undefined;
 	const savedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeatureProperties = computed<FeatureProperties | undefined>(() => {
 		return selectedFeature.value?.getProperties() as FeatureProperties | undefined;
 	});
 
+	const featuresSource = new VectorSource();
 	const featuresVectorLayer = new WebGLVectorLayer({
-		source: new VectorSource(),
+		source: featuresSource,
 		style: [
 			...getUnselectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
 			...getSelectedStyles(FEATURE_ID_PROPERTY, SELECTED_ID_PROPERTY, SAVED_ID_PROPERTY),
@@ -62,27 +63,26 @@ export function useMapBlock() {
 	});
 
 	const initializeMap = (mapContainer: HTMLElement, geoJSON: FeatureCollection): void => {
-		if (mapInstance.value) {
+		if (mapInstance) {
 			return;
 		}
 
-		mapInstance.value = new Map({
+		mapInstance = new Map({
 			target: mapContainer,
 			layers: [new TileLayer({ source: new OSM() }), featuresVectorLayer],
 			view: new View({ center: DEFAULT_VIEW_CENTER, zoom: MIN_ZOOM }),
 			controls: [new Zoom()],
 		});
 
-		mapInstance.value.on('singleclick', (event) => selectFeatureByPosition(event.pixel));
+		mapInstance.on('singleclick', (event) => selectFeatureByPosition(event.pixel));
 		currentState.value = STATES.READY;
 		loadGeometries(geoJSON);
 	};
 
 	const fitToAllFeatures = (): void => {
-		const source = featuresVectorLayer.getSource() as VectorSource | undefined;
-		const extent = source?.getExtent();
+		const extent = featuresSource.getExtent();
 		if (extent) {
-			mapInstance.value?.getView().fit(extent, {
+			mapInstance?.getView().fit(extent, {
 				padding: [50, 50, 50, 50],
 				duration: ANIMATION_TIME,
 				maxZoom: MAX_ZOOM,
@@ -106,7 +106,7 @@ export function useMapBlock() {
 		navigator.geolocation.getCurrentPosition(
 			(position) => {
 				const coords = fromLonLat([position.coords.longitude, position.coords.latitude]);
-				mapInstance.value
+				mapInstance
 					?.getView()
 					.animate({ center: coords, zoom: MAX_ZOOM, duration: ANIMATION_TIME });
 				currentState.value = STATES.READY;
@@ -121,10 +121,10 @@ export function useMapBlock() {
 
 	const centerFeatureLocation = (feature: Feature<GeometryType>): void => {
 		const geometry = feature.getGeometry();
-		const size = mapInstance.value?.getSize();
-		const view = mapInstance.value?.getView();
+		const size = mapInstance?.getSize();
+		const view = mapInstance?.getView();
 
-		if (geometry == null || !size?.length || view == null) {
+		if (!geometry || !size?.length || !view) {
 			return;
 		}
 
@@ -144,18 +144,17 @@ export function useMapBlock() {
 	};
 
 	const loadGeometries = (geoJSON: FeatureCollection): void => {
-		const source = featuresVectorLayer.getSource();
-		if (mapInstance.value == null || source == null) {
+		if (!mapInstance) {
 			return;
 		}
 
 		currentState.value = STATES.LOADING;
 		unselectFeature();
 		discardSavedFeature();
-		source.clear();
+		featuresSource.clear();
 
 		if (!geoJSON.features.length) {
-			mapInstance.value?.getView().animate({
+			mapInstance?.getView().animate({
 				center: DEFAULT_VIEW_CENTER,
 				zoom: MIN_ZOOM,
 				duration: ANIMATION_TIME,
@@ -166,22 +165,22 @@ export function useMapBlock() {
 
 		const features = new GeoJSON().readFeatures(geoJSON, {
 			dataProjection: DEFAULT_GEOJSON_PROJECTION,
-			featureProjection: mapInstance.value.getView().getProjection(),
+			featureProjection: mapInstance.getView().getProjection(),
 		});
 
 		features.forEach((feature) => {
-			if (feature.get(FEATURE_ID_PROPERTY) == null) {
+			if (!feature.get(FEATURE_ID_PROPERTY)) {
 				feature.set(FEATURE_ID_PROPERTY, crypto.randomUUID());
 			}
 		});
-		source.addFeatures(features);
+		featuresSource.addFeatures(features);
 		currentState.value = STATES.READY;
 
 		fitToAllFeatures();
 	};
 
 	const selectFeatureByPosition = (position: Pixel): void => {
-		const hitFeatures = mapInstance.value?.getFeaturesAtPixel(position, {
+		const hitFeatures = mapInstance?.getFeaturesAtPixel(position, {
 			hitTolerance: MAP_HIT_TOLERANCE,
 			layerFilter: (layer) => layer instanceof WebGLVectorLayer,
 		});
@@ -228,8 +227,7 @@ export function useMapBlock() {
 			return;
 		}
 
-		const features = featuresVectorLayer.getSource()?.getFeatures();
-		const featureToSave = features?.find((feature) => {
+		const featureToSave = featuresSource.getFeatures()?.find((feature) => {
 			const { reservedProps } = feature.getProperties() as FeatureProperties;
 			return reservedProps.value === value;
 		}) as Feature<GeometryType>;

From c7657c23c9aba0b708b2cf2a1fbcaa28e4733304 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 29 Sep 2025 23:47:19 +0700
Subject: [PATCH 20/40] Flat and prefixed properties to avoid OL conflicts,
 fixes polygon calculation

---
 .../common/src/fixtures/select/geodataCsv.csv |  17 +-
 .../fixtures/select/geodataGeoJson.geojson    | 240 +++++++++++++-----
 .../src/components/common/map/AsyncMap.vue    |  53 ++--
 .../src/components/common/map/MapBlock.vue    |   7 +-
 .../components/common/map/MapProperties.vue   |  10 +-
 .../src/components/common/map/useMapBlock.ts  |  13 +-
 6 files changed, 234 insertions(+), 106 deletions(-)

diff --git a/packages/common/src/fixtures/select/geodataCsv.csv b/packages/common/src/fixtures/select/geodataCsv.csv
index 98102431b..181afdda9 100644
--- a/packages/common/src/fixtures/select/geodataCsv.csv
+++ b/packages/common/src/fixtures/select/geodataCsv.csv
@@ -1,7 +1,10 @@
-name,label,geometry
-1,Madrid,40.446254412914385 -3.7445467750577563
-2,Warsaw,52.18544754541023 21.1006145352125
-3,Stockholm-Copenhagen-Berlin,59.31284185390564 18.04203801493341; 55.7237702447557 12.59922155107742; 52.48574101841746 13.337427033540052
-4,Prague-Vienna-Budapest,47.485570717616696 19.04921763281365; 48.19954394662233 16.42105774490628; 50.139932923435055 14.417694964430638
-5,London-Leeds-Liverpool-London,53.40903732686215 -2.991905620523312; 51.505094241512666 -0.1321803079139272; 53.8052722823615 -1.5363611594108022; 53.40903732686215 -2.991905620523312
-6,Paris-Basel-Frankfurt-Paris,48.840915452897946 2.3146557958955327; 47.54579786412256 7.63542665300713; 50.10149750150822 8.703168961933983; 48.840915452897946 2.3146557958955327
+name,label,geometry,population_size,num_hospitals
+1,Lisbon,38.7 -9.15,500000,120
+2,Dublin,53.33 -6.25,1200000,200
+3,Edinburgh,55.953251 -3.188267,500000,150
+4,Amsterdam-Brussels-Luxembourg,52.37 4.9; 50.85 4.35; 49.6 6.13,3000000,450
+5,Zurich-Geneva-Basel,47.3667 8.55; 46.2022 6.1457; 47.55839 7.57327,1500000,300
+6,Barcelona-Madrid,41.390205 2.154007; 40.38 -3.7,5000000,600
+7,London-Paris-Amsterdam-London,51.5 -0.12; 48.85 2.35; 52.37 4.9; 51.5 -0.12,20000000,1000
+8,Berlin-Frankfurt-Munich-Berlin,52.52 13.4; 50.11552 8.68417; 48.13743 11.57549; 52.52 13.4,7000000,800
+9,Vienna-Salzburg-Innsbruck-Vienna,48.2 16.37; 47.79941 13.04399; 47.26266 11.39454; 48.2 16.37,3000000,400
diff --git a/packages/common/src/fixtures/select/geodataGeoJson.geojson b/packages/common/src/fixtures/select/geodataGeoJson.geojson
index e89fb6929..ac5da0a89 100644
--- a/packages/common/src/fixtures/select/geodataGeoJson.geojson
+++ b/packages/common/src/fixtures/select/geodataGeoJson.geojson
@@ -3,138 +3,248 @@
   "features": [
     {
       "type": "Feature",
-      "properties": {
-        "title": "Madrid",
-        "id": "1"
-      },
       "geometry": {
+        "type": "Point",
         "coordinates": [
-          -3.7445467750577563,
-          40.446254412914385
-        ],
-        "type": "Point"
+          -73.56,
+          45.52
+        ]
+      },
+      "properties": {
+        "nurses": 19,
+        "doctors": 10,
+        "patients": 390,
+        "id": "fea-07",
+        "title": "Chinatown Medical Center"
       }
     },
     {
       "type": "Feature",
-      "properties": {
-        "title": "Warsaw",
-        "id": "2"
-      },
       "geometry": {
+        "type": "Point",
         "coordinates": [
-          21.100614535212543,
-          52.18544754541023
-        ],
-        "type": "Point"
+          -73.585,
+          45.5
+        ]
+      },
+      "properties": {
+        "nurses": 23,
+        "doctors": 13,
+        "patients": 550,
+        "id": "fea-08",
+        "title": "West End Health Clinic"
       }
     },
     {
       "type": "Feature",
-      "properties": {
-        "title": "Stockholm-Copenhagen-Berlin",
-        "id": "3"
+      "geometry": {
+        "type": "Point",
+        "coordinates": [
+          -73.555,
+          45.485
+        ]
       },
+      "properties": {
+        "nurses": 16,
+        "doctors": 6,
+        "patients": 300,
+        "id": "fea-09",
+        "title": "Verdun Community Clinic"
+      }
+    },
+    {
+      "type": "Feature",
       "geometry": {
+        "type": "LineString",
         "coordinates": [
           [
-            18.04203801493341,
-            59.31284185390564
+            -73.59,
+            45.53
           ],
           [
-            12.59922155107742,
-            55.72377024475574
+            -73.58,
+            45.53
           ],
           [
-            13.337427033540052,
-            52.48574101841746
+            -73.57,
+            45.53
           ]
-        ],
-        "type": "LineString"
+        ]
+      },
+      "properties": {
+        "id": "fea-018",
+        "title": "Canada Goose",
+        "quantities": 4000,
+        "migration_days": 12,
+        "start_date": "2024-09-10",
+        "end_date": "2024-09-22"
       }
     },
     {
       "type": "Feature",
-      "properties": {
-        "title": "Prague-Vienna-Budapest",
-        "id": "4"
-      },
       "geometry": {
+        "type": "LineString",
         "coordinates": [
           [
-            19.04921763281365,
-            47.485570717616696
+            -73.59,
+            45.47
           ],
           [
-            16.42105774490628,
-            48.19954394662233
+            -73.58,
+            45.47
           ],
           [
-            14.417694964430638,
-            50.139932923435055
+            -73.57,
+            45.47
           ]
-        ],
-        "type": "LineString"
+        ]
+      },
+      "properties": {
+        "id": "fea-019",
+        "title": "Snowy Owl",
+        "quantities": 150,
+        "migration_days": 8,
+        "start_date": "2024-11-15",
+        "end_date": "2024-11-23"
       }
     },
     {
       "type": "Feature",
-      "properties": {
-        "title": "London-Leeds-Liverpool-London",
-        "id": "5"
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            -73.6,
+            45.5
+          ],
+          [
+            -73.6,
+            45.51
+          ],
+          [
+            -73.6,
+            45.52
+          ]
+        ]
       },
+      "properties": {
+        "id": "fea-020",
+        "title": "Peregrine Falcon",
+        "quantities": 300,
+        "migration_days": 5,
+        "start_date": "2024-10-01",
+        "end_date": "2024-10-06"
+      }
+    },
+    {
+      "type": "Feature",
       "geometry": {
+        "type": "Polygon",
         "coordinates": [
           [
             [
-              -2.991905620523312,
-              53.40903732686215
+              -73.59,
+              45.54
             ],
             [
-              -0.1321803079139272,
-              51.505094241512666
+              -73.58,
+              45.54
             ],
             [
-              -1.5363611594108022,
-              53.8052722823615
+              -73.58,
+              45.55
             ],
             [
-              -2.991905620523312,
-              53.40903732686215
+              -73.59,
+              45.55
+            ],
+            [
+              -73.59,
+              45.54
             ]
           ]
-        ],
-        "type": "Polygon"
+        ]
+      },
+      "properties": {
+        "id": "fea-021",
+        "title": "Montreal Urban Farm 1",
+        "size": "200 hectares",
+        "harvest_quantity": "400 tons",
+        "harvest_date": "2024-09-05"
       }
     },
     {
       "type": "Feature",
-      "properties": {
-        "title": "Paris-Basel-Frankfurt-Paris",
-        "id": "6"
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              -73.61,
+              45.46
+            ],
+            [
+              -73.6,
+              45.46
+            ],
+            [
+              -73.6,
+              45.47
+            ],
+            [
+              -73.61,
+              45.47
+            ],
+            [
+              -73.61,
+              45.46
+            ]
+          ]
+        ]
       },
+      "properties": {
+        "id": "fea-022",
+        "title": "Montreal Urban Farm 2",
+        "size": "150 hectares",
+        "harvest_quantity": "300 tons",
+        "harvest_date": "2024-10-10"
+      }
+    },
+    {
+      "type": "Feature",
       "geometry": {
+        "type": "Polygon",
         "coordinates": [
           [
             [
-              2.3146557958955327,
-              48.840915452897946
+              -73.54,
+              45.53
             ],
             [
-              7.63542665300713,
-              47.54579786412256
+              -73.53,
+              45.53
             ],
             [
-              8.703168961933983,
-              50.10149750150822
+              -73.53,
+              45.54
             ],
             [
-              2.3146557958955327,
-              48.840915452897946
+              -73.54,
+              45.54
+            ],
+            [
+              -73.54,
+              45.53
             ]
           ]
-        ],
-        "type": "Polygon"
+        ]
+      },
+      "properties": {
+        "id": "fea-023",
+        "title": "Montreal Urban Farm 3",
+        "size": "250 hectares",
+        "harvest_quantity": "500 tons",
+        "harvest_date": "2024-08-15"
       }
     }
   ]
diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index b4a62a088..c15429e13 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -6,20 +6,21 @@
  */
 import type { SelectItem } from '@getodk/xforms-engine';
 import ProgressSpinner from 'primevue/progressspinner';
-import { computed, type DefineComponent, onMounted, shallowRef } from 'vue';
+import { computed, type DefineComponent, onMounted, shallowRef, ref } from 'vue';
 
 type Coordinates = [longitude: number, latitude: number];
 type GeometryType = 'LineString' | 'Point' | 'Polygon';
 
 interface Feature {
 	type: 'Feature';
-	geometry: { type: GeometryType; coordinates: Coordinates | Coordinates[] };
+	geometry: { type: GeometryType; coordinates: Coordinates | Coordinates[] | Coordinates[][] };
 	properties: Record<string, unknown>;
 }
 
 type MapBlockComponent = DefineComponent<{
 	featureCollection: { type: string; features: Feature[] };
 	disabled: boolean;
+	orderedExtraProps: Map<string, Array<[string, string]>>;
 	savedFeatureValue: string | undefined;
 }>;
 
@@ -39,6 +40,7 @@ const STATES = {
 	ERROR: 'error',
 } as const;
 
+const ODK_PROPERTY_PREFIX = 'odk_'; // Avoids conflicts with OpenLayers (for example, geometry).
 const RESERVED_MAP_PROPERTIES = [
 	'itextId',
 	'geometry',
@@ -52,41 +54,43 @@ const RESERVED_MAP_PROPERTIES = [
 const mapComponent = shallowRef<MapBlockComponent | null>(null);
 const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
 
+const orderedExtraPropsMap = ref<Map<string, Array<[string, string]>>>(new Map());
 const featureCollection = computed(() => {
+	orderedExtraPropsMap.value.clear();
 	const features: Feature[] = [];
+
 	props.features?.forEach((option) => {
 		try {
 			const reservedProps: Record<string, string> = {
-				label: option.label?.asString,
-				value: option.value,
+				[ODK_PROPERTY_PREFIX + 'label']: option.label?.asString,
+				[ODK_PROPERTY_PREFIX + 'value']: option.value,
 			};
 			const orderedProps: Array<[string, string]> = [];
 
 			option.properties.forEach(([key, value]) => {
 				if (RESERVED_MAP_PROPERTIES.includes(key)) {
-					reservedProps[key] = value;
+					reservedProps[ODK_PROPERTY_PREFIX + key] = value;
 				} else {
 					orderedProps.push([key, value]);
 				}
 			});
 
-			if (!reservedProps.geometry) {
+			orderedExtraPropsMap.value.set(option.value, orderedProps);
+			const geometry = reservedProps[ODK_PROPERTY_PREFIX + 'geometry'];
+			if (!geometry) {
 				throw new Error('Missing geometry');
 			}
 
-			const coordinates = getGeoJSONCoordinates(reservedProps.geometry);
+			const coordinates = getGeoJSONCoordinates(geometry);
 			if (coordinates.length === 0) {
 				throw new Error('Missing geo points');
 			}
 
-			const geometryType = getGeometryType(coordinates);
+			const type = getGeometryType(coordinates);
 			features.push({
 				type: 'Feature',
-				geometry: {
-					type: geometryType,
-					coordinates: geometryType === 'Point' ? coordinates[0] : coordinates,
-				},
-				properties: { reservedProps, orderedProps },
+				geometry: { type, coordinates: formatCoordsPerType(type, coordinates) },
+				properties: reservedProps,
 			});
 		} catch {
 			// Skip invalid options silently to match Collect behaviour.
@@ -96,7 +100,7 @@ const featureCollection = computed(() => {
 	return { type: 'FeatureCollection', features };
 });
 
-const getGeometryType = (coords: Array<[number, number]>): 'LineString' | 'Point' | 'Polygon' => {
+const getGeometryType = (coords: Array<[number, number]>): GeometryType => {
 	if (coords.length === 1) {
 		return 'Point';
 	}
@@ -107,8 +111,8 @@ const getGeometryType = (coords: Array<[number, number]>): 'LineString' | 'Point
 };
 
 const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
-	return geometry.split(',').map((coord) => {
-		const [lat, lon] = coord.split(/\s+/).map(Number);
+	return geometry.split(';').map((coord) => {
+		const [lat, lon] = coord.trim().split(/\s+/).map(Number);
 
 		const isNullLocation = lat === 0 && lon === 0;
 		const isValidLatitude = lat != null && !Number.isNaN(lat) && Math.abs(lat) <= 90;
@@ -122,6 +126,18 @@ const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
 	});
 };
 
+const formatCoordsPerType = (type: GeometryType, coords: Array<[number, number]>) => {
+	if (type === 'Point') {
+		return coords[0];
+	}
+
+	if (type === 'Polygon') {
+		return [coords];
+	}
+
+	return coords;
+};
+
 const loadMap = async () => {
 	currentState.value = STATES.LOADING;
 
@@ -150,9 +166,7 @@ onMounted(loadMap);
 	<div class="async-map-container">
 		<div v-if="currentState === STATES.ERROR" class="map-error">
 			<!-- TODO: translations -->
-			<p class="map-error-message">
-				Unable to load map
-			</p>
+			<p class="map-error-message">Unable to load map</p>
 
 			<!-- TODO: Uncomment once retry mechanism is implemented.
 				<Button outlined severity="contrast" class="retry-button" @click="loadMap">
@@ -169,6 +183,7 @@ onMounted(loadMap);
 			:is="mapComponent"
 			v-else
 			:feature-collection="featureCollection"
+			:ordered-extra-props="orderedExtraPropsMap"
 			:saved-feature-value="savedFeatureValue"
 			:disabled="disabled"
 			@save="save"
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 83eecafb5..8104408cc 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -15,6 +15,7 @@ import { computed, type ComputedRef, inject, onMounted, onUnmounted, ref, watch
 interface MapBlockProps {
 	featureCollection: FeatureCollection;
 	disabled: boolean;
+	orderedExtraProps: Map<string, Array<[string, string]>>;
 	savedFeatureValue: string | undefined;
 }
 
@@ -70,7 +71,7 @@ const centerFeatureLocation = () => {
 
 const saveSelection = () => {
 	mapHandler?.saveFeature();
-	emit('save', mapHandler.savedFeature.value?.getProperties()?.reservedProps);
+	emit('save', mapHandler.savedFeature.value?.getProperties());
 };
 
 const discardSavedFeature = () => {
@@ -104,8 +105,8 @@ const discardSavedFeature = () => {
 
 			<MapProperties
 				v-if="mapHandler?.selectedFeatureProperties.value != null"
-				:reserved-props="mapHandler?.selectedFeatureProperties.value.reservedProps"
-				:ordered-props="mapHandler?.selectedFeatureProperties.value.orderedProps"
+				:reserved-props="mapHandler?.selectedFeatureProperties.value"
+				:ordered-extra-props="orderedExtraProps"
 				:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
 				:disabled="disabled"
 				@close="mapHandler.unselectFeature"
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 829a42491..bd52dd80d 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
 import IconSVG from '@/components/common/IconSVG.vue';
 import Button from 'primevue/button';
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
 	reservedProps: Record<string, string>;
-	orderedProps: Array<[string, string]>;
+	orderedExtraProps: Map<string, Array<[string, string]>>;
 	hasSavedFeature: boolean;
 	disabled: boolean;
 }>();
 
 const emit = defineEmits(['close', 'save', 'discard']);
+const orderedProps = computed(() => {
+	return props.orderedExtraProps.get(props.reservedProps.odk_value) ?? [];
+});
 </script>
 
 <template>
 	<div class="map-properties">
 		<div class="map-properties-header">
-			<strong>{{ reservedProps.label ?? reservedProps.geometry }}</strong>
+			<strong>{{ reservedProps.odk_label ?? reservedProps.odk_geometry }}</strong>
 			<button class="close-icon" @click="emit('close')">
 				<IconSVG name="mdiClose" />
 			</button>
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index af0aa8e2a..6a7f09791 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -18,10 +18,6 @@ import VectorSource from 'ol/source/Vector';
 import { computed, ref, shallowRef, watch } from 'vue';
 
 type GeometryType = LineString | Point | Polygon;
-interface FeatureProperties {
-	reservedProps: Record<string, string>;
-	orderedProps: Array<[string, string]>;
-}
 
 const STATES = {
 	LOADING: 'loading',
@@ -37,7 +33,7 @@ const GEOLOCATION_TIMEOUT_MS = 10 * 1000;
 const ANIMATION_TIME = 1000;
 const SMALL_DEVICE_WIDTH = 576;
 const MAP_HIT_TOLERANCE = 5;
-const FEATURE_ID_PROPERTY = 'feature_id';
+const FEATURE_ID_PROPERTY = 'odk_feature_id';
 const SAVED_ID_PROPERTY = 'savedId';
 const SELECTED_ID_PROPERTY = 'selectedId';
 
@@ -47,8 +43,8 @@ export function useMapBlock() {
 	let mapInstance: Map | undefined;
 	const savedFeature = ref<Feature<GeometryType> | undefined>();
 	const selectedFeature = ref<Feature<GeometryType> | undefined>();
-	const selectedFeatureProperties = computed<FeatureProperties | undefined>(() => {
-		return selectedFeature.value?.getProperties() as FeatureProperties | undefined;
+	const selectedFeatureProperties = computed(() => {
+		return selectedFeature.value?.getProperties();
 	});
 
 	const featuresSource = new VectorSource();
@@ -228,8 +224,7 @@ export function useMapBlock() {
 		}
 
 		const featureToSave = featuresSource.getFeatures()?.find((feature) => {
-			const { reservedProps } = feature.getProperties() as FeatureProperties;
-			return reservedProps.value === value;
+			return feature.getProperties()?.odk_value === value;
 		}) as Feature<GeometryType>;
 
 		if (!featureToSave) {

From 07d288d7f2711c7427fd594f57ccd0e2d9cc419c Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 01:46:18 +0700
Subject: [PATCH 21/40] fixes click binding for disable question

---
 .../select-one-from-map-external-files.xml    | 36 +++++++++++++++++--
 .../src/components/common/map/MapBlock.vue    |  7 ++++
 .../src/components/common/map/useMapBlock.ts  | 14 ++++++--
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/packages/common/src/fixtures/select/select-one-from-map-external-files.xml b/packages/common/src/fixtures/select/select-one-from-map-external-files.xml
index c5a4a83fe..731e9337a 100644
--- a/packages/common/src/fixtures/select/select-one-from-map-external-files.xml
+++ b/packages/common/src/fixtures/select/select-one-from-map-external-files.xml
@@ -8,7 +8,9 @@
     <model odk:xforms-version="1.0.0">
       <instance>
         <data id="select-one-from-map-external-files">
+          <show_q1/>
           <q1/>
+          <disable_q2/>
           <q2/>
           <q3/>
           <meta>
@@ -60,13 +62,28 @@
           </item>
         </root>
       </instance>
-      <bind nodeset="/data/q1" type="string"/>
-      <bind nodeset="/data/q2" type="string"/>
+      <bind nodeset="/data/show_q1" type="string"/>
+      <bind nodeset="/data/q1" type="string" relevant="selected(/data/show_q1, 'yes')"/>
+      <bind nodeset="/data/disable_q2" type="string"/>
+      <bind nodeset="/data/q2" type="string" readonly="selected(/data/disable_q2, 'yes')"/>
       <bind nodeset="/data/q3" type="string"/>
       <bind nodeset="/data/meta/instanceID" type="string" readonly="true()" jr:preload="uid"/>
     </model>
   </h:head>
+
   <h:body>
+    <select1 ref="/data/show_q1">
+      <label>Do you want to show the select with geojson file?</label>
+      <item>
+        <value>yes</value>
+        <label>Yes</label>
+      </item>
+      <item>
+        <value>no</value>
+        <label>No</label>
+      </item>
+    </select1>
+
     <select1 ref="/data/q1" appearance="map">
       <label>Select one from geojson file</label>
       <itemset nodeset="instance('geodataGeoJson')/root/item">
@@ -74,6 +91,20 @@
         <label ref="title"/>
       </itemset>
     </select1>
+
+
+    <select1 ref="/data/disable_q2">
+      <label>Do you want to disable the select with csv file?</label>
+      <item>
+        <value>yes</value>
+        <label>Yes</label>
+      </item>
+      <item>
+        <value>no</value>
+        <label>No</label>
+      </item>
+    </select1>
+
     <select1 ref="/data/q2" appearance="map">
       <label>Select one from csv file</label>
       <itemset nodeset="instance('geodataCsv')/root/item">
@@ -81,6 +112,7 @@
         <label ref="label"/>
       </itemset>
     </select1>
+
     <select1 ref="/data/q3" appearance="map">
       <label>Select one from xml file</label>
       <itemset nodeset="instance('geodataXml')/root/item[true()]">
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 8104408cc..c215c693b 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -36,6 +36,7 @@ onMounted(() => {
 	}
 
 	mapHandler.initializeMap(mapElement.value, props.featureCollection);
+	mapHandler.toggleClickBinding(!props.disabled);
 	document.addEventListener('keydown', handleEscapeKey);
 });
 
@@ -57,6 +58,12 @@ watch(
 	{ deep: true, immediate: true }
 );
 
+watch(
+	() => props.disabled,
+	(newValue) => mapHandler?.toggleClickBinding(!newValue),
+	{ deep: true, immediate: true }
+);
+
 const handleEscapeKey = (event: KeyboardEvent) => {
 	if (event.key === 'Escape' && isFullScreen.value) {
 		isFullScreen.value = false;
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 6a7f09791..0e937c1b6 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -4,7 +4,7 @@ import {
 	getUnselectedStyles,
 } from '@/components/common/map/map-styles.ts';
 import type { FeatureCollection } from 'geojson';
-import { Map, View } from 'ol';
+import { Map, MapBrowserEvent, View } from 'ol';
 import { Zoom } from 'ol/control';
 import Feature from 'ol/Feature';
 import GeoJSON from 'ol/format/GeoJSON';
@@ -70,11 +70,20 @@ export function useMapBlock() {
 			controls: [new Zoom()],
 		});
 
-		mapInstance.on('singleclick', (event) => selectFeatureByPosition(event.pixel));
 		currentState.value = STATES.READY;
 		loadGeometries(geoJSON);
 	};
 
+	const handleClick = (event: MapBrowserEvent) => selectFeatureByPosition(event.pixel);
+
+	const toggleClickBinding = (bindClick: boolean) => {
+		mapInstance?.un('singleclick', handleClick);
+
+		if (bindClick) {
+			mapInstance?.on('singleclick', handleClick);
+		}
+	};
+
 	const fitToAllFeatures = (): void => {
 		const extent = featuresSource.getExtent();
 		if (extent) {
@@ -255,6 +264,7 @@ export function useMapBlock() {
 		initializeMap,
 		loadGeometries,
 		errorMessage,
+		toggleClickBinding,
 
 		centerCurrentLocation,
 		centerFeatureLocation,

From 40b9ea4fdeb7b13d7f30be1be509f5125e317d1e Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 02:03:30 +0700
Subject: [PATCH 22/40] fixes lint

---
 packages/web-forms/src/components/common/map/AsyncMap.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index c15429e13..61623c807 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -166,7 +166,9 @@ onMounted(loadMap);
 	<div class="async-map-container">
 		<div v-if="currentState === STATES.ERROR" class="map-error">
 			<!-- TODO: translations -->
-			<p class="map-error-message">Unable to load map</p>
+			<p class="map-error-message">
+				Unable to load map
+			</p>
 
 			<!-- TODO: Uncomment once retry mechanism is implemented.
 				<Button outlined severity="contrast" class="retry-button" @click="loadMap">

From d9441293dbe9735d1a96bc15b497489785cf412d Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 18:40:29 +0700
Subject: [PATCH 23/40] Feedback for async map and properties components

---
 .../src/components/common/map/AsyncMap.vue    | 120 +++++++++---------
 .../components/common/map/MapProperties.vue   |  25 +++-
 2 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 61623c807..82ce026f1 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -9,18 +9,22 @@ import ProgressSpinner from 'primevue/progressspinner';
 import { computed, type DefineComponent, onMounted, shallowRef, ref } from 'vue';
 
 type Coordinates = [longitude: number, latitude: number];
-type GeometryType = 'LineString' | 'Point' | 'Polygon';
+
+interface Geometry {
+	type: 'LineString' | 'Point' | 'Polygon';
+	coordinates: Coordinates | Coordinates[] | Coordinates[][];
+}
 
 interface Feature {
 	type: 'Feature';
-	geometry: { type: GeometryType; coordinates: Coordinates | Coordinates[] | Coordinates[][] };
-	properties: Record<string, unknown>;
+	geometry: Geometry;
+	properties: Record<string, string>;
 }
 
 type MapBlockComponent = DefineComponent<{
 	featureCollection: { type: string; features: Feature[] };
 	disabled: boolean;
-	orderedExtraProps: Map<string, Array<[string, string]>>;
+	orderedExtraProps: Map<string, Array<[key: string, value: string]>>;
 	savedFeatureValue: string | undefined;
 }>;
 
@@ -40,7 +44,7 @@ const STATES = {
 	ERROR: 'error',
 } as const;
 
-const ODK_PROPERTY_PREFIX = 'odk_'; // Avoids conflicts with OpenLayers (for example, geometry).
+const PROPERTY_PREFIX = 'odk_'; // Avoids conflicts with OpenLayers (for example, geometry).
 const RESERVED_MAP_PROPERTIES = [
 	'itextId',
 	'geometry',
@@ -53,65 +57,56 @@ const RESERVED_MAP_PROPERTIES = [
 
 const mapComponent = shallowRef<MapBlockComponent | null>(null);
 const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
+const orderedExtraPropsMap = ref<Map<string, Array<[key: string, value: string]>>>(new Map());
 
-const orderedExtraPropsMap = ref<Map<string, Array<[string, string]>>>(new Map());
 const featureCollection = computed(() => {
 	orderedExtraPropsMap.value.clear();
 	const features: Feature[] = [];
 
 	props.features?.forEach((option) => {
-		try {
-			const reservedProps: Record<string, string> = {
-				[ODK_PROPERTY_PREFIX + 'label']: option.label?.asString,
-				[ODK_PROPERTY_PREFIX + 'value']: option.value,
-			};
-			const orderedProps: Array<[string, string]> = [];
-
-			option.properties.forEach(([key, value]) => {
-				if (RESERVED_MAP_PROPERTIES.includes(key)) {
-					reservedProps[ODK_PROPERTY_PREFIX + key] = value;
-				} else {
-					orderedProps.push([key, value]);
-				}
-			});
-
-			orderedExtraPropsMap.value.set(option.value, orderedProps);
-			const geometry = reservedProps[ODK_PROPERTY_PREFIX + 'geometry'];
-			if (!geometry) {
-				throw new Error('Missing geometry');
+		const orderedProps: Array<[string, string]> = [];
+		const reservedProps: Record<string, string> = {
+			[PROPERTY_PREFIX + 'label']: option.label?.asString,
+			[PROPERTY_PREFIX + 'value']: option.value,
+		};
+
+		option.properties.forEach(([key, value]) => {
+			if (RESERVED_MAP_PROPERTIES.includes(key)) {
+				reservedProps[PROPERTY_PREFIX + key] = value.trim();
+			} else {
+				orderedProps.push([key, value.trim()]);
 			}
+		});
 
-			const coordinates = getGeoJSONCoordinates(geometry);
-			if (coordinates.length === 0) {
-				throw new Error('Missing geo points');
-			}
+		orderedExtraPropsMap.value.set(option.value, orderedProps);
 
-			const type = getGeometryType(coordinates);
-			features.push({
-				type: 'Feature',
-				geometry: { type, coordinates: formatCoordsPerType(type, coordinates) },
-				properties: reservedProps,
-			});
-		} catch {
-			// Skip invalid options silently to match Collect behaviour.
+		const geometry = reservedProps[PROPERTY_PREFIX + 'geometry'];
+		if (!geometry?.length) {
+			// eslint-disable-next-line no-console -- Skip silently to match Collect behaviour.
+			console.warn(`Missing or empty geometry for option: ${option.value}`);
+			return;
 		}
+
+		const geoJSONCoords = getGeoJSONCoordinates(geometry);
+		if (!geoJSONCoords.length) {
+			// eslint-disable-next-line no-console -- Skip silently to match Collect behaviour.
+			console.warn(`Missing geo points for option: ${option.value}`);
+			return;
+		}
+
+		features.push({
+			type: 'Feature',
+			geometry: getGeoJSONGeometry(geoJSONCoords),
+			properties: reservedProps,
+		});
 	});
 
 	return { type: 'FeatureCollection', features };
 });
 
-const getGeometryType = (coords: Array<[number, number]>): GeometryType => {
-	if (coords.length === 1) {
-		return 'Point';
-	}
-
-	const first = coords[0];
-	const last = coords[coords.length - 1];
-	return first[0] === last[0] && first[1] === last[1] ? 'Polygon' : 'LineString';
-};
-
-const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
-	return geometry.split(';').map((coord) => {
+const getGeoJSONCoordinates = (geometry: string) => {
+	const coordinates: Coordinates[] = [];
+	geometry.split(';').forEach((coord) => {
 		const [lat, lon] = coord.trim().split(/\s+/).map(Number);
 
 		const isNullLocation = lat === 0 && lon === 0;
@@ -119,23 +114,30 @@ const getGeoJSONCoordinates = (geometry: string): Array<[number, number]> => {
 		const isValidLongitude = lon != null && !Number.isNaN(lon) && Math.abs(lon) <= 180;
 
 		if (isNullLocation || !isValidLatitude || !isValidLongitude) {
-			throw new Error('Invalid geo point coordinates');
+			// eslint-disable-next-line no-console -- Skip silently to match Collect behaviour.
+			console.warn(`Invalid geo point coordinates: ${geometry}`);
+			return;
 		}
 
-		return [lon, lat];
+		coordinates.push([lon, lat]);
 	});
+
+	return coordinates;
 };
 
-const formatCoordsPerType = (type: GeometryType, coords: Array<[number, number]>) => {
-	if (type === 'Point') {
-		return coords[0];
+const getGeoJSONGeometry = (coords: Coordinates[]): Geometry => {
+	if (coords.length === 1) {
+		return { type: 'Point', coordinates: coords[0] };
 	}
 
-	if (type === 'Polygon') {
-		return [coords];
+	const [firstLongitude, firstLatitude] = coords[0];
+	const [lastLongitude, lastLatitude] = coords[coords.length - 1];
+
+	if (firstLongitude === lastLongitude && firstLatitude === lastLatitude) {
+		return { type: 'Polygon', coordinates: [coords] };
 	}
 
-	return coords;
+	return { type: 'LineString', coordinates: coords };
 };
 
 const loadMap = async () => {
@@ -166,9 +168,7 @@ onMounted(loadMap);
 	<div class="async-map-container">
 		<div v-if="currentState === STATES.ERROR" class="map-error">
 			<!-- TODO: translations -->
-			<p class="map-error-message">
-				Unable to load map
-			</p>
+			<p class="map-error-message">Unable to load map</p>
 
 			<!-- TODO: Uncomment once retry mechanism is implemented.
 				<Button outlined severity="contrast" class="retry-button" @click="loadMap">
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index bd52dd80d..2953685a0 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 const props = defineProps<{
 	reservedProps: Record<string, string>;
-	orderedExtraProps: Map<string, Array<[string, string]>>;
+	orderedExtraProps: Map<string, Array<[key: string, value: string]>>;
 	hasSavedFeature: boolean;
 	disabled: boolean;
 }>();
@@ -26,9 +26,9 @@ const orderedProps = computed(() => {
 		</div>
 
 		<div class="map-properties-content">
-			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
-				{{ key }}: {{ value }}
-			</div>
+			<dl v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
+				<dt>{{ key }}</dt><dd>{{ value }}</dd>
+			</dl>
 		</div>
 
 		<div class="map-properties-footer">
@@ -59,7 +59,7 @@ const orderedProps = computed(() => {
 	position: absolute;
 	top: var(--odk-map-properties-spacing-md);
 	left: var(--odk-map-properties-spacing-md);
-	padding: var(--odk-map-properties-spacing-lg) var(--odk-map-properties-spacing-md);
+	padding: var(--odk-map-properties-spacing-lg);
 	border: 1px solid var(--odk-border-color);
 	border-radius: var(--odk-radius);
 	display: flex;
@@ -86,7 +86,7 @@ const orderedProps = computed(() => {
 
 	.close-icon {
 		cursor: pointer;
-		margin-top: -15px;
+		margin-top: -12px;
 		padding: 5px 0;
 		margin-right: -3px;
 	}
@@ -96,8 +96,21 @@ const orderedProps = computed(() => {
 	overflow: auto;
 
 	.property-line {
+		display: flex;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+		gap: 5px;
 		padding: 15px 0;
 
+		dt,
+		dd {
+			margin: 0;
+		}
+
+		dt:after {
+			content: ':';
+		}
+
 		&:not(:last-child) {
 			border-bottom: 1px solid var(--odk-border-color);
 		}

From 8b9db70ff73a727d34451fa770aa73855ee19d17 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 20:57:21 +0700
Subject: [PATCH 24/40] Feedback for useMapBlock

---
 .../src/components/common/map/MapBlock.vue    |  8 +-
 .../src/components/common/map/useMapBlock.ts  | 88 +++++++++++--------
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index c215c693b..9cba7138c 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -107,16 +107,16 @@ const discardSavedFeature = () => {
 			<MapStatusBar
 				:has-saved-feature="mapHandler?.savedFeature.value != null"
 				class="map-status-bar-component"
-				@view-details="mapHandler?.selectFeature(mapHandler?.savedFeature.value)"
+				@view-details="mapHandler?.selectSavedFeature()"
 			/>
 
 			<MapProperties
 				v-if="mapHandler?.selectedFeatureProperties.value != null"
-				:reserved-props="mapHandler?.selectedFeatureProperties.value"
+				:reserved-props="mapHandler.selectedFeatureProperties.value"
 				:ordered-extra-props="orderedExtraProps"
-				:has-saved-feature="mapHandler?.isSelectedFeatureSaved()"
+				:has-saved-feature="mapHandler.isSelectedFeatureSaved()"
 				:disabled="disabled"
-				@close="mapHandler.unselectFeature"
+				@close="mapHandler.unselectFeature()"
 				@discard="discardSavedFeature"
 				@save="saveSelection"
 			/>
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 0e937c1b6..7efe453e1 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -70,17 +70,33 @@ export function useMapBlock() {
 			controls: [new Zoom()],
 		});
 
+		setCursorPointer();
 		currentState.value = STATES.READY;
 		loadGeometries(geoJSON);
 	};
 
+	const setCursorPointer = () => {
+		mapInstance?.on('pointermove', (event: MapBrowserEvent) => {
+			if (event.dragging || !mapInstance) {
+				return;
+			}
+
+			const hit = mapInstance.hasFeatureAtPixel(event.pixel, {
+				hitTolerance: MAP_HIT_TOLERANCE,
+				layerFilter: (layer) => layer instanceof WebGLVectorLayer,
+			});
+
+			mapInstance.getTargetElement().style.cursor = hit ? 'pointer' : '';
+		});
+	};
+
 	const handleClick = (event: MapBrowserEvent) => selectFeatureByPosition(event.pixel);
 
 	const toggleClickBinding = (bindClick: boolean) => {
-		mapInstance?.un('singleclick', handleClick);
+		mapInstance?.un('click', handleClick);
 
 		if (bindClick) {
-			mapInstance?.on('singleclick', handleClick);
+			mapInstance?.on('click', handleClick);
 		}
 	};
 
@@ -154,8 +170,8 @@ export function useMapBlock() {
 		}
 
 		currentState.value = STATES.LOADING;
-		unselectFeature();
-		discardSavedFeature();
+		selectFeature(undefined);
+		saveFeature(undefined);
 		featuresSource.clear();
 
 		if (!geoJSON.features.length) {
@@ -197,35 +213,9 @@ export function useMapBlock() {
 		selectFeature(featureToSelect);
 	};
 
-	const selectFeature = (feature: Feature<GeometryType> | undefined): void => {
-		selectedFeature.value = feature;
-
-		featuresVectorLayer.updateStyleVariables({
-			[SELECTED_ID_PROPERTY]: (selectedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '',
-		});
-
-		if (selectedFeature.value != null) {
-			centerFeatureLocation(selectedFeature.value);
-		}
-	};
-
-	const unselectFeature = (): void => {
-		selectedFeature.value = undefined;
-		featuresVectorLayer.updateStyleVariables({ [SELECTED_ID_PROPERTY]: '' });
-	};
-
-	const saveFeature = (feature: Feature<GeometryType> | undefined): void => {
-		savedFeature.value = feature;
-		const savedFeatureId = (savedFeature.value?.get(FEATURE_ID_PROPERTY) as string) ?? '';
-		featuresVectorLayer.updateStyleVariables({
-			[SAVED_ID_PROPERTY]: savedFeatureId,
-		});
-	};
+	const selectFeature = (feature?: Feature<GeometryType>) => (selectedFeature.value = feature);
 
-	const discardSavedFeature = (): void => {
-		savedFeature.value = undefined;
-		featuresVectorLayer.updateStyleVariables({ [SAVED_ID_PROPERTY]: '' });
-	};
+	const saveFeature = (feature?: Feature<GeometryType>) => (savedFeature.value = feature);
 
 	const setSavedByValueProp = (value: string | undefined): void => {
 		if (!value?.length) {
@@ -252,14 +242,38 @@ export function useMapBlock() {
 
 	watch(
 		() => currentState.value,
-		() => {
-			if (currentState.value !== STATES.ERROR) {
+		(newState) => {
+			if (newState !== STATES.ERROR) {
 				errorMessage.value = undefined;
 			}
 		},
 		{ immediate: true }
 	);
 
+	watch(
+		() => selectedFeature.value,
+		(newSelectedFeature) => {
+			featuresVectorLayer.updateStyleVariables({
+				[SELECTED_ID_PROPERTY]: (newSelectedFeature?.get(FEATURE_ID_PROPERTY) as string) ?? '',
+			});
+
+			if (newSelectedFeature != null) {
+				centerFeatureLocation(newSelectedFeature);
+			}
+		},
+		{ immediate: true }
+	);
+
+	watch(
+		() => savedFeature.value,
+		(newSavedFeature) => {
+			featuresVectorLayer.updateStyleVariables({
+				[SAVED_ID_PROPERTY]: (newSavedFeature?.get(FEATURE_ID_PROPERTY) as string) ?? '',
+			});
+		},
+		{ immediate: true }
+	);
+
 	return {
 		initializeMap,
 		loadGeometries,
@@ -270,13 +284,13 @@ export function useMapBlock() {
 		centerFeatureLocation,
 
 		savedFeature,
-		discardSavedFeature,
+		discardSavedFeature: () => saveFeature(undefined),
 		saveFeature: () => saveFeature(selectedFeature.value),
 		setSavedByValueProp,
 
 		selectedFeatureProperties,
-		selectFeature,
+		selectSavedFeature: () => selectFeature(savedFeature.value),
+		unselectFeature: () => selectFeature(undefined),
 		isSelectedFeatureSaved,
-		unselectFeature,
 	};
 }

From 4ec6fbc0843197ae1bab45d465644cb0186d4ad4 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 22:50:08 +0700
Subject: [PATCH 25/40] Feedback for line's hit tolerance

---
 .../src/components/common/map/map-styles.ts   | 122 +++++++-----------
 1 file changed, 49 insertions(+), 73 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/map-styles.ts b/packages/web-forms/src/components/common/map/map-styles.ts
index 003059cb8..fb36b8908 100644
--- a/packages/web-forms/src/components/common/map/map-styles.ts
+++ b/packages/web-forms/src/components/common/map/map-styles.ts
@@ -1,21 +1,18 @@
 import type { Rule } from 'ol/style/flat';
 import mapLocationIcon from '@/assets/images/map-location.svg';
 
+const DEFAULT_STROKE_COLOR = '#3E9FCC';
+
 const DEFAULT_POINT_STYLE = {
 	'icon-src': mapLocationIcon,
 	'icon-width': 40,
 	'icon-height': 40,
 };
 
-const DEFAULT_LINE_STYLE = {
-	'stroke-width': 6,
-	'stroke-color': '#3E9FCC',
-};
-
-const DEFAULT_POLYGON_STYLE = {
-	'fill-color': 'rgba(233, 248, 255, 0.8)',
+const DEFAULT_FEATURE_STYLE = {
 	'stroke-width': 4,
-	'stroke-color': '#3E9FCC',
+	'stroke-color': DEFAULT_STROKE_COLOR,
+	'fill-color': 'rgba(233, 248, 255, 0.8)',
 };
 
 const SCALE_POINT_STYLE = {
@@ -24,47 +21,48 @@ const SCALE_POINT_STYLE = {
 	'icon-height': 50,
 };
 
-const SCALE_LINE_STYLE = {
-	'stroke-width': 8,
-	'stroke-color': '#3E9FCC',
-};
-
-const SCALE_POLYGON_STYLE = {
+const SCALE_FEATURE_STYLE = {
 	'stroke-width': 6,
 };
 
+const OUTLINE_STROKE_WIDTH = 20;
+
+const BLUE_GLOW_COLOR = 'rgba(148, 224, 237, 0.7)';
+
 const BLUE_GLOW_POINT_STYLE = {
 	'circle-radius': 30,
-	'circle-fill-color': 'rgba(148, 224, 237, 0.7)',
+	'circle-fill-color': BLUE_GLOW_COLOR,
 	'circle-displacement': [0, 0],
 };
 
-const BLUE_GLOW_LINE_STYLE = {
-	'stroke-width': 20,
-	'stroke-color': 'rgba(148, 224, 237, 0.7)',
-};
-
-const BLUE_GLOW_POLYGON_STYLE = {
-	'stroke-width': 20,
-	'stroke-color': 'rgba(148, 224, 237, 0.7)',
+const BLUE_GLOW_FEATURE_STYLE = {
+	'stroke-width': OUTLINE_STROKE_WIDTH,
+	'stroke-color': BLUE_GLOW_COLOR,
 	'fill-color': 'transparent',
 };
 
+const GREEN_GLOW_COLOR = 'rgba(34, 197, 94, 0.6)';
+
 const GREEN_GLOW_POINT_STYLE = {
 	'circle-radius': 30,
-	'circle-fill-color': 'rgba(34, 197, 94, 0.6)',
+	'circle-fill-color': GREEN_GLOW_COLOR,
 	'circle-displacement': [0, 0],
 };
 
-const GREEN_GLOW_LINE_STYLE = {
-	'stroke-width': 20,
-	'stroke-color': 'rgba(34, 197, 94, 0.6)',
+const GREEN_GLOW_FEATURE_STYLE = {
+	'stroke-width': OUTLINE_STROKE_WIDTH,
+	'stroke-color': GREEN_GLOW_COLOR,
+	'fill-color': 'transparent',
 };
 
-const GREEN_GLOW_POLYGON_STYLE = {
-	'stroke-width': 20,
-	'stroke-color': 'rgba(34, 197, 94, 0.6)',
-	'fill-color': 'transparent',
+// Increases the clickable area of the Line feature.
+const LINE_HIT_TOLERANCE = {
+	'stroke-width': OUTLINE_STROKE_WIDTH,
+	'stroke-color': 'rgba( 255, 255, 255, 0.1)',
+};
+
+const matchGeometryType = (...types: string[]) => {
+	return ['all', ['in', ['geometry-type'], ['literal', types]]];
 };
 
 export function getUnselectedStyles(
@@ -72,27 +70,23 @@ export function getUnselectedStyles(
 	selectedPropName: string,
 	savedPropName: string
 ): Rule[] {
-	const makeFilter = (type: string) => {
-		return [
-			'all',
-			['match', ['geometry-type'], type, true, false],
-			['!=', ['get', featureIdProp], ['var', selectedPropName]],
-			['!=', ['get', featureIdProp], ['var', savedPropName]],
-		];
-	};
+	const filters = [
+		['!=', ['get', featureIdProp], ['var', selectedPropName]],
+		['!=', ['get', featureIdProp], ['var', savedPropName]],
+	];
 
 	return [
 		{
-			filter: makeFilter('Point'),
+			filter: [...matchGeometryType('Point'), ...filters],
 			style: DEFAULT_POINT_STYLE,
 		},
 		{
-			filter: makeFilter('LineString'),
-			style: DEFAULT_LINE_STYLE,
+			filter: [...matchGeometryType('LineString', 'Polygon'), ...filters],
+			style: DEFAULT_FEATURE_STYLE,
 		},
 		{
-			filter: makeFilter('Polygon'),
-			style: DEFAULT_POLYGON_STYLE,
+			filter: [...matchGeometryType('LineString'), ...filters],
+			style: LINE_HIT_TOLERANCE,
 		},
 	];
 }
@@ -102,52 +96,34 @@ export function getSelectedStyles(
 	selectedPropName: string,
 	savedPropName: string
 ): Rule[] {
-	const makeFilter = (type: string) => {
-		return [
-			'all',
-			['match', ['geometry-type'], type, true, false],
-			['==', ['get', featureIdProp], ['var', selectedPropName]],
-			['!=', ['get', featureIdProp], ['var', savedPropName]],
-		];
-	};
+	const filters = [
+		['==', ['get', featureIdProp], ['var', selectedPropName]],
+		['!=', ['get', featureIdProp], ['var', savedPropName]],
+	];
 
 	return [
 		{
-			filter: makeFilter('Point'),
+			filter: [...matchGeometryType('Point'), ...filters],
 			style: [BLUE_GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
 		},
 		{
-			filter: makeFilter('LineString'),
-			style: [BLUE_GLOW_LINE_STYLE, DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
-		},
-		{
-			filter: makeFilter('Polygon'),
-			style: [BLUE_GLOW_POLYGON_STYLE, DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
+			filter: [...matchGeometryType('LineString', 'Polygon'), ...filters],
+			style: [BLUE_GLOW_FEATURE_STYLE, DEFAULT_FEATURE_STYLE, SCALE_FEATURE_STYLE],
 		},
 	];
 }
 
 export function getSavedStyles(featureIdProp: string, savedPropName: string): Rule[] {
-	const makeFilter = (type: string) => {
-		return [
-			'all',
-			['match', ['geometry-type'], type, true, false],
-			['==', ['get', featureIdProp], ['var', savedPropName]],
-		];
-	};
+	const filter = ['==', ['get', featureIdProp], ['var', savedPropName]];
 
 	return [
 		{
-			filter: makeFilter('Point'),
+			filter: [...matchGeometryType('Point'), filter],
 			style: [GREEN_GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
 		},
 		{
-			filter: makeFilter('LineString'),
-			style: [GREEN_GLOW_LINE_STYLE, DEFAULT_LINE_STYLE, SCALE_LINE_STYLE],
-		},
-		{
-			filter: makeFilter('Polygon'),
-			style: [GREEN_GLOW_POLYGON_STYLE, DEFAULT_POLYGON_STYLE, SCALE_POLYGON_STYLE],
+			filter: [...matchGeometryType('LineString', 'Polygon'), filter],
+			style: [GREEN_GLOW_FEATURE_STYLE, DEFAULT_FEATURE_STYLE, SCALE_FEATURE_STYLE],
 		},
 	];
 }

From 6ecc1a0aa3dcdc81dcb0c98a2b2ee8de570eefdb Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 22:50:13 +0700
Subject: [PATCH 26/40] Feedback for line's hit tolerance

---
 packages/web-forms/src/components/common/map/useMapBlock.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 7efe453e1..202675593 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -32,7 +32,6 @@ const MIN_ZOOM = 2;
 const GEOLOCATION_TIMEOUT_MS = 10 * 1000;
 const ANIMATION_TIME = 1000;
 const SMALL_DEVICE_WIDTH = 576;
-const MAP_HIT_TOLERANCE = 5;
 const FEATURE_ID_PROPERTY = 'odk_feature_id';
 const SAVED_ID_PROPERTY = 'savedId';
 const SELECTED_ID_PROPERTY = 'selectedId';
@@ -82,7 +81,6 @@ export function useMapBlock() {
 			}
 
 			const hit = mapInstance.hasFeatureAtPixel(event.pixel, {
-				hitTolerance: MAP_HIT_TOLERANCE,
 				layerFilter: (layer) => layer instanceof WebGLVectorLayer,
 			});
 
@@ -202,7 +200,6 @@ export function useMapBlock() {
 
 	const selectFeatureByPosition = (position: Pixel): void => {
 		const hitFeatures = mapInstance?.getFeaturesAtPixel(position, {
-			hitTolerance: MAP_HIT_TOLERANCE,
 			layerFilter: (layer) => layer instanceof WebGLVectorLayer,
 		});
 

From acb419fb15bfbf583c1b9f0da29161d4529ea7b6 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Tue, 30 Sep 2025 23:19:49 +0700
Subject: [PATCH 27/40] changeset

---
 .changeset/four-steaks-try.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/four-steaks-try.md

diff --git a/.changeset/four-steaks-try.md b/.changeset/four-steaks-try.md
new file mode 100644
index 000000000..aab9abe7f
--- /dev/null
+++ b/.changeset/four-steaks-try.md
@@ -0,0 +1,8 @@
+---
+'@getodk/xforms-engine': minor
+'@getodk/web-forms': minor
+'@getodk/scenario': patch
+'@getodk/common': patch
+---
+
+Support select one from map

From 0705a5dda7491d11b5c3458e07b99b0b13b842ba Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 00:21:51 +0700
Subject: [PATCH 28/40] Improves style filters

---
 .../src/components/common/map/map-styles.ts    | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/map-styles.ts b/packages/web-forms/src/components/common/map/map-styles.ts
index fb36b8908..e166dede3 100644
--- a/packages/web-forms/src/components/common/map/map-styles.ts
+++ b/packages/web-forms/src/components/common/map/map-styles.ts
@@ -61,8 +61,8 @@ const LINE_HIT_TOLERANCE = {
 	'stroke-color': 'rgba( 255, 255, 255, 0.1)',
 };
 
-const matchGeometryType = (...types: string[]) => {
-	return ['all', ['in', ['geometry-type'], ['literal', types]]];
+const makeFilter = (types: string[], additionalFilters: unknown[]) => {
+	return ['all', ['in', ['geometry-type'], ['literal', types]], ...additionalFilters];
 };
 
 export function getUnselectedStyles(
@@ -77,15 +77,15 @@ export function getUnselectedStyles(
 
 	return [
 		{
-			filter: [...matchGeometryType('Point'), ...filters],
+			filter: makeFilter(['Point'], filters),
 			style: DEFAULT_POINT_STYLE,
 		},
 		{
-			filter: [...matchGeometryType('LineString', 'Polygon'), ...filters],
+			filter: makeFilter(['LineString', 'Polygon'], filters),
 			style: DEFAULT_FEATURE_STYLE,
 		},
 		{
-			filter: [...matchGeometryType('LineString'), ...filters],
+			filter: makeFilter(['LineString'], filters),
 			style: LINE_HIT_TOLERANCE,
 		},
 	];
@@ -103,11 +103,11 @@ export function getSelectedStyles(
 
 	return [
 		{
-			filter: [...matchGeometryType('Point'), ...filters],
+			filter: makeFilter(['Point'], filters),
 			style: [BLUE_GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
 		},
 		{
-			filter: [...matchGeometryType('LineString', 'Polygon'), ...filters],
+			filter: makeFilter(['LineString', 'Polygon'], filters),
 			style: [BLUE_GLOW_FEATURE_STYLE, DEFAULT_FEATURE_STYLE, SCALE_FEATURE_STYLE],
 		},
 	];
@@ -118,11 +118,11 @@ export function getSavedStyles(featureIdProp: string, savedPropName: string): Ru
 
 	return [
 		{
-			filter: [...matchGeometryType('Point'), filter],
+			filter: makeFilter(['Point'], [filter]),
 			style: [GREEN_GLOW_POINT_STYLE, DEFAULT_POINT_STYLE, SCALE_POINT_STYLE],
 		},
 		{
-			filter: [...matchGeometryType('LineString', 'Polygon'), filter],
+			filter: makeFilter(['LineString', 'Polygon'], [filter]),
 			style: [GREEN_GLOW_FEATURE_STYLE, DEFAULT_FEATURE_STYLE, SCALE_FEATURE_STYLE],
 		},
 	];

From 979ec9dfafda56cf87407d12f13a4fff95fa27e3 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 11:51:03 +0700
Subject: [PATCH 29/40] Feedback - properties popup

---
 .../src/components/common/map/AsyncMap.vue    |  4 ++-
 .../components/common/map/MapProperties.vue   | 26 ++++++++++++-------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 82ce026f1..0dfc3538b 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -168,7 +168,9 @@ onMounted(loadMap);
 	<div class="async-map-container">
 		<div v-if="currentState === STATES.ERROR" class="map-error">
 			<!-- TODO: translations -->
-			<p class="map-error-message">Unable to load map</p>
+			<p class="map-error-message">
+				Unable to load map
+			</p>
 
 			<!-- TODO: Uncomment once retry mechanism is implemented.
 				<Button outlined severity="contrast" class="retry-button" @click="loadMap">
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 2953685a0..9c12dd9db 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -25,11 +25,17 @@ const orderedProps = computed(() => {
 			</button>
 		</div>
 
-		<div class="map-properties-content">
-			<dl v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
+		<dl class="map-properties-content">
+			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
 				<dt>{{ key }}</dt><dd>{{ value }}</dd>
-			</dl>
-		</div>
+			</div>
+			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
+				<dt>{{ key }}</dt><dd>{{ value }}</dd>
+			</div>
+			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
+				<dt>{{ key }}</dt><dd>{{ value }}</dd>
+			</div>
+		</dl>
 
 		<div class="map-properties-footer">
 			<Button v-if="hasSavedFeature && !disabled" outlined severity="contrast" @click="emit('discard')">
@@ -65,9 +71,8 @@ const orderedProps = computed(() => {
 	display: flex;
 	flex-direction: column;
 	gap: var(--odk-map-properties-spacing-md);
-	min-width: 300px;
-	max-width: 360px;
-	max-height: 370px;
+	width: 360px;
+	height: 370px;
 	box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.2);
 }
 
@@ -94,13 +99,14 @@ const orderedProps = computed(() => {
 
 .map-properties-content {
 	overflow: auto;
+	margin: 0;
 
 	.property-line {
 		display: flex;
 		justify-content: flex-start;
 		flex-wrap: wrap;
 		gap: 5px;
-		padding: 15px 0;
+		padding: 22px 0 15px 0;
 
 		dt,
 		dd {
@@ -133,8 +139,8 @@ const orderedProps = computed(() => {
 		left: 0;
 		right: 0;
 		margin: 0 auto;
-		max-width: calc(100% - var(--odk-map-properties-spacing-md));
-		max-height: 50%;
+		width: calc(100% - var(--odk-map-properties-spacing-md));
+		height: 50%;
 	}
 }
 </style>

From 61602e357c636df5c84fe59ea2d7c75c3fcf91f8 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 12:13:53 +0700
Subject: [PATCH 30/40] Feedback - map buttons

---
 .../src/components/common/map/MapBlock.vue    | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 9cba7138c..d6bb9ccbb 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -71,7 +71,7 @@ const handleEscapeKey = (event: KeyboardEvent) => {
 };
 
 const centerFeatureLocation = () => {
-	if (mapHandler.savedFeature.value != null) {
+	if (mapHandler.savedFeature.value) {
 		mapHandler.centerFeatureLocation(mapHandler.savedFeature.value);
 	}
 };
@@ -91,13 +91,16 @@ const discardSavedFeature = () => {
 	<div class="map-block-component">
 		<div :class="{ 'map-container': true, 'map-full-screen': isFullScreen }">
 			<div class="control-bar">
-				<button :class="{ 'control-active': isFullScreen }" @click="isFullScreen = !isFullScreen">
+				<!-- TODO: translations -->
+				<button :class="{ 'control-active': isFullScreen }" title="Full Screen" @click="isFullScreen = !isFullScreen">
 					<IconSVG name="mdiArrowExpandAll" size="sm" />
 				</button>
-				<button @click="centerFeatureLocation">
+				<!-- TODO: translations -->
+				<button :disabled="!mapHandler?.savedFeature.value" title="Center view on saved selection" @click="centerFeatureLocation">
 					<IconSVG name="mdiFullscreen" />
 				</button>
-				<button @click="mapHandler?.centerCurrentLocation">
+				<!-- TODO: translations -->
+				<button title="Center view on current location" @click="mapHandler?.centerCurrentLocation">
 					<IconSVG name="mdiCrosshairsGps" size="sm" />
 				</button>
 			</div>
@@ -105,13 +108,13 @@ const discardSavedFeature = () => {
 			<div ref="mapElement" class="map-block" />
 
 			<MapStatusBar
-				:has-saved-feature="mapHandler?.savedFeature.value != null"
+				:has-saved-feature="!!mapHandler?.savedFeature.value"
 				class="map-status-bar-component"
 				@view-details="mapHandler?.selectSavedFeature()"
 			/>
 
 			<MapProperties
-				v-if="mapHandler?.selectedFeatureProperties.value != null"
+				v-if="mapHandler?.selectedFeatureProperties.value"
 				:reserved-props="mapHandler.selectedFeatureProperties.value"
 				:ordered-extra-props="orderedExtraProps"
 				:has-saved-feature="mapHandler.isSelectedFeatureSaved()"
@@ -123,7 +126,7 @@ const discardSavedFeature = () => {
 		</div>
 
 		<div
-			v-if="mapHandler?.errorMessage.value != null"
+			v-if="mapHandler?.errorMessage.value"
 			:class="{ 'map-block-error': true, 'stack-errors': showErrorStyle }"
 		>
 			<strong>{{ mapHandler?.errorMessage.value.title }}</strong>
@@ -199,6 +202,11 @@ const discardSavedFeature = () => {
 		&:hover {
 			background: var(--odk-muted-background-color);
 		}
+
+		&:disabled {
+			background: var(--odk-muted-background-color);
+			cursor: not-allowed;
+		}
 	}
 }
 

From 99305c0079ce286b1ae4c1694cb431bcde10b050 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 12:16:17 +0700
Subject: [PATCH 31/40] Remove dummy code

---
 .../web-forms/src/components/common/map/MapProperties.vue   | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 9c12dd9db..10bed91cf 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -29,12 +29,6 @@ const orderedProps = computed(() => {
 			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
 				<dt>{{ key }}</dt><dd>{{ value }}</dd>
 			</div>
-			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
-				<dt>{{ key }}</dt><dd>{{ value }}</dd>
-			</div>
-			<div v-for="[key = '', value = ''] in orderedProps" :key="key" class="property-line">
-				<dt>{{ key }}</dt><dd>{{ value }}</dd>
-			</div>
 		</dl>
 
 		<div class="map-properties-footer">

From 6c3ce1185aa4712e67630eb9d0c4f89f119f94e8 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 14:43:54 +0700
Subject: [PATCH 32/40] feedback - remove cursor when map is disabled

---
 .../src/components/common/map/MapBlock.vue    | 26 +++++++++----------
 .../components/common/map/MapProperties.vue   |  1 +
 .../src/components/common/map/useMapBlock.ts  | 25 +++++++++---------
 3 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index d6bb9ccbb..960632904 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -47,20 +47,20 @@ onUnmounted(() => {
 watch(
 	() => props.featureCollection,
 	(newData) => {
-		mapHandler?.loadGeometries(newData);
+		mapHandler.loadGeometries(newData);
 	},
 	{ deep: true, immediate: true }
 );
 
 watch(
 	() => props.savedFeatureValue,
-	(newSaved) => mapHandler?.setSavedByValueProp(newSaved),
+	(newSaved) => mapHandler.setSavedByValueProp(newSaved),
 	{ deep: true, immediate: true }
 );
 
 watch(
 	() => props.disabled,
-	(newValue) => mapHandler?.toggleClickBinding(!newValue),
+	(newValue) => mapHandler.toggleClickBinding(!newValue),
 	{ deep: true, immediate: true }
 );
 
@@ -77,12 +77,12 @@ const centerFeatureLocation = () => {
 };
 
 const saveSelection = () => {
-	mapHandler?.saveFeature();
+	mapHandler.saveFeature();
 	emit('save', mapHandler.savedFeature.value?.getProperties());
 };
 
 const discardSavedFeature = () => {
-	mapHandler?.discardSavedFeature();
+	mapHandler.discardSavedFeature();
 	emit('save', null);
 };
 </script>
@@ -96,11 +96,11 @@ const discardSavedFeature = () => {
 					<IconSVG name="mdiArrowExpandAll" size="sm" />
 				</button>
 				<!-- TODO: translations -->
-				<button :disabled="!mapHandler?.savedFeature.value" title="Center view on saved selection" @click="centerFeatureLocation">
+				<button :disabled="!mapHandler.savedFeature.value" title="Center view on saved selection" @click="centerFeatureLocation">
 					<IconSVG name="mdiFullscreen" />
 				</button>
 				<!-- TODO: translations -->
-				<button title="Center view on current location" @click="mapHandler?.centerCurrentLocation">
+				<button title="Center view on current location" @click="mapHandler.centerCurrentLocation">
 					<IconSVG name="mdiCrosshairsGps" size="sm" />
 				</button>
 			</div>
@@ -108,13 +108,13 @@ const discardSavedFeature = () => {
 			<div ref="mapElement" class="map-block" />
 
 			<MapStatusBar
-				:has-saved-feature="!!mapHandler?.savedFeature.value"
+				:has-saved-feature="!!mapHandler.savedFeature.value"
 				class="map-status-bar-component"
-				@view-details="mapHandler?.selectSavedFeature()"
+				@view-details="mapHandler.selectSavedFeature()"
 			/>
 
 			<MapProperties
-				v-if="mapHandler?.selectedFeatureProperties.value"
+				v-if="mapHandler.selectedFeatureProperties.value"
 				:reserved-props="mapHandler.selectedFeatureProperties.value"
 				:ordered-extra-props="orderedExtraProps"
 				:has-saved-feature="mapHandler.isSelectedFeatureSaved()"
@@ -126,12 +126,12 @@ const discardSavedFeature = () => {
 		</div>
 
 		<div
-			v-if="mapHandler?.errorMessage.value"
+			v-if="mapHandler.errorMessage.value"
 			:class="{ 'map-block-error': true, 'stack-errors': showErrorStyle }"
 		>
-			<strong>{{ mapHandler?.errorMessage.value.title }}</strong>
+			<strong>{{ mapHandler.errorMessage.value.title }}</strong>
 			&nbsp;
-			<span>{{ mapHandler?.errorMessage.value.message }}</span>
+			<span>{{ mapHandler.errorMessage.value.message }}</span>
 		</div>
 	</div>
 </template>
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 10bed91cf..10183b62c 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -92,6 +92,7 @@ const orderedProps = computed(() => {
 }
 
 .map-properties-content {
+	flex-grow: 2;
 	overflow: auto;
 	margin: 0;
 
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 202675593..e238baf4c 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -69,32 +69,31 @@ export function useMapBlock() {
 			controls: [new Zoom()],
 		});
 
-		setCursorPointer();
 		currentState.value = STATES.READY;
 		loadGeometries(geoJSON);
 	};
 
-	const setCursorPointer = () => {
-		mapInstance?.on('pointermove', (event: MapBrowserEvent) => {
-			if (event.dragging || !mapInstance) {
-				return;
-			}
-
-			const hit = mapInstance.hasFeatureAtPixel(event.pixel, {
-				layerFilter: (layer) => layer instanceof WebGLVectorLayer,
-			});
+	const setCursorPointer = (event: MapBrowserEvent) => {
+		if (event.dragging || !mapInstance) {
+			return;
+		}
 
-			mapInstance.getTargetElement().style.cursor = hit ? 'pointer' : '';
+		const hit = mapInstance.hasFeatureAtPixel(event.pixel, {
+			layerFilter: (layer) => layer instanceof WebGLVectorLayer,
 		});
+
+		mapInstance.getTargetElement().style.cursor = hit ? 'pointer' : '';
 	};
 
 	const handleClick = (event: MapBrowserEvent) => selectFeatureByPosition(event.pixel);
 
 	const toggleClickBinding = (bindClick: boolean) => {
 		mapInstance?.un('click', handleClick);
+		mapInstance?.un('pointermove', setCursorPointer);
 
 		if (bindClick) {
 			mapInstance?.on('click', handleClick);
+			mapInstance?.on('pointermove', setCursorPointer);
 		}
 	};
 
@@ -149,8 +148,8 @@ export function useMapBlock() {
 
 		const width = size[0];
 		const height = size[1];
-		let pixelOffsetY = 0;
-		let pixelOffsetX = -50;
+		let pixelOffsetY = -10;
+		let pixelOffsetX = -90;
 		if (width < SMALL_DEVICE_WIDTH) {
 			pixelOffsetY = 130;
 			pixelOffsetX = 0;

From 8d6b53649522c091e62687bd1dcb6612f370c4d0 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 15:28:17 +0700
Subject: [PATCH 33/40] feedback - removes watch options, use better function
 to find features

---
 .../src/components/common/map/AsyncMap.vue    |  2 +-
 .../src/components/common/map/MapBlock.vue    | 12 ++++++------
 .../src/components/common/map/useMapBlock.ts  | 19 ++++++++-----------
 .../form-elements/select/Select1Control.vue   | 10 ++++++++--
 .../components/form-layout/FormQuestion.vue   |  3 +--
 5 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index 0dfc3538b..e6b57bf85 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -159,7 +159,7 @@ const loadMap = async () => {
 	}
 };
 
-const save = (feature: Feature) => emit('save', feature);
+const save = (value: string | undefined) => emit('save', value);
 
 onMounted(loadMap);
 </script>
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 960632904..6c42f018b 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -37,6 +37,7 @@ onMounted(() => {
 
 	mapHandler.initializeMap(mapElement.value, props.featureCollection);
 	mapHandler.toggleClickBinding(!props.disabled);
+	mapHandler.setSavedByValueProp(props.savedFeatureValue);
 	document.addEventListener('keydown', handleEscapeKey);
 });
 
@@ -48,20 +49,19 @@ watch(
 	() => props.featureCollection,
 	(newData) => {
 		mapHandler.loadGeometries(newData);
+		mapHandler.setSavedByValueProp(props.savedFeatureValue);
 	},
-	{ deep: true, immediate: true }
+	{ deep: true }
 );
 
 watch(
 	() => props.savedFeatureValue,
-	(newSaved) => mapHandler.setSavedByValueProp(newSaved),
-	{ deep: true, immediate: true }
+	(newSaved) => mapHandler.setSavedByValueProp(newSaved)
 );
 
 watch(
 	() => props.disabled,
-	(newValue) => mapHandler.toggleClickBinding(!newValue),
-	{ deep: true, immediate: true }
+	(newValue) => mapHandler.toggleClickBinding(!newValue)
 );
 
 const handleEscapeKey = (event: KeyboardEvent) => {
@@ -78,7 +78,7 @@ const centerFeatureLocation = () => {
 
 const saveSelection = () => {
 	mapHandler.saveFeature();
-	emit('save', mapHandler.savedFeature.value?.getProperties());
+	emit('save', mapHandler.savedFeature.value?.getProperties()?.odk_value);
 };
 
 const discardSavedFeature = () => {
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index e238baf4c..629fa854c 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -218,16 +218,16 @@ export function useMapBlock() {
 			return;
 		}
 
-		const featureToSave = featuresSource.getFeatures()?.find((feature) => {
-			return feature.getProperties()?.odk_value === value;
-		}) as Feature<GeometryType>;
+		const featureToSave = featuresSource.forEachFeature((feature) => {
+			return feature.getProperties()?.odk_value === value ? feature : undefined;
+		});
 
 		if (!featureToSave) {
 			return;
 		}
 
-		saveFeature(featureToSave);
-		centerFeatureLocation(featureToSave);
+		saveFeature(featureToSave as Feature<GeometryType>);
+		centerFeatureLocation(featureToSave as Feature<GeometryType>);
 	};
 
 	const isSelectedFeatureSaved = (): boolean => {
@@ -242,8 +242,7 @@ export function useMapBlock() {
 			if (newState !== STATES.ERROR) {
 				errorMessage.value = undefined;
 			}
-		},
-		{ immediate: true }
+		}
 	);
 
 	watch(
@@ -256,8 +255,7 @@ export function useMapBlock() {
 			if (newSelectedFeature != null) {
 				centerFeatureLocation(newSelectedFeature);
 			}
-		},
-		{ immediate: true }
+		}
 	);
 
 	watch(
@@ -266,8 +264,7 @@ export function useMapBlock() {
 			featuresVectorLayer.updateStyleVariables({
 				[SAVED_ID_PROPERTY]: (newSavedFeature?.get(FEATURE_ID_PROPERTY) as string) ?? '',
 			});
-		},
-		{ immediate: true }
+		}
 	);
 
 	return {
diff --git a/packages/web-forms/src/components/form-elements/select/Select1Control.vue b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
index 564851b9f..4ab0e359b 100644
--- a/packages/web-forms/src/components/form-elements/select/Select1Control.vue
+++ b/packages/web-forms/src/components/form-elements/select/Select1Control.vue
@@ -19,6 +19,12 @@ const props = defineProps<Select1ControlProps>();
 const isSelectWithImages = computed(() => props.question.currentState.isSelectWithImages);
 const hasColumnsAppearance = ref(false);
 const hasFieldListRelatedAppearance = ref(false);
+const savedFeatureValue = computed(() => {
+	if (!props.question.appearances.map) {
+		return;
+	}
+	return props.question.currentState.value?.[0];
+});
 
 watchEffect(() => {
 	const appearances = [...props.question.appearances];
@@ -51,9 +57,9 @@ watchEffect(() => {
 	<AsyncMap
 		v-else-if="question.appearances.map"
 		:features="question.currentState.valueOptions"
-		:saved-feature-value="question.currentState.value?.[0]"
+		:saved-feature-value="savedFeatureValue"
 		:disabled="question.currentState.readonly"
-		@save="(properties) => question.selectValue(properties?.value ?? '')"
+		@save="(value) => question.selectValue(value ?? '')"
 	/>
 
 	<FieldListTable
diff --git a/packages/web-forms/src/components/form-layout/FormQuestion.vue b/packages/web-forms/src/components/form-layout/FormQuestion.vue
index 84638d800..9bc95f91a 100644
--- a/packages/web-forms/src/components/form-layout/FormQuestion.vue
+++ b/packages/web-forms/src/components/form-layout/FormQuestion.vue
@@ -34,8 +34,7 @@ const stopWatch = watch(
 	() => {
 		touched.value = true;
 		stopWatch();
-	},
-	{ deep: true }
+	}
 );
 
 const questionHasError = computed(() => {

From c66925841c6b1ab3f51ff70a0953ffd3088fe203 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 15:37:34 +0700
Subject: [PATCH 34/40] feedback - uses shallowRef

---
 .../web-forms/src/components/common/map/useMapBlock.ts    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 629fa854c..85e5a8e80 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -15,7 +15,7 @@ import type { Pixel } from 'ol/pixel';
 import { fromLonLat } from 'ol/proj';
 import { OSM } from 'ol/source';
 import VectorSource from 'ol/source/Vector';
-import { computed, ref, shallowRef, watch } from 'vue';
+import { computed, shallowRef, watch } from 'vue';
 
 type GeometryType = LineString | Point | Polygon;
 
@@ -40,8 +40,8 @@ export function useMapBlock() {
 	const currentState = shallowRef<(typeof STATES)[keyof typeof STATES]>(STATES.LOADING);
 	const errorMessage = shallowRef<{ title: string; message: string } | undefined>();
 	let mapInstance: Map | undefined;
-	const savedFeature = ref<Feature<GeometryType> | undefined>();
-	const selectedFeature = ref<Feature<GeometryType> | undefined>();
+	const savedFeature = shallowRef<Feature<GeometryType> | undefined>();
+	const selectedFeature = shallowRef<Feature<GeometryType> | undefined>();
 	const selectedFeatureProperties = computed(() => {
 		return selectedFeature.value?.getProperties();
 	});
@@ -169,7 +169,7 @@ export function useMapBlock() {
 		currentState.value = STATES.LOADING;
 		selectFeature(undefined);
 		saveFeature(undefined);
-		featuresSource.clear();
+		featuresSource.clear(true);
 
 		if (!geoJSON.features.length) {
 			mapInstance?.getView().animate({

From 11d81eaf798f6d8792aaeb84b6d201eb7bcdb9a7 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Wed, 1 Oct 2025 21:40:04 +0700
Subject: [PATCH 35/40] feedback - Adds animation to feature center!

---
 .../src/components/common/map/useMapBlock.ts  | 39 ++++++++++++-------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index 85e5a8e80..db2ce17a5 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -6,6 +6,7 @@ import {
 import type { FeatureCollection } from 'geojson';
 import { Map, MapBrowserEvent, View } from 'ol';
 import { Zoom } from 'ol/control';
+import { getCenter } from 'ol/extent';
 import Feature from 'ol/Feature';
 import GeoJSON from 'ol/format/GeoJSON';
 import { LineString, Point, Polygon } from 'ol/geom';
@@ -139,26 +140,34 @@ export function useMapBlock() {
 
 	const centerFeatureLocation = (feature: Feature<GeometryType>): void => {
 		const geometry = feature.getGeometry();
-		const size = mapInstance?.getSize();
 		const view = mapInstance?.getView();
-
-		if (!geometry || !size?.length || !view) {
+		const mapWidth = mapInstance?.getSize()?.[0];
+		if (!geometry || !view || mapWidth == null) {
 			return;
 		}
 
-		const width = size[0];
-		const height = size[1];
-		let pixelOffsetY = -10;
-		let pixelOffsetX = -90;
-		if (width < SMALL_DEVICE_WIDTH) {
-			pixelOffsetY = 130;
-			pixelOffsetX = 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;
 
-		view.centerOn(geometry.getExtent(), size, [
-			width / 2 - pixelOffsetX,
-			height / 2 - pixelOffsetY,
-		]);
+		// 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 targetCoordinates = [
+			featureCenterLong - xOffsetInMapUnits * cosRotation + yOffsetInMapUnits * sinRotation,
+			featureCenterLat - xOffsetInMapUnits * sinRotation - yOffsetInMapUnits * cosRotation,
+		];
+
+		view.animate({
+			center: targetCoordinates,
+			duration: ANIMATION_TIME,
+		});
 	};
 
 	const loadGeometries = (geoJSON: FeatureCollection): void => {

From eec92297e6c943b017d2269485eda0675948c268 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 2 Oct 2025 00:52:08 +0700
Subject: [PATCH 36/40] Feedback - Vertical alignment of popup lines and add
 zoom to fit all options action button.

---
 .../src/components/common/map/MapBlock.vue        | 15 ++-------------
 .../src/components/common/map/MapProperties.vue   |  2 +-
 .../src/components/common/map/useMapBlock.ts      |  2 +-
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index 6c42f018b..e0b8e4e27 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -70,12 +70,6 @@ const handleEscapeKey = (event: KeyboardEvent) => {
 	}
 };
 
-const centerFeatureLocation = () => {
-	if (mapHandler.savedFeature.value) {
-		mapHandler.centerFeatureLocation(mapHandler.savedFeature.value);
-	}
-};
-
 const saveSelection = () => {
 	mapHandler.saveFeature();
 	emit('save', mapHandler.savedFeature.value?.getProperties()?.odk_value);
@@ -96,11 +90,11 @@ const discardSavedFeature = () => {
 					<IconSVG name="mdiArrowExpandAll" size="sm" />
 				</button>
 				<!-- TODO: translations -->
-				<button :disabled="!mapHandler.savedFeature.value" title="Center view on saved selection" @click="centerFeatureLocation">
+				<button title="Zoom to fit all options" @click="mapHandler.fitToAllFeatures">
 					<IconSVG name="mdiFullscreen" />
 				</button>
 				<!-- TODO: translations -->
-				<button title="Center view on current location" @click="mapHandler.centerCurrentLocation">
+				<button title="Zoom to current location" @click="mapHandler.centerCurrentLocation">
 					<IconSVG name="mdiCrosshairsGps" size="sm" />
 				</button>
 			</div>
@@ -202,11 +196,6 @@ const discardSavedFeature = () => {
 		&:hover {
 			background: var(--odk-muted-background-color);
 		}
-
-		&:disabled {
-			background: var(--odk-muted-background-color);
-			cursor: not-allowed;
-		}
 	}
 }
 
diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue
index 10183b62c..a93b37cad 100644
--- a/packages/web-forms/src/components/common/map/MapProperties.vue
+++ b/packages/web-forms/src/components/common/map/MapProperties.vue
@@ -101,7 +101,7 @@ const orderedProps = computed(() => {
 		justify-content: flex-start;
 		flex-wrap: wrap;
 		gap: 5px;
-		padding: 22px 0 15px 0;
+		padding: 15px 0;
 
 		dt,
 		dd {
diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index db2ce17a5..b558db87b 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -283,7 +283,7 @@ export function useMapBlock() {
 		toggleClickBinding,
 
 		centerCurrentLocation,
-		centerFeatureLocation,
+		fitToAllFeatures,
 
 		savedFeature,
 		discardSavedFeature: () => saveFeature(undefined),

From 40652ac3044ca07e560561800036df61b0c13f77 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 2 Oct 2025 18:01:36 +0700
Subject: [PATCH 37/40] Fix to match Collect error handling

---
 packages/web-forms/src/components/common/map/AsyncMap.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index e6b57bf85..b53adfe5a 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -88,7 +88,7 @@ const featureCollection = computed(() => {
 		}
 
 		const geoJSONCoords = getGeoJSONCoordinates(geometry);
-		if (!geoJSONCoords.length) {
+		if (!geoJSONCoords?.length) {
 			// eslint-disable-next-line no-console -- Skip silently to match Collect behaviour.
 			console.warn(`Missing geo points for option: ${option.value}`);
 			return;
@@ -106,7 +106,7 @@ const featureCollection = computed(() => {
 
 const getGeoJSONCoordinates = (geometry: string) => {
 	const coordinates: Coordinates[] = [];
-	geometry.split(';').forEach((coord) => {
+	for (const coord of geometry.split(';')) {
 		const [lat, lon] = coord.trim().split(/\s+/).map(Number);
 
 		const isNullLocation = lat === 0 && lon === 0;
@@ -120,7 +120,7 @@ const getGeoJSONCoordinates = (geometry: string) => {
 		}
 
 		coordinates.push([lon, lat]);
-	});
+	}
 
 	return coordinates;
 };

From 9992b63448bfb2bfca76f8fe13b7a7233135f7f6 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 2 Oct 2025 18:51:37 +0700
Subject: [PATCH 38/40] Removes Google Chrome's tap highlight

---
 packages/web-forms/src/assets/styles/reset.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web-forms/src/assets/styles/reset.scss b/packages/web-forms/src/assets/styles/reset.scss
index c4bf99e2f..57571705b 100644
--- a/packages/web-forms/src/assets/styles/reset.scss
+++ b/packages/web-forms/src/assets/styles/reset.scss
@@ -2,6 +2,7 @@
 ::before,
 ::after {
 	box-sizing: inherit;
+	-webkit-tap-highlight-color: transparent;
 }
 
 html {

From 6cf13f1273fbbd367091385543e6205ad45ac33e Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Thu, 2 Oct 2025 21:39:10 +0700
Subject: [PATCH 39/40] QA feedback - Prevent map cloning at low zoom

---
 .../src/components/common/map/useMapBlock.ts          | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts
index b558db87b..f5783e849 100644
--- a/packages/web-forms/src/components/common/map/useMapBlock.ts
+++ b/packages/web-forms/src/components/common/map/useMapBlock.ts
@@ -17,6 +17,7 @@ import { fromLonLat } from 'ol/proj';
 import { OSM } from 'ol/source';
 import VectorSource from 'ol/source/Vector';
 import { computed, shallowRef, watch } from 'vue';
+import { get as getProjection } from 'ol/proj';
 
 type GeometryType = LineString | Point | Polygon;
 
@@ -27,6 +28,7 @@ const STATES = {
 } as const;
 
 const DEFAULT_GEOJSON_PROJECTION = 'EPSG:4326';
+const DEFAULT_VIEW_PROJECTION = 'EPSG:3857';
 const DEFAULT_VIEW_CENTER = [0, 0];
 const MAX_ZOOM = 16;
 const MIN_ZOOM = 2;
@@ -66,7 +68,14 @@ export function useMapBlock() {
 		mapInstance = new Map({
 			target: mapContainer,
 			layers: [new TileLayer({ source: new OSM() }), featuresVectorLayer],
-			view: new View({ center: DEFAULT_VIEW_CENTER, zoom: MIN_ZOOM }),
+			view: new View({
+				center: DEFAULT_VIEW_CENTER,
+				zoom: MIN_ZOOM,
+				// Prevent map cloning at low zoom during panning, which disrupts feature selection.
+				multiWorld: false,
+				projection: DEFAULT_VIEW_PROJECTION,
+				extent: getProjection(DEFAULT_VIEW_PROJECTION)?.getExtent(),
+			}),
 			controls: [new Zoom()],
 		});
 

From b4acdd28614c17117e0b1259a61b2450688efa41 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Mon, 13 Oct 2025 18:31:38 +0700
Subject: [PATCH 40/40] feedback

---
 .../src/components/common/map/AsyncMap.vue    | 12 --------
 .../src/components/common/map/MapBlock.vue    | 28 ++++++++++---------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/web-forms/src/components/common/map/AsyncMap.vue b/packages/web-forms/src/components/common/map/AsyncMap.vue
index b53adfe5a..b49689d27 100644
--- a/packages/web-forms/src/components/common/map/AsyncMap.vue
+++ b/packages/web-forms/src/components/common/map/AsyncMap.vue
@@ -144,10 +144,6 @@ const loadMap = async () => {
 	currentState.value = STATES.LOADING;
 
 	try {
-		/**
-		 * TODO: Implement retry mechanism for when the bundle fails to download.
-		 *       Adding a cache bust parameter doesn't work in Central.
-		 */
 		mapComponent.value = (
 			(await import('./MapBlock.vue')) as {
 				default: MapBlockComponent;
@@ -171,14 +167,6 @@ onMounted(loadMap);
 			<p class="map-error-message">
 				Unable to load map
 			</p>
-
-			<!-- TODO: Uncomment once retry mechanism is implemented.
-				<Button outlined severity="contrast" class="retry-button" @click="loadMap">
-				<IconSVG name="mdiRefresh" />
-				// TODO: translations
-				<span>Try again</span>
-				</Button>
-			-->
 		</div>
 
 		<ProgressSpinner v-else-if="currentState === STATES.LOADING" class="map-spinner" />
diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue
index e0b8e4e27..1bd8cbb68 100644
--- a/packages/web-forms/src/components/common/map/MapBlock.vue
+++ b/packages/web-forms/src/components/common/map/MapBlock.vue
@@ -134,9 +134,7 @@ const discardSavedFeature = () => {
 @use 'primeflex/core/_variables.scss' as pf;
 
 .map-block-component {
-	--odk-map-spacing-lg: 20px;
-	--odk-map-spacing-md: 10px;
-	--odk-map-spacing-sm: 5px;
+	--odk-map-spacing: 10px;
 }
 
 .map-block-component {
@@ -180,8 +178,8 @@ const discardSavedFeature = () => {
 	position: absolute;
 	display: flex;
 	flex-direction: column;
-	top: var(--odk-map-spacing-md);
-	right: var(--odk-map-spacing-md);
+	top: var(--odk-map-spacing);
+	right: var(--odk-map-spacing);
 	z-index: var(--odk-z-index-form-floating);
 	gap: 4px;
 
@@ -201,8 +199,8 @@ const discardSavedFeature = () => {
 
 .map-block-component :deep(.ol-zoom) {
 	position: absolute;
-	right: var(--odk-map-spacing-md);
-	bottom: var(--odk-map-spacing-md);
+	right: var(--odk-map-spacing);
+	bottom: var(--odk-map-spacing);
 	display: flex;
 	flex-direction: column;
 	flex-wrap: nowrap;
@@ -241,8 +239,8 @@ const discardSavedFeature = () => {
 	color: var(--odk-error-text-color);
 	background-color: var(--odk-error-background-color);
 	border-radius: var(--odk-radius);
-	margin-top: var(--odk-map-spacing-lg);
-	padding: var(--odk-map-spacing-lg);
+	margin-top: 20px;
+	padding: 20px;
 
 	&.stack-errors {
 		padding: 20px 0 5px 0;
@@ -252,6 +250,10 @@ const discardSavedFeature = () => {
 }
 
 @media screen and (max-width: #{pf.$sm}) {
+	.map-block-component {
+		--odk-map-spacing: 5px;
+	}
+
 	.map-block-component {
 		height: fit-content;
 	}
@@ -268,13 +270,13 @@ const discardSavedFeature = () => {
 	}
 
 	.control-bar {
-		top: var(--odk-map-spacing-sm);
-		right: var(--odk-map-spacing-sm);
+		top: var(--odk-map-spacing);
+		right: var(--odk-map-spacing);
 	}
 
 	.map-block-component :deep(.ol-zoom) {
-		right: var(--odk-map-spacing-sm);
-		bottom: var(--odk-map-spacing-sm);
+		right: var(--odk-map-spacing);
+		bottom: var(--odk-map-spacing);
 	}
 }
 </style>