diff --git a/.changeset/quick-bobcats-pull.md b/.changeset/quick-bobcats-pull.md new file mode 100644 index 000000000..6e01a38ba --- /dev/null +++ b/.changeset/quick-bobcats-pull.md @@ -0,0 +1,5 @@ +--- +'@getodk/web-forms': patch +--- + +Adds map tile attribution diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-chromium.png index 3ff50645e..3c609692f 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-firefox.png index 333350250..ae6e1826b 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-webkit.png index 26f8b9827..98b223a00 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-full-screen-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-chromium.png index c1d75a2b4..0ef52185d 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-firefox.png index 114a29a94..bd538017e 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-webkit.png index 5888ac324..15b872471 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-initial-state-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-chromium.png index 2b9bf9dfa..eb1e97810 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-firefox.png index 918cbeb1e..40231bb03 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-webkit.png index 0df8b9550..613d45b41 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-panning-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-chromium.png index 020c819da..d29f854bb 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-firefox.png index 9b6c3d52d..e55ed5830 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-webkit.png index 0b68b7b57..a73feb593 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-saved-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-chromium.png index 731a7da40..ea97cae05 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-firefox.png index f5f3ef9b7..6b6dbb218 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-webkit.png index c08abfc5f..068abab4e 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-point-selected-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-chromium.png index 714af5a43..ea97cae05 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-firefox.png index 0bf6fb864..6d5f54f71 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-webkit.png index af1279c46..5cfaf397b 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-removed-saved-feature-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-chromium.png index 5cf8a3389..d29f854bb 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-firefox.png index 6caa44e57..aa89c7a70 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-webkit.png index 8d8eb8d05..535a42466 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-view-details-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-chromium.png index 3c577fc09..f4fbda579 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-firefox.png index a5219e951..5f662eb32 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-webkit.png index f63b3c50f..79e851f69 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-current-location-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-chromium.png index 55c3789c7..ec76c5fbb 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-firefox.png index fd9f00cbf..e1609b5e6 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-webkit.png index 52f9738c7..caf0ddb18 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-in-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-chromium.png index bdc816635..c82c96d86 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-firefox.png index 8522d95fe..6792db4fd 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-webkit.png index 88ecf9abc..226114187 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-out-webkit.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-chromium.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-chromium.png index a1317ef25..517b214d8 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-chromium.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-chromium.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-firefox.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-firefox.png index 67294c59d..f01be93ed 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-firefox.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-firefox.png differ diff --git a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-webkit.png b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-webkit.png index 25ccb1c0b..edf454aff 100644 Binary files a/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-webkit.png and b/packages/web-forms/e2e/test-cases/all-question-types.test.ts-snapshots/select-map-zoom-to-fit-all-features-webkit.png differ diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index 1bd8cbb68..ecd2f3d32 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -200,7 +200,7 @@ const discardSavedFeature = () => { .map-block-component :deep(.ol-zoom) { position: absolute; right: var(--odk-map-spacing); - bottom: var(--odk-map-spacing); + bottom: 35px; display: flex; flex-direction: column; flex-wrap: nowrap; @@ -234,6 +234,33 @@ const discardSavedFeature = () => { } } +.map-block-component :deep(.ol-attribution) { + position: absolute; + right: 0; + bottom: 0; + background: rgba(245, 245, 245, 0.8); + + button { + display: none; + } + + ul { + margin: 0; + padding: 5px; + } + + li { + list-style: none; + } + + li, + a { + font-size: 10px; + line-height: 14px; + color: var(--odk-muted-text-color); + } +} + .map-block-error { font-size: var(--odk-base-font-size); color: var(--odk-error-text-color); diff --git a/packages/web-forms/src/components/common/map/MapProperties.vue b/packages/web-forms/src/components/common/map/MapProperties.vue index a93b37cad..553272915 100644 --- a/packages/web-forms/src/components/common/map/MapProperties.vue +++ b/packages/web-forms/src/components/common/map/MapProperties.vue @@ -97,19 +97,18 @@ const orderedProps = computed(() => { margin: 0; .property-line { - display: flex; - justify-content: flex-start; - flex-wrap: wrap; - gap: 5px; + display: block; padding: 15px 0; dt, dd { + display: inline; margin: 0; } dt:after { content: ':'; + margin-right: 5px; } &:not(:last-child) { diff --git a/packages/web-forms/src/components/common/map/useMapBlock.ts b/packages/web-forms/src/components/common/map/useMapBlock.ts index f5783e849..4eeac4f23 100644 --- a/packages/web-forms/src/components/common/map/useMapBlock.ts +++ b/packages/web-forms/src/components/common/map/useMapBlock.ts @@ -5,7 +5,7 @@ import { } from '@/components/common/map/map-styles.ts'; import type { FeatureCollection } from 'geojson'; import { Map, MapBrowserEvent, View } from 'ol'; -import { Zoom } from 'ol/control'; +import { Attribution, Zoom } from 'ol/control'; import { getCenter } from 'ol/extent'; import Feature from 'ol/Feature'; import GeoJSON from 'ol/format/GeoJSON'; @@ -76,7 +76,7 @@ export function useMapBlock() { projection: DEFAULT_VIEW_PROJECTION, extent: getProjection(DEFAULT_VIEW_PROJECTION)?.getExtent(), }), - controls: [new Zoom()], + controls: [new Zoom(), new Attribution({ collapsible: false })], }); currentState.value = STATES.READY;