Here's what we've accomplished to fix MapLibre GL rectangle editing:

Core Issues Fixed:

  1. MapLibre GL Event Compatibility: Fixed drag event handlers in MapMarker.js and MapRectangleMarker.js to use marker.getLngLat() instead of accessing e.lngLat properties that don't exist in MapLibre GL.
  2. Rectangle Handle Visibility: Replaced Ox.MapMarkerImage() with proper DOM elements for corner handles since MapLibre GL expects DOM elements, not image objects.
  3. Handle Positioning: Limited corner markers to only the 4 corners (ne, nw, se, sw) instead of all 8 positions (including edges).
  4. Visual Rectangle Updates: Added that.rectangle.setBounds() call in MapRectangle update method so the visual rectangle updates when handles are dragged.
  5. Click Event Conflicts: Fixed map click handler to detect rectangle clicks and avoid deselecting rectangles when clicked for editing.
  6. Place Editable Property: Added editable: true as default in MapPlace constructor.

  Files Modified:

  - MapPlace.js: Added editable: true default
  - MapRectangle.js:
    - Limited markers to 4 corners only
    - Added rectangle bounds update in update() method
  - MapRectangleMarker.js:
    - Created proper DOM elements for handles
    - Fixed MapLibre GL drag event handling
    - Improved event cleanup
  - MapMarker.js: Fixed MapLibre GL drag event handling
  - MapMarkerImage.js: Fixed rectangle marker color (kept for backward compatibility)
  - Map.js: Added rectangle click detection to prevent conflicts

  Result:

  Rectangle editing now works completely:
  - Click rectangle → shows 4 corner handles
  - Drag handles → resizes rectangle in real-time
  - No console errors
  - Proper event handling

source/UI/js/Map/MapRectangleMarker.js

@@ -37,30 +37,38 @@ Ox.MapRectangleMarker = function(options) {
         raiseOnDrag: false
     });
     */
+    // Create a simple DOM element for the corner handle
+    var element = document.createElement('div');
+    element.style.width = '8px';
+    element.style.height = '8px';
+    element.style.backgroundColor = 'white';
+    element.style.border = '2px solid black';
+    element.style.borderRadius = '2px';
+    element.style.cursor = that.position + '-resize';
+    element.style.boxSizing = 'border-box';
+    
     that.marker = new maplibregl.Marker({
-        cursor: that.position + '-resize',
         draggable: true,
-        element: Ox.MapMarkerImage({
-            mode: 'editing',
-            rectangle: true,
-            type: that.place.id[0] == '_' ? 'result' : 'place'
-        }),
+        element: element,
     });
     that.marker.setLngLat(that.place.points[that.position])
 
     function dragstart(e) {
         Ox.$body.addClass('OxDragging');
+        // In MapLibre GL, get position from marker directly
+        var lngLat = that.marker.getLngLat();
         that.drag = {
-            lat: e.lngLat.lat,
-            lng: e.lngLat.lng
+            lat: lngLat.lat,
+            lng: lngLat.lng
         };
     }
 
     function drag(e) {
         // fixme: implement shift+drag (center stays the same)
-        Ox.Log('Map', e.pixel.x, e.pixel.y)
-        var lat = Ox.limit(e.lngLat.lat, Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
-            lng = e.lngLat.lng;
+        // In MapLibre GL, get current position from marker directly
+        var lngLat = that.marker.getLngLat();
+        var lat = Ox.limit(lngLat.lat, Ox.MIN_LATITUDE, Ox.MAX_LATITUDE),
+            lng = lngLat.lng;
         that.drag = {
             lat: lat,
             lng: lng
@@ -106,33 +114,29 @@ Ox.MapRectangleMarker = function(options) {
         that.marker.on('dragstart', dragstart);
         that.marker.on('drag', drag);
         that.marker.on('dragend', dragend);
+        return that;
     };
 
     /*@
     remove <f> remove
     @*/
     that.remove = function() {
+        // Clean up MapLibre events
+        that.marker.off('dragstart');
+        that.marker.off('drag');
+        that.marker.off('dragend');
+        // Remove marker from map
         that.marker.remove();
-        console.log("remove marker, fix events")
-        //google.maps.event.clearListeners(that.marker);
+        return that;
     };
 
     /*@
     update <f> update
     @*/
     that.update = function() {
-        var marker = new maplibregl.Marker({
-            cursor: that.position + '-resize',
-            draggable: true,
-            element: Ox.MapMarkerImage({
-                mode: 'editing',
-                rectangle: true,
-                type: that.place.id[0] == '_' ? 'result' : 'place'
-            }),
-        });
-        marker.setLngLat(that.place.points[that.position])
-        that.marker.remove()
-        that.marker = marker
+        // Just update position - visual stays the same during editing
+        that.marker.setLngLat(that.place.points[that.position]);
+        return that;
     };
 
     return that;