Gis: Prevents accidentally changing the zoom on the map.

TYPE: Feature LINK: OGC-1944
OneGov · Jan 30, 2025 · a91c91e · a91c91e
1 parent 4d318fc
commit a91c91e
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 8 deletions.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -15,7 +15,7 @@ repos:
         exclude: .pre-commit-config.yaml
       - id: pt_structure
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.9.2
+    rev: v0.9.3
     hooks:
       - id: ruff
         args: [ "--fix" ]
@@ -32,7 +32,7 @@ repos:
     - id: sass-lint
       files: '^src/.*\.scss'
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.18.0
+    rev: v9.19.0
     hooks:
     - id: eslint
       files: '^src/.*\.jsx?$'

diff --git a/src/onegov/gis/assets/js/leaflet-integration.js b/src/onegov/gis/assets/js/leaflet-integration.js
@@ -457,13 +457,28 @@ function spawnDefaultMap(target, options, cb) {
 }
 
 function spawnMap(element, lat, lon, zoom, includeZoomControls, cb) {
+    let $el = $(element);
 
-    var $el = $(element);
+    let lang = getLanguage();
+
+    // there's no translation layer for onegov.gis yet
+    let strings = {
+        'de': {
+            clickToActivate: _("Klicken Sie zur Aktivierung der Karte")
+        },
+        'fr': {
+            clickToActivate: _("Cliquez pour activer la carte")
+        },
+        'en': {
+            clickToActivate: _("Click to activate map")
+        }
+    };
+    strings = strings[lang] || strings.de;
 
     // the height is calculated form the width using the golden ratio
     element.css('height', $el.data('map-height') || $el.width() / 1.618 + 'px');
 
-    var options = {
+    let options = {
         zoomControl: false,
         sleepNote: false,
         sleepTime: 500,
@@ -475,17 +490,75 @@ function spawnMap(element, lat, lon, zoom, includeZoomControls, cb) {
     spawnDefaultMap(element[0], options, function(map) {
         map.setView([lat, lon], zoom);
 
-        if (typeof includeZoomControls === 'undefined' || includeZoomControls) {
-            new L.Control.Zoom({position: 'topright'}).addTo(map);
+        function addBlocker() {
+            const isOnEditPage = window.location.href.endsWith('+edit');
+            if (!isOnEditPage) {
+                return;
+            }
+
+            // Add a blocker to prevent interaction with the map until clicked
+            const blocker = L.DomUtil.create('div', 'map-event-blocker');
+            blocker.style.position = 'absolute';
+            blocker.style.top = '0';
+            blocker.style.left = '0';
+            blocker.style.right = '0';
+            blocker.style.bottom = '0';
+            blocker.style.zIndex = '1000';
+            blocker.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
+            blocker.style.cursor = 'pointer';
+            blocker.style.display = 'flex';
+            blocker.style.alignItems = 'center';
+            blocker.style.justifyContent = 'center';
+
+            const message = L.DomUtil.create('div', 'map-click-message');
+            message.innerHTML = strings.clickToActivate;
+            message.style.backgroundColor = 'white';
+            message.style.padding = '8px 16px';
+            message.style.borderRadius = '4px';
+            message.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+            message.style.fontSize = '14px';
+
+            blocker.appendChild(message);
+            map.getContainer().appendChild(blocker);
+
+            // Block all events
+            L.DomEvent
+                .on(blocker, 'mousewheel', L.DomEvent.stopPropagation)
+                .on(blocker, 'wheel', L.DomEvent.stopPropagation)
+                .on(blocker, 'mousedown', L.DomEvent.stopPropagation)
+                .on(blocker, 'touchstart', L.DomEvent.stopPropagation)
+                .on(blocker, 'dblclick', L.DomEvent.stopPropagation)
+                .on(blocker, 'contextmenu', L.DomEvent.stopPropagation)
+                .on(blocker, 'click', function(e) {
+                    blocker.remove();
+                    L.DomEvent.stopPropagation(e);
+                });
+
+            return blocker;
         }
 
+        // Add initial blocker
+        addBlocker();
+
+        // Add click handler to document to re-add blocker when clicking outside
+        $(document).on('click', function(e) {
+            if (!$(e.target).closest(map.getContainer()).length) {
+                if (!map.getContainer().querySelector('.map-event-blocker')) {
+                    addBlocker();
+                }
+            }
+        });
+
         // remove leaflet link - we don't advertise other open source projects
         // we depend on as visibly either
         map.attributionControl.setPrefix('');
 
+        if (typeof includeZoomControls === 'undefined' || includeZoomControls) {
+            new L.Control.Zoom({position: 'topright'}).addTo(map);
+        }
+
         map.on('load', function() {
             var container = $(map._container);
-
             // buttons inside the map lead to form-submit if not prevented form it
             container.find('button').on('click', function(e) {
                 e.preventDefault();
@@ -494,7 +567,6 @@ function spawnMap(element, lat, lon, zoom, includeZoomControls, cb) {
 
         document.leafletmaps = document.leafletmaps || [];
         document.leafletmaps.push(map);
-
         cb(map);
     });
 }