one layer per rectangle to redouce events

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)

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()

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({