feat(#561): update the current location indicator for maps

[latin-panda]

Closes #561

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

• Chrome
• Firefox
• Safari (macOS)
• Safari (iOS)
• Chrome for Android
• Not applicable

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

Screenshots from testing:

Select one from maps:

Geoshape:

Geopoint:

Geopoint with big zoom out:

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?

No additional changes beyond those requested.

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

Forms are available in the dev demo preview.

What's changed

• Updates the current location indicator
• Updates the saved point icon

[changeset-bot]

🦋 Changeset detected

Latest commit: 10c73d2

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]

@garethbowen Could you have a look when you have time? I've shared a test server in the team's channel

[garethbowen]

The code looks fine to me, however in testing I'm finding some issues.

Error thrown

1. In Firefox desktop go to your server
2. Select the form geopoint-maps-with-relevant-readonly-default-value
3. In the "placement-maps" option
4. Click "zoom to current location"
5. Wait for the browser to do it's thing and zoom to you
6. Watch the console for a whole load of these errors:

Uncaught DOMException: CanvasRenderingContext2D.scale: Canvas could not create basic draw target.
    draw_ https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    getImage https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    createHitDetectionCanvas_ https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    getHitDetectionImage https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    setImageStyle https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    Vf https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    Gf https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    ah https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    renderFeature https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    b https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    prepareFrame https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    render https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    renderFrame https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    renderFrame_ https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    animationDelay_ https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    render https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    dispatchEvent https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    changed https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    handleLayerChange_ https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    dispatchEvent https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    changed https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    handleSourceChange_ https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    dispatchEvent https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    changed https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    clear https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:3
    Cm https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    callWithErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    callWithAsyncErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    call https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    CA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    callWithErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    flushJobs https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    promise callback*queueFlush https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    queueJob https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    scheduler https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    scheduler https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    trigger https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    endBatch https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    notify https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    trigger https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    set value https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    value https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    setTimeout handler*l https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    value https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    c https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:6
    vt https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:553
    callWithErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    callWithAsyncErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    emit https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    2 https://dynamic-xxxxx.netlify.app/assets/MapBlock-BE1Gsqf6-D0_mMFaP.js:1
    callWithErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    callWithAsyncErrorHandling https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    AA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:20
    addEventListener https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:20
    patchEvent https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:20
    patchProp https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:20
    vA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    wA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    mA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    BA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    vA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    wA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    mA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    BA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    vA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    wA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    mA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    XA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    run https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:9
    YA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    OA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    FA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    mA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    BA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    vA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    wA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    mA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    BA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    vA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    wA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    mA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    BA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
    vA https://dynamic-xxxxx.netlify.app/assets/index-CFkqqm0z.js:16
7 MapBlock-BE1Gsqf6-D0_mMFaP.js:3:5735

Performance issue

1. In Firefox on desktop or mobile
2. Select the form geopoint-maps-with-relevant-readonly-default-value
3. In the "placement-maps" option
4. Click "zoom to current location"
5. Then zoom in so the blue accuracy bubble fills the screen
6. Click to set the placement. For me this is really laggy. The more I zoom in the worse it gets, up to 5 seconds or so. I kept doing this on mobile and eventually the whole browser crashed. On my desktop it started maxing out CPU so I stopped.