maps: use Leaflet.GestureHandling to avoid zooming on map during scroll (#39057)

combo/apps/maps/models.py

@@ -277,8 +277,10 @@ class Map(CellBase):
     class Media:
         js = ('/jsi18n',
               'xstatic/leaflet.js', 'js/leaflet-gps.js', 'js/combo.map.js',
-              'xstatic/leaflet.markercluster.js')
-        css = {'all': ('xstatic/leaflet.css', 'css/combo.map.css')}
+              'xstatic/leaflet.markercluster.js',
+              'xstatic/leaflet-gesture-handling.min.js',
+              )
+        css = {'all': ('xstatic/leaflet.css', 'css/combo.map.css', 'xstatic/leaflet-gesture-handling.min.css')}
 
     def get_default_position(self):
         return settings.COMBO_MAP_DEFAULT_POSITION

combo/apps/maps/static/js/combo.map.js

@@ -131,6 +131,7 @@ $(function() {
                   L.latLng($map_widget.data('max-bounds-lat1'), $map_widget.data('max-bounds-lng1')),
                   L.latLng($map_widget.data('max-bounds-lat2'), $map_widget.data('max-bounds-lng2')))
         }
+        map_options.gestureHandling = true;
         var map = L.map($map_widget[0], map_options);
         if ($map_widget.data('draggable') === false) {
           map.dragging.disable();

combo/settings.py

@@ -82,6 +82,7 @@ INSTALLED_APPS = (
     'xstatic.pkg.opensans',
     'xstatic.pkg.roboto_fontface',
     'xstatic.pkg.leaflet_markercluster',
+    'xstatic.pkg.leaflet_gesturehandling',
 )
 
 MIDDLEWARE = (

debian/control

@@ -16,6 +16,7 @@ Depends: ${misc:Depends}, ${python3:Depends},
     python3-feedparser,
     python3-xstatic-josefinsans,
     python3-xstatic-leaflet,
+    python3-xstatic-leaflet-gesturehandling,
     python3-xstatic-leaflet-markercluster,
     python3-xstatic-opensans,
     python3-xstatic-roboto-fontface (>= 0.5.0.0),

setup.py

@@ -155,6 +155,7 @@ setup(
         'django-jsonfield',
         'requests',
         'XStatic-Leaflet',
+        'XStatic-Leaflet-GestureHandling',
         'XStatic-Leaflet-MarkerCluster',
         'XStatic_JosefinSans',
         'XStatic_OpenSans',