one layer per rectangle to redouce events

examples/maps/map_editor/js/example.js

@@ -5,12 +5,43 @@ In this example, we use Ox.MapEditor
 'use strict';
 
 Ox.load(['UI', 'Geo'], function() {
+    var $storage = Ox.localStorage("map_editor")
+    var places = $storage('places') || []
     var $map = Ox.MapEditor({
             addPlace: function(place, callback) {
                 console.log("addPlace", place)
+                place.id = Ox.encodeBase26(Ox.uid())
+                places.push(place)
+                $storage("places", places)
+                $map.options({
+                    places: Ox.api(places, {
+                        geo: true,
+                        sort: '-area'
+                    })
+                })
+                setTimeout(() => {
+                    callback({
+                        status: {
+                            code: 200
+                        },
+                        data: place
+                    })
+                }, 200)
             },
             editPlace: function(place, callback) {
-                console.log("editPlace", place)
+                places.forEach(p => {
+                    if (p.id == place.id) {
+                        Object.assign(p, place);
+                        place = p
+                    }
+                })
+                $storage("places", places)
+                callback({
+                    status: {
+                        code: 200
+                    },
+                    data: place
+                })
             },
             getMatches: function(names, callback) {
                 console.log("getMatches", names)
@@ -20,9 +51,28 @@ Ox.load(['UI', 'Geo'], function() {
             height: 800,
             mode: 'add', // 'define',
             names: null,
-            places: [],
+            places: Ox.api(places, {
+                geo: true,
+                sort: '-area'
+            }),
             removePlace: function(place, callback) {
-                console.log("removePlace", place)
+                console.log("removePlace", place.id, places)
+                places = places.filter(p => { return p.id != place.id })
+                console.log("new places", places)
+                $storage("places", places)
+                $map.options({
+                    places: Ox.api(places, {
+                        geo: true,
+                        sort: '-area'
+                    })
+                })
+                setTimeout(() => {
+                    callback({
+                        status: {
+                            code: 200
+                        },
+                    })
+                }, 100)
             },
             selected: '',
             showControls: false,

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/MapEditor.js

@@ -46,6 +46,15 @@ Ox.MapEditor = function(options, self) {
                 self.$list.size();
                 self.$map.resizeMap();
             },
+            places: function() {
+                self.isAsync = Ox.isFunction(self.options.places);
+                self.$list.options({
+                    items: Ox.clone(self.options.places)
+                })
+                self.$map.options({
+                    places: self.options.places
+                })
+            },
             selected: function() {
                 self.$list.options({selected: self.options.selected});
             },

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