From 970a64e2762c8dd8c9e265acb9195f069ea7bb0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Thu, 29 Jun 2023 14:52:26 +0200 Subject: [PATCH] Enable mousewheel when focusing on the map Zooming with the mousewheel is useful when you want to use it, but annoying when you don't want to. Here we're taking an intermediary approach: by default, the mousewheel isn't active, but it will be active after focusing on the map, so it can be used both to scroll and to zoom. This behavior presents usability issues, though, since we aren't making users aware of the way the mousewheel works, and even if they were aware, it could be confusing anyway. However, I currently think it's better than always enabling or always disabling the mousewheel (might change my mind, though). Note that the "focus" event is only used on the map, so if we click on a marker or navigate to a marker with the keyboard without focusing on the map first, the mousewheel isn't enabled. The same would happen if we used the "click" event. We might use the Leaflet.GestureHandling plugin in the future to deal with this issue and the scroll on touch screens. --- app/assets/javascripts/map.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/map.js b/app/assets/javascripts/map.js index 396ac5418..d4b131611 100644 --- a/app/assets/javascripts/map.js +++ b/app/assets/javascripts/map.js @@ -81,12 +81,20 @@ App.Map.addGeozones(map); }, leafletMap: function(element) { - var centerData, mapCenterLatLng; + var centerData, mapCenterLatLng, map; centerData = App.Map.centerData(element); mapCenterLatLng = new L.LatLng(centerData.lat, centerData.long); + map = L.map(element.id, { scrollWheelZoom: false }).setView(mapCenterLatLng, centerData.zoom); - return L.map(element.id, { scrollWheelZoom: false }).setView(mapCenterLatLng, centerData.zoom); + map.on("focus", function() { + map.scrollWheelZoom.enable(); + }); + map.on("blur mouseout", function() { + map.scrollWheelZoom.disable(); + }); + + return map; }, attributionPrefix: function() { return 'Leaflet';