feat(#560): edit coordinates for a vertex or feature #606

sadiqkhoja · 2026-01-20T20:11:31Z

Meta-comment: maybe we should configure LFS for these images.

Nice suggestion! I've created an issue and will bring it to the team

-Original file line number
+Diff line change
@@ -0,0 +1,5 @@
+    ---
+    '@getodk/web-forms': minor
+    ---
+    Adds support for editing the coordinates in geoshape and geotrace question types.

-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,7 @@ import { @@
     	mdiChevronDown,
     	mdiChevronUp,
     	mdiClose,
+    	mdiCogOutline,
     	mdiContentSave,
     	mdiCrosshairsGps,
     	mdiDotsVertical,
@@ Expand Down Expand Up / @@ -48,6 +49,7 @@ const iconMap: Record<string, string> = { @@
     	mdiChevronDown,
     	mdiChevronUp,
     	mdiClose,
+    	mdiCogOutline,
     	mdiContentSave,
     	mdiCrosshairsGps,
     	mdiDotsVertical,
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,21 +4,17 @@ @@
      * 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 { createFeatureCollectionAndProps } from '@/components/common/map/geojson-parsers.ts';
+    import type { Mode, SingleFeatureType } from '@/components/common/map/getModeConfig.ts';
     import type { SelectItem } from '@getodk/xforms-engine';
+    import type { Feature } from 'geojson';
     import ProgressSpinner from 'primevue/progressspinner';
     import { computed, type DefineComponent, onMounted, shallowRef } from 'vue';
-    import type { Mode } from '@/components/common/map/getModeConfig.ts';
-    import {
-    	createFeatureCollectionAndProps,
-    	type Feature,
-    } from '@/components/common/map/createFeatureCollectionAndProps.ts';
-    type DrawFeatureType = 'shape' | 'trace';
     type MapBlockComponent = DefineComponent<{
     	featureCollection: { type: string; features: Feature[] };
     	disabled: boolean;
-    	drawFeatureType?: DrawFeatureType;
+    	singleFeatureType?: SingleFeatureType;
     	mode: Mode;
     	orderedExtraProps: Map<string, Array<[key: string, value: string]>>;
     	savedFeatureValue: Feature | undefined;
@@ Expand All / @@ -27,7 +23,7 @@ type MapBlockComponent = DefineComponent<{ @@
     interface AsyncMapProps {
     	features?: readonly SelectItem[];
     	disabled: boolean;
-    	drawFeatureType?: DrawFeatureType;
+    	singleFeatureType?: SingleFeatureType;
     	mode: Mode;
     	savedFeatureValue: string | undefined;
     }
@@ Expand Down Expand Up / @@ -86,7 +82,7 @@ onMounted(loadMap); @@
     		<component
     			:is="mapComponent"
     			v-else
-    			:draw-feature-type="drawFeatureType"
+    			:single-feature-type="singleFeatureType"
     			:feature-collection="featureCollectionAndProps.featureCollection"
     			:mode="mode"
     			:ordered-extra-props="featureCollectionAndProps.orderedExtraPropsMap"
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(#560): edit coordinates for a vertex or feature #606

Uh oh!

Diff view

Diff view

There are no files selected for viewing

sadiqkhoja Jan 20, 2026

Uh oh!

latin-panda Jan 21, 2026

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ -0,0 +1,269 @@
+    <script setup lang="ts">
+    import IconSVG from '@/components/common/IconSVG.vue';
+    import {
+    	isNullLocation,
+    	isValidLatitude,
+    	isValidLongitude,
+    	toGeoJsonCoordinateArray,
+    } from '@/components/common/map/geojson-parsers.ts';
+    import { fromLonLat } from 'ol/proj';
+    import { computed, ref, watch } from 'vue';
+    import type { Coordinate } from 'ol/coordinate';
+    const props = defineProps<{
+    	isOpen: boolean;
+    	coordinates: Coordinate | null;
+    }>();
+    const emit = defineEmits(['open-paste-dialog', 'save']);
+    const latitude = ref<number | undefined>();
+    const longitude = ref<number | undefined>();
+    const accuracy = ref<number | undefined>();
+    const altitude = ref<number | undefined>();
+    const disableInputs = computed(() => !props.coordinates?.length);
+    const validLatitude = computed(() => {
+    	return isValidLatitude(latitude.value) && !isNullLocation(latitude.value, longitude.value);
+    });
+    const validLongitude = computed(() => {
+    	return isValidLongitude(longitude.value) && !isNullLocation(latitude.value, longitude.value);
+    });
+    watch(
+    	() => props.coordinates,
+    	(newVal) => {
+    		if (newVal) {
+    			[longitude.value, latitude.value, altitude.value, accuracy.value] = newVal;
+    			return;
+    		}
+    		accuracy.value = undefined;
+    		latitude.value = undefined;
+    		altitude.value = undefined;
+    		longitude.value = undefined;
+    	},
+    	{ immediate: true }
+    );
+    const updateVertex = () => {
+    	if (!validLatitude.value || !validLongitude.value) {
+    		return;
+    	}
+    	const newVertex = toGeoJsonCoordinateArray(
+    		Number(longitude.value),
+    		Number(latitude.value),
+    		Number(altitude.value),
+    		Number(accuracy.value)
+    	) as Coordinate;
+    	if (newVertex.length) {
+    		emit('save', fromLonLat(newVertex));
+    	}
+    };
+    </script>
+    <template>
+    	<transition name="panel">
+    		<div v-if="isOpen" class="advanced-panel">
+    			<div class="fields-container">
+    				<div :class="{ 'field-error': !disableInputs && !validLongitude }" class="field-set">
+    					<div class="input-wrap">
+    						<!-- TODO: translations -->
+    						<label for="longitude">Longitude</label>
+    						<input
+    							id="longitude"
+    							v-model="longitude"
+    							type="number"
+    							:disabled="disableInputs"
+    							@change="updateVertex"
+    						>
+    					</div>
+    					<!-- TODO: translations -->
+    					<p class="field-error-message">
+    						Longitude is invalid
+    					</p>
+    				</div>
+    				<div :class="{ 'field-error': !disableInputs && !validLatitude }" class="field-set">
+    					<div class="input-wrap">
+    						<!-- TODO: translations -->
+    						<label for="latitude">Latitude</label>
+    						<input
+    							id="latitude"
+    							v-model="latitude"
+    							type="number"
+    							:disabled="disableInputs"
+    							@change="updateVertex"
+    						>
+    					</div>
+    					<!-- TODO: translations -->
+    					<p class="field-error-message">
+    						Latitude is invalid
+    					</p>
+    				</div>
+    				<div class="field-set">
+    					<div class="input-wrap">
+    						<!-- TODO: translations -->
+    						<label for="altitude">Altitude</label>
+    						<input
+    							id="altitude"
+    							v-model="altitude"
+    							type="number"
+    							:disabled="disableInputs"
+    							@change="updateVertex"
+    						>
+    					</div>
+    				</div>
+    				<div class="field-set">
+    					<div class="input-wrap">
+    						<!-- TODO: translations -->
+    						<label for="accuracy">Accuracy</label>
+    						<input
+    							id="accuracy"
+    							v-model="accuracy"
+    							type="number"
+    							:disabled="disableInputs"
+    							@change="updateVertex"
+    						>
+    					</div>
+    				</div>
+    			</div>
+    			<a class="paste-location" @click="emit('open-paste-dialog')">
+    				<IconSVG name="mdiFileOutline" size="sm" />
+    				<!-- TODO: translations -->
+    				<strong>Import data to replace location</strong>
+    			</a>
+    		</div>
+    	</transition>
+    </template>
+    <style scoped lang="scss">
+    .advanced-panel {
+    	--odk-double-map-spacing: calc(var(--odk-map-controls-spacing) * 2);
+    }
+    .advanced-panel {
+    	background: var(--odk-base-background-color);
+    	border-top: 1px solid var(--odk-border-color);
+    	display: flex;
+    	flex-direction: column;
+    	align-items: flex-start;
+    	gap: 3px;
+    }
+    .fields-container {
+    	display: flex;
+    	flex-wrap: wrap;
+    	gap: var(--odk-double-map-spacing);
+    	padding: var(--odk-double-map-spacing) var(--odk-map-controls-spacing);
+    	.field-set {
+    		display: flex;
+    		flex: 1 1 calc(50% - var(--odk-double-map-spacing));
+    		flex-direction: column;
+    	}
+    	.input-wrap {
+    		display: flex;
+    		flex-direction: row;
+    		border-radius: var(--odk-radius);
+    		overflow: hidden;
+    		background-color: var(--odk-muted-background-color);
+    		height: 38px;
+    		min-width: 250px;
+    	}
+    	label {
+    		padding: var(--odk-map-controls-spacing);
+    		background-color: var(--odk-light-background-color);
+    		color: var(--odk-text-color);
+    		font-weight: normal;
+    		font-size: var(--odk-base-font-size);
+    		border-radius: var(--odk-radius) 0 0 var(--odk-radius);
+    		border: 1px solid var(--odk-border-color);
+    		border-right: none;
+    		display: flex;
+    		align-items: center;
+    		white-space: nowrap;
+    		flex-basis: 110px;
+    		flex-shrink: 0;
+    		max-width: 150px;
+    	}
+    	input {
+    		padding: var(--odk-map-controls-spacing);
+    		width: 100%;
+    		background-color: var(--odk-base-background-color);
+    		border-radius: 0 var(--odk-radius) var(--odk-radius) 0;
+    		border: 1px solid var(--odk-border-color);
+    		font-size: var(--odk-base-font-size);
+    		color: var(--odk-text-color);
+    		-moz-appearance: textfield;
+    		&:focus-visible {
+    			outline: none;
+    			outline-offset: unset;
+    		}
+    		&::-webkit-outer-spin-button,
+    		&::-webkit-inner-spin-button {
+    			appearance: none;
+    			-webkit-appearance: none;
+    			margin: 0;
+    		}
+    		&:disabled {
+    			background-color: var(--odk-muted-background-color);
+    			cursor: not-allowed;
+    		}
+    	}
+    	.field-error-message {
+    		margin: 8px 0 0 0;
+    		color: var(--odk-error-text-color);
+    		display: none;
+    	}
+    	.field-error {
+    		.field-error-message {
+    			display: block;
+    		}
+    		.input-wrap input {
+    			border: 1px solid var(--odk-error-text-color);
+    		}
+    	}
+    }
+    .paste-location {
+    	display: flex;
+    	flex-direction: row;
+    	align-items: center;
+    	gap: 8px;
+    	padding: var(--odk-double-map-spacing);
+    	text-decoration: none;
+    	cursor: pointer;
+    	font-size: var(--odk-base-font-size);
+    	color: var(--odk-text-color);
+    }
+    .panel-enter-active,
+    .panel-leave-active {
+    	transition:
+    		max-height 0.6s ease-in-out,
+    		opacity 0.6s ease-in-out;
+    	overflow: hidden;
+    }
+    .panel-enter-from,
+    .panel-leave-to {
+    	max-height: 0;
+    	opacity: 0;
+    }
+    .panel-enter-to,
+    .panel-leave-from {
+    	max-height: 300px;
+    	opacity: 1;
+    }
+    </style>

feat(#560): edit coordinates for a vertex or feature #606

Uh oh!

feat(#560): edit coordinates for a vertex or feature #606

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

sadiqkhoja Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

latin-panda Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!