4a783446cd
* add elevation info in preview * fix various issues - pmtile coordinates - pixel calculation - swapped lat / long - allow tileSize to be configured - allow any zoom for coordinates * apply linter changes * remove not used entry * drop baseUrl in favor of public_url * fix map not using full body * remove bounds check for coordinates --------- Co-authored-by: Miko <miko@none>
51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
class ElevationInfoControl {
|
|
constructor(options) {
|
|
this.url = options["url"];
|
|
}
|
|
|
|
getDefaultPosition() {
|
|
const defaultPosition = "bottom-left";
|
|
return defaultPosition;
|
|
}
|
|
|
|
onAdd(map) {
|
|
this.map = map;
|
|
this.controlContainer = document.createElement("div");
|
|
this.controlContainer.classList.add("maplibregl-ctrl");
|
|
this.controlContainer.classList.add("maplibregl-ctrl-group");
|
|
this.controlContainer.classList.add("maplibre-ctrl-elevation");
|
|
this.controlContainer.textContent = "Elevation: Click on Map";
|
|
|
|
map.on('click', (e) => {
|
|
var url = this.url;
|
|
var coord = {"z": Math.floor(map.getZoom()), "x": e.lngLat["lng"], "y": e.lngLat["lat"]};
|
|
for(var key in coord) {
|
|
url = url.replace(new RegExp('{'+ key +'}','g'), coord[key]);
|
|
}
|
|
|
|
let request = new XMLHttpRequest();
|
|
request.open("GET", url, true);
|
|
request.onload = () => {
|
|
if (request.status !== 200) {
|
|
this.controlContainer.textContent = "Elevation: No value";
|
|
} else {
|
|
this.controlContainer.textContent = `Elevation: ${JSON.parse(request.responseText).elevation} (${JSON.stringify(coord)})`;
|
|
}
|
|
}
|
|
request.send();
|
|
});
|
|
return this.controlContainer;
|
|
}
|
|
|
|
onRemove() {
|
|
if (
|
|
!this.controlContainer ||
|
|
!this.controlContainer.parentNode ||
|
|
!this.map
|
|
) {
|
|
return;
|
|
}
|
|
this.controlContainer.parentNode.removeChild(this.controlContainer);
|
|
this.map = undefined;
|
|
}
|
|
};
|