refac(map): Update `maxZoom` at map-level and map fit on location bbox
Contributor checklist
- [X] This pull request is on a separate branch and not the main branch
Description
- Configured
maxZoomat 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
maxZoomon the entire map avoids this. - Went with
maxZoom: 19as that is the lowest max zoom available as per docs:- Default layer is
z19 - CyclOSM layer is
z20
- Default layer is
- 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
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: 6000sets the duration of the map fitting/zooming animation to 6 secondspadding: 100fits 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
Related issue
- Kinda related to #964 ?
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
-
[x] 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.emailin their local activist repo
-
[x] The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed
-
[x] The Playwright end to end and Zap penetration tests have been ran and are passing (if necessary)
-
[x] The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)
Deploy Preview for activist-org ready!
| Name | Link |
|---|---|
| Latest commit | |
| Latest deploy log | https://app.netlify.com/sites/activist-org/deploys/67467bf1bae46d4f9da015b9 |
| 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.
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!