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

@@ -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 '<a href="https://leafletjs.com" title="A JavaScript library for interactive maps">Leaflet</a>';