Skip to content

feat(#257): Add geopoint with maps and placement-map appearances #536

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 26 commits into
base: main
Choose a base branch
from
Open

feat(#257): Add geopoint with maps and placement-map appearances #536

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
3ba9051
Initial input setup and loading saved feature
latin-panda Oct 16, 2025
43df2b4
Adds watch to current location function
latin-panda Oct 17, 2025
76b89de
Merge branch 'main' of https://github.com/getodk/web-forms into add-g…
latin-panda Oct 24, 2025
c5c479a
maps and placement-maps interactions
latin-panda Oct 29, 2025
8052234
Nicer code
latin-panda Oct 29, 2025
a0cd16e
fixes changeset
latin-panda Oct 29, 2025
3734ee0
rename function
latin-panda Oct 29, 2025
f1858ee
Extract code a new mapFeatures module
latin-panda Oct 30, 2025
74f5bdf
adds debounce to watch location
latin-panda Oct 30, 2025
ba7efef
feedback and unit test
latin-panda Oct 30, 2025
4991c04
fixes button style
latin-panda Oct 30, 2025
5a52825
updates save button icon
latin-panda Oct 30, 2025
50fa15e
improves test form for geopoint with maps
latin-panda Oct 31, 2025
9ac956c
fixes styles in mobile
latin-panda Oct 31, 2025
851a735
Adds toast message
latin-panda Oct 31, 2025
4045789
shows overlay for location mode when there's an error
latin-panda Oct 31, 2025
3feca4f
should not center on subsequent location captures - on watch location
latin-panda Oct 31, 2025
cc522c3
feedback labels for desktop and mobile
latin-panda Nov 3, 2025
21f35f4
Fixes view center experience
latin-panda Nov 3, 2025
639ab42
Fixes view center experience
latin-panda Nov 3, 2025
d41ead9
Update layer while animating
latin-panda Nov 4, 2025
fc0134b
test coverage
latin-panda Nov 4, 2025
8b819f9
updates feature matrix
latin-panda Nov 4, 2025
f4b0cdc
updates visual test
latin-panda Nov 4, 2025
3e9b267
Don't center if feature is in view and not displaying properties
latin-panda Nov 5, 2025
f85e723
Don't center if feature is in view and not displaying properties
latin-panda Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/common/src/fixtures/geopoint/geopoint-with-maps.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
</translation>
</itext>
<instance>
<data id="_geopoint_with_map" version="202510311">
<data id="geopoint_with_map" version="202510311">
<maps_group>
<select_to_disable/>
<select_to_show/>
Expand Down
4 changes: 2 additions & 2 deletions packages/web-forms/src/components/common/map/MapProperties.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const orderedProps = computed(() => {
flex-direction: column;
gap: var(--odk-map-properties-spacing-md);
width: 360px;
height: 370px;
max-height: 370px;
box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.2);
}

Expand Down Expand Up @@ -140,7 +140,7 @@ const orderedProps = computed(() => {
right: 0;
margin: 0 auto;
width: calc(100% - var(--odk-map-properties-spacing-md));
height: 50%;
max-height: 50%;
}
}
</style>
14 changes: 12 additions & 2 deletions packages/web-forms/src/components/common/map/MapStatusBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const emit = defineEmits(['view-details', 'save', 'discard']);
<Button v-if="canRemove" outlined severity="contrast" @click="emit('discard')">
<span>–</span>
<!-- TODO: translations -->
<span>Remove selection</span>
<span>Remove <span class="desktop-only">selection</span></span>
Copy link
Collaborator

@garethbowen garethbowen Nov 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's worth finding more fluid solution, because once we implement translation you won't know how long the string is going to be, or which part of it should be chopped on mobile view. My preferred solution is to handle it by allowing the button to drop to the next line, or switching to an icon if we can find one that works. The other option is to have two translations (one for desktop and one for mobile) but that's putting more work on translators as they'll need to test both resolutions to make sure every language renders correctly.

Copy link
Collaborator Author

@latin-panda latin-panda Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, we've looked at these options before. The icons aren't descriptive enough and need labels, ideally in a single line. I included two translations (for desktop and mobile), which require a bit more effort from the translators, but it's a one-time task.

</Button>
<Button v-if="canViewDetails" outlined severity="contrast" @click="emit('view-details')">
<!-- TODO: translations -->
Expand All @@ -49,7 +49,7 @@ const emit = defineEmits(['view-details', 'save', 'discard']);
<Button v-if="canSave" @click="emit('save')">
<IconSVG name="mdiCheckboxMarkedCircleOutline" size="sm" variant="inverted" />
<!-- TODO: translations -->
<span>Save selected</span>
<span>Save <span class="desktop-only">selected</span></span>
</Button>
</div>
</div>
Expand Down Expand Up @@ -95,4 +95,14 @@ const emit = defineEmits(['view-details', 'save', 'discard']);
width: 20px;
height: 20px;
}

.desktop-only {
display: inline;
}

@media screen and (max-width: #{pf.$sm}) {
.desktop-only {
display: none;
}
}
</style>