feat(#305): support select one from map #491

latin-panda · 2025-09-04T18:07:22Z

Closes #305
Closes #258

Related PRs:

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

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

Manual testing with forms provided by QA, and this will go through QA before merging.
All question types form works fine.
New Scenario tests are enabled and passing.
The automated test coverage is in this PR

Test evidence

Edit submission in Central

UI looks good in Central
Submission renders correctly
Edit submission works

edit-submission.mp4

Empty external files

Renders empty map

Missing external files

Shows error modal - standard for all missing attachments

Map dynamic bundle

Loads map bundle when form has a map question

It doesn't load map bundle when form doesn't have map question

Show error when it cannot load bundle

bundle-error-ui.mp4

Map control buttons

map-controls.mp4

Renders special characters

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?

Preexisting select features are unaffected (ItemSet, Items selects, select with images, select with search, etc)
The choice filter works fine, and other related functions/calculations.
Exposes a new select feature

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

Test plan

What's changed

Engine support: Exposes geometry and other properties as one array of [string, string] to preserve order when displayed.
Rank and select share the same interface for their options, since they use the same XML element.
The support is only for ItemSets; regular Items don't have additional properties.
Front-end support: Using OpenLayers, loading async since it's a big bundle.
Front-end handles the options and builds a structure that works with OpenLayers.
It's structured with smaller components for possible reusability with geo shape / trace in the future.

…t-one-for-map

changeset-bot · 2025-09-04T18:07:26Z

🦋 Changeset detected

Latest commit: b4acdd2

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

This PR includes changesets to release 5 packages

Name	Type
@getodk/xforms-engine	Minor
@getodk/web-forms	Minor
@getodk/scenario	Patch
@getodk/common	Patch
@getodk/xpath	Patch

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

…t-one-for-map

into ui-select-one-for-map

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

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

…lect-one-for-map

packages/xforms-engine/src/lib/reactivity/createItemCollection.ts

latin-panda · 2025-09-25T05:21:54Z

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

+	currentState.value = STATES.LOADING;
+
+	try {
+		// ToDo: this is cached and retry doesn't work. Cannot add cache bust parameter.


@garethbowen, a question for when you have time later :)

One requirement is to load the map bundle only if maps are present in the form. If the bundle fails to download for some weird reason, a retry button is available. The browser doesn't automatically retry downloads unless a parameter is added to make it unique each time. However, this approach doesn't work when using WF as a dependency in Central, it can't match the bundle file name.

We decided to leave the retry feature for later.

I'm curious if you know any other way?

I think if we had control of the request we could do it, by setting the cacheMode to reload it could work but then you'd have to worry about loading the module manually. Probably not a good idea...

The cache busting should work. I would call this a bug in central and fix it there. I assume they're being too strict in their router.

The "it fails to download for some weird reason" condition also applies to all our other assets, right? The main JS bundle might fail to load and that would force a refresh (we don't auto retry the main bundle for example). Because we don't yet support offline maybe forcing a browser refresh is ok for now.

Ultimately this will be fixed by going offline first and the service worker updating the asset cache for us and retrying for us.

matthew-white

I didn't look at everything closely, but I thought I'd leave a few comments (all small things). The comments are just my two cents — I certainly don't want to be blocking merge or anything. I'm going to be busy tomorrow and out on Thursday, so I might not be able to reply to follow-up comments until Friday.

I need to update my Central PR to match this PR in a few places, e.g., map-styles.ts. I'll do that soon.

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

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

latin-panda · 2025-10-01T16:22:54Z

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

+		);
+	};
+
+	const centerFeatureLocation = (feature: Feature<GeometryType>): void => {


@matthew-white, this function now has animation included in case you need it in Central as well. In WF, when the popup is open, we need to display the feature next to the popup so it isn't covered. That's why we use some calculations with an offset instead of showing it at the map's center.

Thank you! This will definitely be useful once I start working on getodk/central#1402.

…options action button.

latin-panda · 2025-10-01T17:59:29Z

@garethbowen @matthew-white thanks so much for all the feedback, I have resolved them all. If you have a chance, you can take another look.

I will now focus on test coverage and documentation. Tomorrow, I have a walkthrough session with QA about this feature, and I will enable the test server for them to start testing.

packages/xforms-engine/src/client/BaseItem.ts

latin-panda · 2025-10-02T11:55:32Z

I've finished going through the test plan again, and I've uploaded videos and screenshots of some cases to this PR's description.

@srujner, I couldn't test on iOS. Could you please include it in your testing?

latin-panda · 2025-10-02T14:43:40Z

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

+				// Prevent map cloning at low zoom during panning, which disrupts feature selection.
+				multiWorld: false,
+				projection: DEFAULT_VIEW_PROJECTION,
+				extent: getProjection(DEFAULT_VIEW_PROJECTION)?.getExtent(),


@matthew-white You will need to add these lines

@srujner found an issue (video) where the selection of features was disrupted when panning clone the map. You can see the fix in my test server.

matthew-white · 2025-10-06T04:07:56Z

thanks so much for all the feedback, I have resolved them all. If you have a chance, you can take another look.

I haven't taken another look since my last review, but from my limited vantage, the PR seems to be in great shape. I'll let you know if I notice anything else or if I make a change in Central that I think should be copied in Web Forms. In the meantime, I'll leave it to @garethbowen to do the final review and approve for merge once ready.

latin-panda · 2025-10-10T17:10:00Z

@garethbowen The QA work has finished (report), we won't be doing more changes to this PR, and it's ready for a final review 🤩

garethbowen

Awesome!

Minor suggestions inline but nothing blocking. Merge when ready!

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

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

latin-panda added 10 commits August 21, 2025 00:31

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

517792e

…t-one-for-map

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

ef0cb3a

…t-one-for-map

engine support for metadata in itemset nodes

0cd76eb

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

68da647

…t-one-for-map

Async map bundle loading

16f3cde

typing

66e9764

Map Component

a7dea73

Adds new icons

4823ebf

removes cache buste and timeout

1e9feec

Map UI features: properties popup and status bar

b009dc7

latin-panda added 2 commits September 5, 2025 01:09

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

93cc3a8

…t-one-for-map

Merge branch 'select-one-for-map' of https://github.com/getodk/web-forms

525d890

into ui-select-one-for-map

latin-panda commented Sep 4, 2025

View reviewed changes

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

latin-panda commented Sep 4, 2025

View reviewed changes

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

latin-panda added 5 commits September 5, 2025 02:38

fixes styles and icons based on feedback

01a4fa5

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

78872b2

…lect-one-for-map

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

dcf7902

…lect-one-for-map

Reverts changes in engine. We decided another solution

313e751

Applies latest designer feedback

6c0ab6f

latin-panda changed the base branch from select-one-for-map to main September 23, 2025 08:40

latin-panda added 5 commits September 23, 2025 15:59

fixes lint, handles esc key

4b0a7e4

Makes lines less thick

2467720

stacking errors

294ddd5

Adds map background for full screen

a4d3056

Adds support for properties in the engine

087645f

latin-panda commented Sep 24, 2025

View reviewed changes

packages/xforms-engine/src/lib/reactivity/createItemCollection.ts Show resolved Hide resolved

latin-panda changed the title ~~feat(#305): support select one from map - UI~~ feat(#305): support select one from map Sep 24, 2025

latin-panda commented Sep 25, 2025

View reviewed changes

Fixes scenario tests

34ebdb4

latin-panda added 2 commits October 1, 2025 12:13

Feedback - map buttons

61602e3

Remove dummy code

99305c0

matthew-white reviewed Oct 1, 2025

View reviewed changes

latin-panda added 4 commits October 1, 2025 14:43

feedback - remove cursor when map is disabled

6c3ce11

feedback - removes watch options, use better function to find features

8d6b536

feedback - uses shallowRef

c669258

feedback - Adds animation to feature center!

11d81ea

latin-panda commented Oct 1, 2025

View reviewed changes

Feedback - Vertical alignment of popup lines and add zoom to fit all …

eec9229

…options action button.

garethbowen reviewed Oct 1, 2025

View reviewed changes

packages/xforms-engine/src/client/BaseItem.ts Show resolved Hide resolved

latin-panda added 2 commits October 2, 2025 18:01

Fix to match Collect error handling

40652ac

Removes Google Chrome's tap highlight

9992b63

latin-panda added the needs testing label Oct 2, 2025

QA feedback - Prevent map cloning at low zoom

6cf13f1

latin-panda commented Oct 2, 2025

View reviewed changes

matthew-white mentioned this pull request Oct 10, 2025

Update zoom controls getodk/central#1383

Closed

latin-panda requested a review from garethbowen October 10, 2025 17:07

garethbowen approved these changes Oct 12, 2025

View reviewed changes

packages/web-forms/src/components/common/map/AsyncMap.vue Outdated Show resolved Hide resolved

packages/web-forms/src/components/common/map/AsyncMap.vue Outdated Show resolved Hide resolved

packages/web-forms/src/components/common/map/MapBlock.vue Outdated Show resolved Hide resolved

matthew-white mentioned this pull request Oct 13, 2025

Recenter map if selected feature isn't fully visible getodk/central#1402

Open

feedback

b4acdd2

latin-panda merged commit 36b977f into main Oct 13, 2025
47 checks passed

latin-panda deleted the ui-select-one-for-map branch October 13, 2025 11:48

This was referenced Oct 16, 2025

frontend: map doesn't load getodk/central#1405

Closed

Don't manually dispose() of map layers getodk/central-frontend#1370

Merged

Update map styles getodk/central-frontend#1368

Merged

matthew-white mentioned this pull request Oct 31, 2025

Count of features in view is inconsistent getodk/central#1435

Closed

feat(#305): support select one from map #491

feat(#305): support select one from map #491

Uh oh!

Conversation

latin-panda commented Sep 4, 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 Sep 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

latin-panda Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

garethbowen Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

matthew-white left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

latin-panda Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

matthew-white Oct 13, 2025

Choose a reason for hiding this comment

Uh oh!

latin-panda commented Oct 1, 2025

Uh oh!

Uh oh!

latin-panda commented Oct 2, 2025

Uh oh!

latin-panda Oct 2, 2025

Choose a reason for hiding this comment

Uh oh!

matthew-white commented Oct 6, 2025

Uh oh!

latin-panda commented Oct 10, 2025

Uh oh!

garethbowen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

latin-panda commented Sep 4, 2025 •

edited

Loading

changeset-bot bot commented Sep 4, 2025 •

edited

Loading