forked from 0x2620/oxjs
a0b1e0eab4
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
144 lines
4 KiB
JavaScript
144 lines
4 KiB
JavaScript
'use strict';
|
|
|
|
/*@
|
|
Ox.MapRectangleMarker <f> MapRectangleMarker Object
|
|
(options) -> <o> MapRectangleMarker Object
|
|
options <o> Options object
|
|
map <o|null> map
|
|
place <o|null> place
|
|
position <s|''>
|
|
@*/
|
|
|
|
Ox.MapRectangleMarker = function(options) {
|
|
|
|
options = Ox.extend({
|
|
map: null,
|
|
place: null,
|
|
position: ''
|
|
}, options);
|
|
|
|
var that = this;
|
|
|
|
Ox.forEach(options, function(val, key) {
|
|
that[key] = val;
|
|
});
|
|
|
|
/*
|
|
that.markerImage = new google.maps.MarkerImage
|
|
that.marker = new google.maps.Marker({
|
|
cursor: that.position + '-resize',
|
|
draggable: true,
|
|
icon: Ox.MapMarkerImage({
|
|
mode: 'editing',
|
|
rectangle: true,
|
|
type: that.place.id[0] == '_' ? 'result' : 'place'
|
|
}),
|
|
position: that.place.points[that.position],
|
|
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({
|
|
draggable: true,
|
|
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: lngLat.lat,
|
|
lng: lngLat.lng
|
|
};
|
|
}
|
|
|
|
function drag(e) {
|
|
// fixme: implement shift+drag (center stays the same)
|
|
// 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
|
|
};
|
|
if (that.position.indexOf('s') > -1) {
|
|
that.place.south = lat;
|
|
}
|
|
if (that.position.indexOf('n') > -1) {
|
|
that.place.north = lat;
|
|
}
|
|
if (that.position.indexOf('w') > -1) {
|
|
that.place.west = lng;
|
|
}
|
|
if (that.position.indexOf('e') > -1) {
|
|
that.place.east = lng;
|
|
}
|
|
//Ox.Log('Map', 'west', that.place.west, 'east', that.place.east);
|
|
//Ox.Log('Map', 'south', that.place.south, 'north', that.place.north);
|
|
that.place.update();
|
|
that.place.marker.update();
|
|
that.place.rectangle.update();
|
|
}
|
|
|
|
function dragend(e) {
|
|
var south;
|
|
Ox.$body.removeClass('OxDragging');
|
|
if (that.place.south > that.place.north) {
|
|
south = that.place.south;
|
|
that.place.south = that.place.north;
|
|
that.place.north = south;
|
|
that.place.update();
|
|
that.place.marker.update();
|
|
that.place.rectangle.update();
|
|
}
|
|
that.map.triggerEvent('changeplaceend', that.place);
|
|
}
|
|
|
|
/*@
|
|
add <f> add
|
|
@*/
|
|
that.add = function() {
|
|
that.marker.addTo(that.map.map);
|
|
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();
|
|
return that;
|
|
};
|
|
|
|
/*@
|
|
update <f> update
|
|
@*/
|
|
that.update = function() {
|
|
// Just update position - visual stays the same during editing
|
|
that.marker.setLngLat(that.place.points[that.position]);
|
|
return that;
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|