➕ [#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

@@ -27,6 +27,21 @@ const searchControlMessages = defineMessages({
   },
 });
 
+const leafletGestureHandlingText = defineMessages({
+  touch: {
+    description: 'Gesturehandeling phone touch message.',
+    defaultMessage: 'Use two fingers to move the map',
+  },
+  scroll: {
+    description: 'Gesturehandeling pc scroll message.',
+    defaultMessage: 'Use ctrl + scroll to zoom the map',
+  },
+  scrollMac: {
+    description: 'Gesturehandeling mac scroll message.',
+    defaultMessage: 'Use \u2318 + scroll to zoom the map',
+  },
+});
+
 const useDefaultCoordinates = () => {
   // FIXME: can't call hooks conditionally
   const {loading, latitude, longitude, error} = useGeolocation();
@@ -72,6 +87,15 @@ const LeaftletMap = ({
       crs={MAP_DEFAULTS.crs}
       attributionControl
       className={className}
+      gestureHandling
+      gestureHandlingOptions={{
+        text: {
+          touch: intl.formatMessage(leafletGestureHandlingText.touch),
+          scroll: intl.formatMessage(leafletGestureHandlingText.scroll),
+          scrollMac: intl.formatMessage(leafletGestureHandlingText.scrollMac),
+        },
+        duration: 3000,
+      }}
     >
       <TileLayer url={TILE_LAYERS.url} {...TILE_LAYERS.options} />
       {coordinates ? (

src/i18n/compiled/en.json

@@ -221,6 +221,12 @@
       "value": "provider"
     }
   ],
+  "BboxO6": [
+    {
+      "type": 0,
+      "value": "Use two fingers to move the map"
+    }
+  ],
   "CvRUHm": [
     {
       "type": 0,
@@ -839,6 +845,12 @@
       "value": ". Extend your session if you wish to continue."
     }
   ],
+  "nLymjB": [
+    {
+      "type": 0,
+      "value": "Use ctrl + scroll to zoom the map"
+    }
+  ],
   "nfRRDu": [
     {
       "type": 0,
@@ -863,6 +875,12 @@
       "value": "Add another product"
     }
   ],
+  "ovI+W7": [
+    {
+      "type": 0,
+      "value": "Use ⌘ + scroll to zoom the map"
+    }
+  ],
   "qKxfrz": [
     {
       "type": 0,

src/i18n/compiled/nl.json

@@ -221,6 +221,12 @@
       "value": "provider"
     }
   ],
+  "BboxO6": [
+    {
+      "type": 0,
+      "value": "Use two fingers to move the map"
+    }
+  ],
   "CvRUHm": [
     {
       "type": 0,
@@ -839,6 +845,12 @@
       "value": ". Verleng uw sessie indien u door wenst te gaan."
     }
   ],
+  "nLymjB": [
+    {
+      "type": 0,
+      "value": "Use ctrl + scroll to zoom the map"
+    }
+  ],
   "nfRRDu": [
     {
       "type": 0,
@@ -863,6 +875,12 @@
       "value": "Nog een product toevoegen"
     }
   ],
+  "ovI+W7": [
+    {
+      "type": 0,
+      "value": "Use ⌘ + scroll to zoom the map"
+    }
+  ],
   "qKxfrz": [
     {
       "type": 0,

src/i18n/messages/en.json

@@ -144,6 +144,11 @@
     "description": "Login button label",
     "originalDefault": "Login with {provider}"
   },
+  "BboxO6": {
+    "defaultMessage": "Use two fingers to move the map",
+    "description": "Gesturehandeling phone touch message.",
+    "originalDefault": "Use two fingers to move the map"
+  },
   "CvRUHm": {
     "defaultMessage": "This form is currently undergoing maintenance and can not be accessed at the moment.",
     "description": "Maintenance mode message",
@@ -559,6 +564,11 @@
     "description": "Session expiry warning message (in modal)",
     "originalDefault": "Your session is about to expire {delta}. Extend your session if you wish to continue."
   },
+  "nLymjB": {
+    "defaultMessage": "Use ctrl + scroll to zoom the map",
+    "description": "Gesturehandeling pc scroll message.",
+    "originalDefault": "Use ctrl + scroll to zoom the map"
+  },
   "nfRRDu": {
     "defaultMessage": "yyyy",
     "description": "Placeholder for year part of a date",
@@ -579,6 +589,11 @@
     "description": "Appointments: add additional product/service button text",
     "originalDefault": "Add another product"
   },
+  "ovI+W7": {
+    "defaultMessage": "Use ⌘ + scroll to zoom the map",
+    "description": "Gesturehandeling mac scroll message.",
+    "originalDefault": "Use ⌘ + scroll to zoom the map"
+  },
   "qKxfrz": {
     "defaultMessage": "Log in to co-sign the form",
     "description": "Log in to co-sign the form title",

src/i18n/messages/nl.json

@@ -145,6 +145,11 @@
     "description": "Login button label",
     "originalDefault": "Login with {provider}"
   },
+  "BboxO6": {
+    "defaultMessage": "Use two fingers to move the map",
+    "description": "Gesturehandeling phone touch message.",
+    "originalDefault": "Use two fingers to move the map"
+  },
   "CvRUHm": {
     "defaultMessage": "Dit formulier is momenteel in onderhoud en daardoor tijdelijk niet beschikbaar.",
     "description": "Maintenance mode message",
@@ -569,6 +574,11 @@
     "description": "Session expiry warning message (in modal)",
     "originalDefault": "Your session is about to expire {delta}. Extend your session if you wish to continue."
   },
+  "nLymjB": {
+    "defaultMessage": "Use ctrl + scroll to zoom the map",
+    "description": "Gesturehandeling pc scroll message.",
+    "originalDefault": "Use ctrl + scroll to zoom the map"
+  },
   "nfRRDu": {
     "defaultMessage": "jjjj",
     "description": "Placeholder for year part of a date",
@@ -589,6 +599,11 @@
     "description": "Appointments: add additional product/service button text",
     "originalDefault": "Add another product"
   },
+  "ovI+W7": {
+    "defaultMessage": "Use ⌘ + scroll to zoom the map",
+    "description": "Gesturehandeling mac scroll message.",
+    "originalDefault": "Use ⌘ + scroll to zoom the map"
+  },
   "qKxfrz": {
     "defaultMessage": "Log in om het formulier mede te ondertekenen",
     "description": "Log in to co-sign the form title",

src/map/index.js

@@ -1,4 +1,5 @@
 import L from 'leaflet';
+import {GestureHandling} from 'leaflet-gesture-handling';
 import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
 import iconUrl from 'leaflet/dist/images/marker-icon.png';
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
@@ -18,4 +19,6 @@ const fixIconUrls = () => {
   });
 };
 
+L.Map.addInitHook('addHandler', 'gestureHandling', GestureHandling);
+
 export {fixIconUrls};

src/scss/components/_leaflet-map.scss

@@ -1,5 +1,6 @@
 @use 'microscope-sass/lib/bem';
 @import 'leaflet-geosearch/dist/geosearch.css';
+@import 'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';
 
 @import '../mixins/prefix';
 

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"