From 80d3919b467a51d08177b8692758bae2adf4105e Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Wed, 6 Aug 2025 23:31:07 +0200
Subject: [PATCH] one layer per rectangle to redouce events

---
 source/UI/js/Map/Map.js                |  3 +--
 source/UI/js/Map/MapRectangle.js       | 23 +++++++++++++----------
 source/UI/js/Map/MapRectangleMarker.js | 11 ++++-------
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/source/UI/js/Map/Map.js b/source/UI/js/Map/Map.js
index 7ba855a1..47022935 100644
--- a/source/UI/js/Map/Map.js
+++ b/source/UI/js/Map/Map.js
@@ -621,8 +621,6 @@ Ox.Map = function(options, self) {
     }
 
     function clickMap(event) {
-        console.log("not this one", event)
-        return
         var place = getSelectedPlace();
         if (self.options.clickable/* && !editing()*/) {
             getPlaceByLatLng(event.lngLat, self.map.getBounds(), function(place) {
@@ -718,6 +716,7 @@ Ox.Map = function(options, self) {
             callback = point;
             point = self.map.getCenter();
         }
+        // fixme, why is getMaxZoom off by one?
         let maxZoom = self.map.getMaxZoom()
         setTimeout(() => {
             callback(maxZoom)
diff --git a/source/UI/js/Map/MapRectangle.js b/source/UI/js/Map/MapRectangle.js
index 57c23f94..c80c8b1d 100644
--- a/source/UI/js/Map/MapRectangle.js
+++ b/source/UI/js/Map/MapRectangle.js
@@ -22,23 +22,25 @@ class MapLibreRectangle {
                 id: this.id
             }
         };
-        this.source = this.map.getSource('rectangles')
+        var sourceId = `${this.id}-rectangles`
+        this.source = this.map.getSource(sourceId)
         if (!this.source) {
-            this.map.addSource('rectangles', {
+            this.map.addSource(sourceId, {
                 type: 'geojson',
                 data: {
                     type: 'FeatureCollection',
                     features: []
                 }
             });
-            this.source = this.map.getSource('rectangles')
+            this.source = this.map.getSource(sourceId)
 
             // Add fill layer
-            if (!this.map.getLayer('rectangles-fill')) {
+            var layerId = `${this.id}-fill`
+            if (!this.map.getLayer(layerId)) {
                 this.map.addLayer({
-                    id: 'rectangles-fill',
+                    id: layerId,
                     type: 'fill',
-                    source: 'rectangles',
+                    source: sourceId,
                     paint: {
                         'fill-color': '#088',
                         'fill-opacity': 0.3
@@ -47,11 +49,12 @@ class MapLibreRectangle {
             }
 
             // Add outline layer
-            if (!this.map.getLayer('rectangles-outline')) {
+            var layerId = `${this.id}-outline`
+            if (!this.map.getLayer(layerId)) {
                 this.map.addLayer({
-                    id: 'rectangles-outline',
+                    id: layerId,
                     type: 'line',
-                    source: 'rectangles',
+                    source: sourceId,
                     paint: {
                         'line-color': '#000',
                         'line-width': 2
@@ -140,7 +143,7 @@ class MapLibreRectangle {
         });
     }
     _enableClicking() {
-        this.map.on('click', `rectangles-fill`, e => {
+        this.map.on('click', `${this.id}-fill`, e => {
             console.log('click', e)
             if (this.onclick) {
                 e.preventDefault()
diff --git a/source/UI/js/Map/MapRectangleMarker.js b/source/UI/js/Map/MapRectangleMarker.js
index b123ece6..8bf7cbb3 100644
--- a/source/UI/js/Map/MapRectangleMarker.js
+++ b/source/UI/js/Map/MapRectangleMarker.js
@@ -103,12 +103,9 @@ Ox.MapRectangleMarker = function(options) {
     @*/
     that.add = function() {
         that.marker.addTo(that.map.map);
-        console.log("add marker, fix events")
-        /*
-        google.maps.event.addListener(that.marker, 'dragstart', dragstart);
-        google.maps.event.addListener(that.marker, 'drag', drag);
-        google.maps.event.addListener(that.marker, 'dragend', dragend);
-        */
+        that.marker.on('dragstart', dragstart);
+        that.marker.on('drag', drag);
+        that.marker.on('dragend', dragend);
     };
 
     /*@
@@ -124,7 +121,7 @@ Ox.MapRectangleMarker = function(options) {
     update <f> update
     @*/
     that.update = function() {
-        marker = new maplibregl.Marker({
+        var marker = new maplibregl.Marker({
             cursor: that.position + '-resize',
             draggable: true,
             element: Ox.MapMarkerImage({