0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

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

Browse source 
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
This commit is contained in:
Sanjay Bhangar 2025-08-09 14:15:54 +02:00
commit a0b1e0eab4
6 changed files with 52 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

8
source/UI/js/Map/MapRectangle.js
View file

@ -211,9 +211,10 @@ Ox.MapRectangle = function(options) {
that.rectangle.onclick = click
/*@
markers <a> array of markers
markers <a> array of markers (only corners for rectangle resizing)
@*/
that.markers = Ox.map(that.place.points, function(point, position) {
var cornerPositions = ['ne', 'nw', 'se', 'sw'];
that.markers = cornerPositions.map(function(position) {
return new Ox.MapRectangleMarker({
map: that.map,
place: that.place,
@ -224,7 +225,6 @@ Ox.MapRectangle = function(options) {
setOptions();
function click(e) {
console.log('rectangle click', e)
if (
that.map.options('editable')
&& that.place.editable
@ -313,6 +313,8 @@ Ox.MapRectangle = function(options) {
that.update = function() {
Ox.Log('Map', 'UPDATE...')
setOptions();
// Update the visual rectangle bounds
that.rectangle.setBounds(that.place.bounds);
Ox.forEach(that.markers, function(marker) {
marker.update();
});