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

latin-panda · 2025-12-30T19:01:10Z

Closes #560

I have verified this PR works in these browsers (latest versions):

What else has been done to verify that this works as intended?

Test case: Errors messages in desktop

Test case: Errors messages in mobile

Test case: Full-screen experience

Test case: readonly map

readonly-map.mp4

Test case: geoshape

test-shape.mp4

Test case: geotrace

test-trace.mp4

Regression test: geopoint with "maps" and "placement-map" appearances

geopoint-regression.mp4

Regression test: select with "map" appearance

select-with-map-regression.mp4

Central smoke test

central-smoke-test.mp4

Bundle size verification

No big difference means OL didn't leak, because OL would inflate the main chunk by 400 or 600.

This branch:

In main branch:

Why is this the best possible solution? Were any other approaches considered?

This is an extension of the existent solution:

Follows the same pattern of small components for modularity and ease of maintenance
Follows the same pattern of adding new features as configurable capabilities in each mode type.
Reuses existing utilities without having side effects on existing features due to small pure functions with defined responsibilities.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Mostly extension of code, regression test is done in case an unintended reactive value state is in the selected feature/vertex

Do we need any specific form for testing your changes? If so, please attach one.

It can be tested using existing test forms.

What's changed

Adds a dialog component to allow users to paste a value or upload a GeoJSON file
Adds an expandable component to display advanced features under the map
Updates the status bar component to fit a new button that displays the advanced features panel
Adds a new utility function in mapHelpers.ts to perform basic validation and return coordinates based on the expected feature type. This is used to return the correct coordinate format after the user pastes a value or uploads a file.
Exposes existing utility functions that parse GeoJSON format for reusability and renames file from createFeatureCollectionAndProps.ts to ‎geojson-parsers.ts
Adds utility functions to parse the first feature in a GeoJSON file to geojson-parsers.ts
Adds two new capabilities to the mode config of the map: 'canUpdateFeatureCoordinates' and 'canUpdateVertexCoordinates'
Adds test coverage and updates visual e2e tests

changeset-bot · 2025-12-30T19:01:15Z

🦋 Changeset detected

Latest commit: 2bd6a29

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@getodk/web-forms	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

latin-panda · 2026-01-02T16:00:31Z

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

 		mapFeatures?.saveFeature(feature);
+		// Refresh selected vertex.
+		const vertexIndex = feature.get(SELECTED_VERTEX_INDEX_PROPERTY) as number | undefined;
+		events.onVertexSelect(getVertexByIndex(feature, vertexIndex));


This refresh updates the status bar and the advanced panel after a vertex is deleted or updated.

…t type

latin-panda · 2026-01-05T15:30:43Z

Testing finished and recorded evidence

…vertex # Conflicts: # packages/web-forms/tests/components/common/map/createFeatureCollectionAndProps.test.ts

…vertex

latin-panda · 2026-01-19T10:13:05Z

packages/web-forms/src/components/common/map/geojson-parsers.ts

