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
