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

@@ -621,6 +621,18 @@ Ox.Map = function(options, self) {
     }
 
     function clickMap(event) {
+        // Check if click hit any rectangle fill layers (which have rectangle click handlers)
+        var features = self.map.queryRenderedFeatures(event.point, {
+            layers: self.map.getStyle().layers
+                .filter(layer => layer.id.includes('-fill'))
+                .map(layer => layer.id)
+        });
+        
+        // If we clicked on a rectangle, don't process map click
+        if (features.length > 0) {
+            return;
+        }
+        
         var place = getSelectedPlace();
         if (self.options.clickable/* && !editing()*/) {
             getPlaceByLatLng(event.lngLat, self.map.getBounds(), function(place) {