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

@@ -121,13 +121,15 @@ Ox.MapMarker = function(options) {
     }
 
     function drag(e) {
+        // In MapLibre GL, get current position from marker directly
+        var lngLat = that.marker.getLngLat();
         var northSouth = (that.place.north - that.place.south) / 2,
             lat = Ox.limit(
-                e.lngLat.lat,
+                lngLat.lat,
                 Ox.MIN_LATITUDE + northSouth,
                 Ox.MAX_LATITUDE - northSouth
             ),
-            lng = e.lngLat.lng,
+            lng = lngLat.lng,
             span = Math.min(
                 that.place.sizeEastWest * Ox.getDegreesPerMeter(lat) / 2, 179.99999999
             ),