refac(map): Update maxZoom at map-level and map fit on location bbox

[wkyoshida]

Contributor checklist

• This pull request is on a separate branch and not the main branch

---

Description

• Configured maxZoom at the map-level rather than per-layer:
  • Different per-layer configurations resulted in the CyclOSM layer hiding while the default layer remained visible - which is the expected behavior definitely, but may be confusing if the user specifically toggles to see the cycling profile. A configured maxZoom on the entire map avoids this.
  • Went with maxZoom: 19 as that is the lowest max zoom available as per docs:
    • Default layer is z19
    • CyclOSM layer is z20

Showcasing some of what I was thinking with #964 ...

• Modified to fit the map on the bbox of the event location:
  • This frees the map from relying on a generic zoom level for all events and fits on a zoom more appropriate for a given location.
  • Configured some settings, but these can be modified definitely if alternatives are preferred:
    • duration: 6000 sets the duration of the map fitting/zooming animation to 6 seconds
    • padding: 100 fits the map with an additional 100 pixels of padding around the bbox - useful so that the fit is not too zoomed-in
  • Note FYI - The bbox coordinates passed into fitBounds() may appear funky, but that is just due to the different bbox formats used by Nominatim and MapLibre
    • Nominatim: south Latitude, north Latitude, west Longitude, east Longitude
    • MapLibre: west Longitude, south Latitude, east Longitude, north Latitude

Related issue

• Kinda related to map: on event creation, allow location search and store location geometry #964 ?

[github-actions]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. Also consider joining our bi-weekly Saturday dev syncs. It'd be great to have you!

Maintainer checklist

• The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• The Playwright end to end and Zap penetration tests have been ran and are passing (if necessary)

• The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[netlify]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	d0c7366
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/66de6360c4f0a40008515e00
😎 Deploy Preview	https://deploy-preview-970--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andrewtavis]

Points on this, @wkyoshida :)

• Definitely agree that this is a better approach so that the zoom can be more appropriate to the location
• Do we have to have the zoom, or is it possible to just have a one 1-2 second one from not too far away into the map location? I think there might even be accessibility things for users who don't like things moving so much with a full globe zoom?
• Is it possible to have a 20 zoom level, as as of now the user wouldn't be able to necessarily orient the location to other surrounding to know where it is without zooming out? Or maybe we add a bit to the padding?

Thanks so much for continuing to crack away at all this!