sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

one layer per rectangle to redouce events

Browse source
This commit is contained in:
j 2025-08-06 23:31:07 +02:00
commit 80d3919b46
3 changed files with 18 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

3
source/UI/js/Map/Map.js
View file

@ -621,8 +621,6 @@ Ox.Map = function(options, self) {
} }
function clickMap(event) { function clickMap(event) {
console.log("not this one", event)
return
var place = getSelectedPlace(); var place = getSelectedPlace();
if (self.options.clickable/* && !editing()*/) { if (self.options.clickable/* && !editing()*/) {
getPlaceByLatLng(event.lngLat, self.map.getBounds(), function(place) { getPlaceByLatLng(event.lngLat, self.map.getBounds(), function(place) {
@ -718,6 +716,7 @@ Ox.Map = function(options, self) {
callback = point; callback = point;
point = self.map.getCenter(); point = self.map.getCenter();
} }
// fixme, why is getMaxZoom off by one?
let maxZoom = self.map.getMaxZoom() let maxZoom = self.map.getMaxZoom()
setTimeout(() => { setTimeout(() => {
callback(maxZoom) callback(maxZoom)

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

@ -22,23 +22,25 @@ class MapLibreRectangle {
id: this.id id: this.id
} }
}; };
this.source = this.map.getSource('rectangles') var sourceId = `${this.id}-rectangles`
this.source = this.map.getSource(sourceId)
if (!this.source) { if (!this.source) {
this.map.addSource('rectangles', { this.map.addSource(sourceId, {
type: 'geojson', type: 'geojson',
data: { data: {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [] features: []
} }
}); });
this.source = this.map.getSource('rectangles') this.source = this.map.getSource(sourceId)
// Add fill layer // Add fill layer
if (!this.map.getLayer('rectangles-fill')) { var layerId = `${this.id}-fill`
if (!this.map.getLayer(layerId)) {
this.map.addLayer({ this.map.addLayer({
id: 'rectangles-fill', id: layerId,
type: 'fill', type: 'fill',
source: 'rectangles', source: sourceId,
paint: { paint: {
'fill-color': '#088', 'fill-color': '#088',
'fill-opacity': 0.3 'fill-opacity': 0.3
@ -47,11 +49,12 @@ class MapLibreRectangle {
} }
// Add outline layer // Add outline layer
if (!this.map.getLayer('rectangles-outline')) { var layerId = `${this.id}-outline`
if (!this.map.getLayer(layerId)) {
this.map.addLayer({ this.map.addLayer({
id: 'rectangles-outline', id: layerId,
type: 'line', type: 'line',
source: 'rectangles', source: sourceId,
paint: { paint: {
'line-color': '#000', 'line-color': '#000',
'line-width': 2 'line-width': 2
@ -140,7 +143,7 @@ class MapLibreRectangle {
}); });
} }
_enableClicking() { _enableClicking() {
this.map.on('click', `rectangles-fill`, e => { this.map.on('click', `${this.id}-fill`, e => {
console.log('click', e) console.log('click', e)
if (this.onclick) { if (this.onclick) {
e.preventDefault() e.preventDefault()

11
source/UI/js/Map/MapRectangleMarker.js
View file

@ -103,12 +103,9 @@ Ox.MapRectangleMarker = function(options) {
@*/ @*/
that.add = function() { that.add = function() {
that.marker.addTo(that.map.map); that.marker.addTo(that.map.map);
console.log("add marker, fix events") that.marker.on('dragstart', dragstart);
/* that.marker.on('drag', drag);
google.maps.event.addListener(that.marker, 'dragstart', dragstart); that.marker.on('dragend', dragend);
google.maps.event.addListener(that.marker, 'drag', drag);
google.maps.event.addListener(that.marker, 'dragend', dragend);
*/
}; };
/*@ /*@
@ -124,7 +121,7 @@ Ox.MapRectangleMarker = function(options) {
update <f> update update <f> update
@*/ @*/
that.update = function() { that.update = function() {
marker = new maplibregl.Marker({ var marker = new maplibregl.Marker({
cursor: that.position + '-resize', cursor: that.position + '-resize',
draggable: true, draggable: true,
element: Ox.MapMarkerImage({ element: Ox.MapMarkerImage({