+		const geojson = JSON.parse(text) as FeatureCollection<LineString | Point | Polygon>;
+		return geojson?.features?.[0]?.geometry as Geometry | undefined;
+	} catch {
+		// eslint-disable-next-line no-console -- Skip silently to match createFeatureCollectionAndProps


The audience is developers, and it is not intended to be tracked in alert systems like Sentry (bc user error, no system error)

latin-panda · 2026-01-19T10:16:44Z

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

+	SINGLE_FEATURE_TYPES.TRACE,
+] as const;
+
 export interface ModeCapabilities {


There are many question types that use maps. This file provides modes for those question types, and each mode has capabilities.
For edit coordinates, this PR adds 2 new capabilities, can update feature coordinates, and can update vertex coordinates

latin-panda · 2026-01-19T10:25:33Z

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

+	if (Number.isFinite(latitude) && Number.isFinite(longitude)) {
+		coords.push(latitude, longitude);
+
+		if (Number.isFinite(accuracy)) {


I tried extracting this since it's similar (not the same) as the one in geojson-parsers.ts. But decided to leave it like this because

It's too small and offers little benefit, and don't want to overmodularize

This one is used within the OpenLayers scope, while the other is for GeoJSON cases, which cannot be mixed (to prevent accidental inclusion of OL in the main bundle).

latin-panda · 2026-01-19T10:57:48Z

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

+}
+</style>
+
+<style lang="scss">


We have a separate task to make the css and html of dialogs more reusable.

latin-panda · 2026-01-19T10:59:35Z

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

-		if (location.altitude != null) {
-			coords.push(location.altitude);
-		}
+		const coords = toGeoJsonCoordinateArray(


Below is a refactor since we have new utility functions, not related to the main edit coordinates work.

latin-panda · 2026-01-19T11:01:04Z

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


 		const extent = source.getExtent();
-		if (!extent?.length) {
+		if (isExtendEmpty(extent)) {


I discovered this function that is a safer check :) tiny enhancement

latin-panda · 2026-01-19T11:03:04Z

packages/web-forms/src/components/common/map/vertex-geometry.ts

 	}

-	geometry?.setCoordinates(coords);
+	geometry?.setCoordinates(coords, COORDINATE_LAYOUT_XYZM);


No issue if the layout of 4 numbers (latitude, longitude, altitude, accuracy) is specified or not, but it's helpful for someone reading the code to know what's expected, so adding it here.

latin-panda · 2026-01-19T11:05:38Z

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

 export type Mode = (typeof MODES)[keyof typeof MODES];

+// Used when loading a single feature from the map.
+export const SINGLE_FEATURE_TYPES = {


It's called "single" because we also support maps with a mix of feature types at the same time (select with the map appearance), but for geopoint, geoshape, and geotrace, we only support one type at a time.

latin-panda · 2026-01-19T11:26:47Z

@sadiqkhoja This is ready for review. I have included some test videos in the PR description and notes. Let me know if you have any questions or if you'd like a walkthrough session. :)

sadiqkhoja

Few observations while trying the demo:

Long press requires quite a long press, is there a way to reduce the time
Undo button allows only 1 step back, doesn't it create editing stack?
The +/- button in Longitude and Latitude textbox are not super useful, would be best to remove them.
If two vertices are exactly same then how can I select one or other? Maybe next/prev button would be helpful

alyblenkin · 2026-01-20T20:44:34Z

Great feedback @sadiqkhoja! Jumping in with a few comments:

Long press requires quite a long press, is there a way to reduce the time
Undo button allows only 1 step back, doesn't it create editing stack?

We are fixing these two! Users brought this up as well. So we will be removing the long press entirely and allowing the user to undo all actions.

The +/- button in Longitude and Latitude textbox are not super useful, would be best to remove them.

I don't think I know what you mean here. Do you mean the up/down arrow keys?

If two vertices are exactly same then how can I select one or other? Maybe next/prev button would be helpful

Yes, this is an interesting point that I think we will address with this story.

alyblenkin · 2026-01-20T20:49:39Z

Looking great @latin-panda! A few small design notes:

Can we tighten the spacing between the text field and error so they look more connected?
When importing a file, can we also drag and drop? Is that harder to implement right now? Not a deal breaker!
I realized we should probably link to the docs to explain the ODK format. Maybe this link

Fixes to address later:

Expand text field for pasting location data so you can view the entire string

sadiqkhoja

still reviewing...

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

...st-cases/visual/all-question-types.test.ts-snapshots/geoshape-autoclose-polygon-chromium.png

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

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

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

sadiqkhoja · 2026-01-20T20:46:13Z

packages/web-forms/src/components/common/map/geojson-parsers.ts

-	for (const coord of geometry.split(';')) {
-		const [lat, lon] = coord.trim().split(/\s+/).map(Number);
+export const isNullLocation = (lat: number | null | undefined, lon: number | null | undefined) => {
+	return lat === 0 && lon === 0;


0,0 is a valid location, no?

Good question! Hopefully null Island isn't common, but it was decided to leave it out to match JR (ref conversation)

latin-panda · 2026-01-21T13:45:40Z

@sadiqkhoja Thanks for the nice feedback!

Long press requires quite a long press, is there a way to reduce the time

This is under development here: #621

Undo button allows only 1 step back, doesn't it create editing stack?

This is under review here: #619

The +/- button in Longitude and Latitude textbox are not super useful, would be best to remove them.

I've removed the controls from the input type number. Tested in Chrome, Firefox and Safari.

latin-panda · 2026-01-21T14:31:38Z

@alyblenkin Thanks for the feedback!

Can we tighten the spacing between the text field and error so they look more connected?

Sure, fixed, same as Figma

Expand to see fix

When importing a file, can we also drag and drop? Is that harder to implement right now? Not a deal breaker!

No right now, we don't even have it in the upload image question type. It would be good to implement it together. I've created a ticket.

I realized we should probably link to the docs to explain the ODK format. Maybe this link.

It's better to avoid adding links, since they can break easily or change paths, and fixing them will require a release in Web Forms and Central. For now, I've added an icon with a native tooltip that shows this information on hover as a quick solution, but this is only available to desktop users (because of hover). We can explore adding one based on tapping so it's also visible to mobile users, as a separate issue. What do you think?

Expand to see fix

Expand text field for pasting location data so you can view the entire string

This is fixed

Expand to see fix

alyblenkin · 2026-01-21T17:30:58Z

We discussed all these changes earlier, but I forgot to ask if it's difficult to display the name of the file once uploaded, @latin-panda. We could always create a ticket for it if so. I'm assuming it would be helpful to have confirmation you've uploaded the right file.

latin-panda added 4 commits December 29, 2025 22:49

Advanced panel component

bae07a6

file parsing to coords array

74f9517

updates event name

db94e62

save new value and validations

6df2619

latin-panda added 2 commits December 31, 2025 18:31

Adds support for editing point feature

e24b60b

Adds changeset

b52e8ae

latin-panda commented Jan 2, 2026

View reviewed changes

latin-panda added 8 commits January 2, 2026 23:50

Test coverage and cleaning

4d61399

restructure geojson parsers and keep bundle slim

cbac4ab

test coverage for geojson parsers

c18a3dd

e2e tests

47c9fdd

lint

b910e8b

cleans code

2dc797a

refactored draw feature type to single feature type to count for poin…

67d4a7e

…t type

Improves status message

46a1290

latin-panda added 8 commits January 5, 2026 22:37

fixes lint

acf5117

Merge branch 'main' of https://github.com/getodk/web-forms into edit-…

08cef2c

…vertex # Conflicts: # packages/web-forms/tests/components/common/map/createFeatureCollectionAndProps.test.ts

merge test

bfaf87b

Merge branch 'main' of https://github.com/getodk/web-forms into edit-…

f865aa5

…vertex

feedback

71e1a39

revert changes for placement map in e2e tests

50c180b

Resolves new design feedback

cf69983

new feature on paste or upload

3478e9e

latin-panda marked this pull request as ready for review January 19, 2026 08:58

latin-panda commented Jan 19, 2026

View reviewed changes

Code clean up

4c07e9c

latin-panda requested a review from sadiqkhoja January 19, 2026 11:14

sadiqkhoja reviewed Jan 20, 2026

View reviewed changes

latin-panda mentioned this pull request Jan 21, 2026

Consider setting Git LFS for images of visual tests #620

Open

8 tasks

latin-panda added 2 commits January 21, 2026 19:04

Fixes feedback

7e73647

Fixes feedback

3fbf50a

Fixes designer feedback

dc2a6cc

Fixes designer feedback

2bd6a29

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

Are you sure you want to change the base?

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

Conversation

latin-panda commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I have verified this PR works in these browsers (latest versions):

What else has been done to verify that this works as intended?

Why is this the best possible solution? Were any other approaches considered?

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Do we need any specific form for testing your changes? If so, please attach one.

What's changed

Uh oh!

changeset-bot bot commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Choose a reason for hiding this comment

Uh oh!

latin-panda commented Jan 5, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

latin-panda commented Jan 19, 2026

Uh oh!

sadiqkhoja left a comment

Choose a reason for hiding this comment

Uh oh!

alyblenkin commented Jan 20, 2026

Uh oh!

alyblenkin commented Jan 20, 2026

Uh oh!

sadiqkhoja left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

latin-panda commented Jan 21, 2026

Uh oh!

latin-panda commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alyblenkin commented Jan 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

latin-panda commented Dec 30, 2025 •

edited

Loading

changeset-bot bot commented Dec 30, 2025 •

edited

Loading

latin-panda commented Jan 21, 2026 •

edited

Loading