uwazi
uwazi copied to clipboard
Disable wheel zoom on page's embeded maps
Describe the bug When user scrolls down the page and one section is the map, the mouse stops in the map, zooming it instead of continue scrolling until the bottom of the page.
To Reproduce Steps to reproduce the behavior:
- Go to a custom page, endreprisals.ishr for example.
- Scroll down the page.
- See error.
Expected behavior When scrolling down the page, even the mouse is inside the map, the user should be able to continue scrolling the page instead of zooming the map. For example, to zoom the map only after click on map.
Screenshots Video link.
Device (please select all that apply)
- [x] Desktop
- [x] Mobile
Browser All browsers, mobile and desktop.
Additional context
Maybe @juanmnl could give better advice for the interaction :)
@meegido I think this one revolves around the question of what is a good default for the map. In my opinion generally speaking the mouse wheel shouldn't react over the map in most cases by default. But in that case we also need to add the zoom +/- buttons by default.
@meegido @txau I think there are 2 different issues here, the first is blocking the default map interaction on a scrolling site, when the map is just a section of the website/page. One possible solution for this is either have a 1 or 2 seconds delay on hover, where you block the default behavior until the cursor is stopped over the map and we infer that the user wants to explore it. Another option is to have an explicit action (maybe an overlay with [explore map] action that triggers the default interaction.
For a full page, that is only a map, the default behavior shouldn't be a problem, but for users who don't want it, we could have a [disable/enable wheel behavior] toggle.
Hope I understood well 🫠
Sorry for not being attentive to the GitHub comments.
I'm removing the option to zoom in on the map with CSS. That way, users can still click on the entities (the sidebar opens) but not zoom into the map and get trapped into the map when the design requires it to be full width. From my perspective, @txau's suggestion is the more straightforward option.