➕ [#2176] added gesture handling for leaflet

package.json

@@ -42,6 +42,7 @@
     "immer": "^9.0.6",
     "leaflet": "^1.7.1",
     "leaflet-geosearch": "^3.8.0",
+    "leaflet-gesture-handling": "^1.2.2",
     "microscope-sass": "^2.0.0",
     "moment": "^2.29.1",
     "proj4leaflet": "^1.0.2",

src/components/Map/index.js

@@ -1,4 +1,5 @@
 import {GeoSearchControl} from 'leaflet-geosearch';
+import {GestureHandling} from 'leaflet-gesture-handling';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import React, {useCallback, useContext, useEffect} from 'react';
@@ -95,6 +96,7 @@ const LeaftletMap = ({
         }}
       />
       {disabled ? <DisabledMapControls /> : <CaptureClick setMarker={onMarkerSet} />}
+      <GestureHandlingSetter />
     </MapContainer>
   );
 };
@@ -113,6 +115,7 @@ const MapView = ({coordinates = null}) => {
     if (!coordinates.filter(value => isFinite(value)).length === 2) return;
     map.setView(coordinates);
   }, [map, coordinates]);
+
   // rendering is done by leaflet, so just return null
   return null;
 };
@@ -251,4 +254,11 @@ CaptureClick.propTypes = {
   setMarker: PropTypes.func.isRequired,
 };
 
+const GestureHandlingSetter = () => {
+  const map = useMap();
+  map.gestureHandling.enable();
+  map.addHandler('gestureHandling', GestureHandling);
+  return null;
+};
+
 export default LeaftletMap;

src/scss/components/_leaflet-map.scss

@@ -2,6 +2,7 @@
 @import 'leaflet-geosearch/dist/geosearch.css';
 
 @import '../mixins/prefix';
+@import 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';
 
 .#{prefix(leaflet-map)} {
   height: 400px;

yarn.lock

@@ -9866,6 +9866,11 @@ leaflet-geosearch@^3.8.0:
     "@googlemaps/js-api-loader" "^1.14.3"
     leaflet "^1.6.0"
 
+leaflet-gesture-handling@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/leaflet-gesture-handling/-/leaflet-gesture-handling-1.2.2.tgz#ea10afb94f2d477d77d47beb21e409ed327df07a"
+  integrity sha512-Blf5V4PoNphWkzL7Y1qge+Spkd4OCQ2atjwUNhMhLIcjKzPcBH++x/lwOinaR9jSqLWqJ6oKYO8d0XdTffy4hQ==
+
 leaflet@^1.6.0, leaflet@^1.7.1:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"