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

migrate to maplibre-gl for maps

Browse source
This commit is contained in:
j 2025-08-05 18:50:06 +02:00
commit 8cebad9fb4
7 changed files with 605 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

140
source/UI/js/Map/MapMarker.js
View file

@ -42,16 +42,32 @@ Ox.MapMarker = function(options) {
Ox.forEach(options, function(val, key) {
that[key] = val;
});
that.marker = new google.maps.Marker({
setColor()
const element = document.createElement('div')
element.style.border = '2px solid black'
element.style.borderRadius = '50px'
element.style.backgroundColor = '#' + Ox.toHex(that.color)
element.style.width = '16px'
element.style.height = '16px'
that.marker = new maplibregl.Marker({
raiseOnDrag: false,
shape: {coords: [8, 8, 8], type: 'circle'}
shape: {coords: [8, 8, 8], type: 'circle'},
element: element,
//title: that.place.name,
//zIndex: 1000
});
that.tooltip = new maplibregl.Popup({
closeButton: false,
closeOnClick: false,
className: 'tooltip'
});
that.tooltip.addClass
setOptions();
function click() {
function click(event) {
event.preventDefault()
event.stopPropagation()
var key = that.map.getKey(),
place, bounds, southWest, northEast;
if (!that.place.selected) {
@ -62,9 +78,9 @@ Ox.MapMarker = function(options) {
place = that.map.getSelectedPlace();
}
if (place) {
bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(place.south, place.west),
new google.maps.LatLng(place.north, place.east)
bounds = new maplibregl.LngLatBounds(
new maplibregl.LngLatBounds(place.west, place.south),
new maplibregl.LngLatBounds(place.east, place.north)
);
bounds = bounds.union(that.place.bounds);
southWest = bounds.getSouthWest();
@ -79,10 +95,10 @@ Ox.MapMarker = function(options) {
map: that.map,
name: '',
type: 'feature',
south: southWest.lat(),
west: southWest.lng(),
north: northEast.lat(),
east: northEast.lng()
south: southWest.lat,
west: southWest.lng,
north: northEast.lat,
east: northEast.lng
}));
} else {
that.map.options({selected: that.place.id});
@ -107,11 +123,11 @@ Ox.MapMarker = function(options) {
function drag(e) {
var northSouth = (that.place.north - that.place.south) / 2,
lat = Ox.limit(
e.latLng.lat(),
e.lngLat.lat,
Ox.MIN_LATITUDE + northSouth,
Ox.MAX_LATITUDE - northSouth
),
lng = e.latLng.lng(),
lng = e.lngLat.lng,
span = Math.min(
that.place.sizeEastWest * Ox.getDegreesPerMeter(lat) / 2, 179.99999999
),
@ -127,9 +143,7 @@ Ox.MapMarker = function(options) {
}
Ox.Log('Map', 'west', that.place.west, 'east', that.place.east, 'span', span);
that.place.update();
that.marker.setOptions({
position: that.place.center
});
that.marker.setLngLat(that.place.center)
that.place.rectangle.update();
}
@ -181,35 +195,30 @@ Ox.MapMarker = function(options) {
c.context.strokeStyle = 'rgb(' + border.join(', ') + ')';
c.context.arc(r, r, r - 1, 0, 360);
c.context.stroke();
callback(new google.maps.MarkerImage(
callback(new maplibregl.MarkerImage(
c.canvas.toDataURL(),
new google.maps.Size(options.size, options.size),
new google.maps.Point(0, 0),
new google.maps.Point(r, r)
new maplibregl.Size(options.size, options.size),
new maplibregl.Point(0, 0),
new maplibregl.Point(r, r)
));
}
}
function mouseover(e) {
var offset = that.map.offset(),
xy = that.map.overlayView.getProjection()
.fromLatLngToContainerPixel(e.latLng);
that.tooltip.show(
offset.left + Math.round(xy.x) - 4,
offset.top + Math.round(xy.y) + 20
);
that.tooltip.setLngLat(that.place.center).setHTML(
'<div style="display: flex; gap: 8px; margin: 2px 2px"><img src="' + Ox.getFlagByGeoname(that.place.geoname, 16)
+ '" style="border-radius: 4px;margin: auto"/>'
+ '<div style="font-size: 9px;">'
+ that.map.options('markerTooltip')(that.place) + '</div></div>'
).addTo(that.map.map);
}
function mouseout() {
that.tooltip.hide();
that.tooltip.remove();
}
function setOptions() {
// workaround to prevent marker from appearing twice
// after setting draggable from true to false (google maps bug)
var fix = that.marker.getDraggable() && !that.place.editing,
color = that.map.options('markerColor'),
size = that.map.options('markerSize');
function setColor() {
var color = that.map.options('markerColor');
//Ox.Log('Map', 'setOptions, that.map: ', that.map)
if (color == 'auto') {
that.color = typeColor[that.place.type] || typeColor['mapPlaceFeatureColor'];
@ -218,6 +227,15 @@ Ox.MapMarker = function(options) {
} else {
that.color = color(that.place);
}
}
function setOptions() {
// workaround to prevent marker from appearing twice
// after setting draggable from true to false (google maps bug)
var fix = false, // that.marker.getDraggable() && !that.place.editing,
size = that.map.options('markerSize');
//Ox.Log('Map', 'setOptions, that.map: ', that.map)
setColor()
if (size == 'auto') {
that.size = 8;
Ox.forEach(areaSize, function(size, area) {
@ -232,50 +250,46 @@ Ox.MapMarker = function(options) {
} else {
that.size = size(that.place);
}
/* fixme, some of those can be set some not
that.marker.setOptions({
// fixme: cursor remains pointer
cursor: that.place.editing ? 'move' : 'pointer',
draggable: that.place.editing,
icon: Ox.MapMarkerImage({
element: Ox.MapMarkerImage({
color: that.color,
mode: that.place.editing ? 'editing' :
that.place.selected ? 'selected' : 'normal',
size: that.size,
type: that.place.id[0] == '_' ? 'result' : 'place'
}),
position: that.place.center
});
})
*/
//that.marker._color = that.color;
that.marker._element.style.cursor = that.place.editing ? 'move' : 'pointer';
that.marker.setDraggable(that.place.editing);
that.marker.setLngLat(that.place.center);
if (fix) {
that.marker.setVisible(false);
setTimeout(function() {
that.marker.setVisible(true);
}, 0);
}
setTooltip();
}
function setTooltip() {
that.tooltip && that.tooltip.remove();
that.tooltip = Ox.Tooltip({
title: '<img src="'
+ Ox.getFlagByGeoname(that.place.geoname, 16)
+ '" style="float: left; width: 16px; height: 16px; margin: 1px 0 1px -1px; border-radius: 4px"/>'
+ '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
+ that.map.options('markerTooltip')(that.place) + '</div>'
})
.addClass('OxMapMarkerTooltip');
}
/*@
add <f> add to map
() -> <f> add to map, returns MapMarker
@*/
that.add = function() {
that.marker.setMap(that.map.map);
google.maps.event.addListener(that.marker, 'click', click);
google.maps.event.addListener(that.marker, 'dblclick', dblclick);
google.maps.event.addListener(that.marker, 'mouseover', mouseover);
google.maps.event.addListener(that.marker, 'mouseout', mouseout);
that.marker.addTo(that.map.map);
const element = that.marker.getElement()
if(element) {
element.addEventListener('click', click)
element.addEventListener('dblclick', dblclick)
element.addEventListener('mouseover', mouseover)
element.addEventListener('mouseout', mouseout)
}
return that;
};
@ -285,9 +299,9 @@ Ox.MapMarker = function(options) {
@*/
that.edit = function() {
setOptions();
google.maps.event.addListener(that.marker, 'dragstart', dragstart);
google.maps.event.addListener(that.marker, 'drag', drag);
google.maps.event.addListener(that.marker, 'dragend', dragend);
that.marker.on('dragstart', dragstart);
that.marker.on('drag', drag);
that.marker.on('dragend', dragend);
return that;
};
@ -296,8 +310,12 @@ Ox.MapMarker = function(options) {
() -> <f> remove marker from map, returns MapMarker
@*/
that.remove = function() {
that.marker.setMap(null);
google.maps.event.clearListeners(that.marker);
that.marker.remove();
//that.marker.off('dragstart');
//that.marker.off('drag');
//that.marker.off('dragend');
//fixme does this work to remove all events?
that.marker.off();
return that;
};
@ -306,9 +324,9 @@ Ox.MapMarker = function(options) {
() -> <f> clear edit listeners, returns MapMarker
@*/
that.submit = function() {
google.maps.event.clearListeners(that.marker, 'dragstart');
google.maps.event.clearListeners(that.marker, 'drag');
google.maps.event.clearListeners(that.marker, 'dragend');
that.marker.off('dragstart');
that.marker.off('drag');
that.marker.off('dragend');
return that;
}