parent
4a2b8fc3c6
commit
a3cc45a44c
@ -1,6 +1,10 @@
|
||||
"use strict";
|
||||
|
||||
export default {
|
||||
default_location: [ 53.7391, -0.3344 ],
|
||||
default_zoom: 13
|
||||
// The url of api.php. Can be relative.
|
||||
api_root: "../api.php",
|
||||
// The default location to show on the map when loading the page.
|
||||
default_location: [ 53.76203,-0.35162 ],
|
||||
// The default zoom level to use when loading the page.
|
||||
default_zoom: 12
|
||||
}
|
||||
|
@ -0,0 +1,17 @@
|
||||
"use strict";
|
||||
|
||||
// From https://gist.github.com/0b2aee73f8d168e36a353901193e7ff5
|
||||
|
||||
export default function GetFromUrl(url) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
let request = new XMLHttpRequest();
|
||||
request.addEventListener("load", function() {
|
||||
if (request.status > 199 && request.status < 300)
|
||||
resolve(request.response);
|
||||
else
|
||||
reject(request.response);
|
||||
});
|
||||
request.open("GET", url, true);
|
||||
request.send(null);
|
||||
})
|
||||
}
|
@ -0,0 +1,50 @@
|
||||
"use strict";
|
||||
|
||||
import L from 'leaflet';
|
||||
import 'leaflet.markercluster';
|
||||
|
||||
import Config from './Config.mjs';
|
||||
import GetFromUrl from './Helpers/GetFromUrl.mjs';
|
||||
|
||||
class LayerDeviceMarkers {
|
||||
constructor(in_map) {
|
||||
this.map = in_map;
|
||||
}
|
||||
|
||||
async setup() {
|
||||
// Create a new clustering layer
|
||||
this.layer = L.markerClusterGroup();
|
||||
|
||||
console.log("Loading device list");
|
||||
// Fetch the device list
|
||||
let device_list = JSON.parse(await GetFromUrl(
|
||||
`${Config.api_root}?action=list-devices&only-with-location=yes`
|
||||
));
|
||||
|
||||
console.log("Device list loaded");
|
||||
|
||||
// Add a marker for each device
|
||||
for (let device of device_list) {
|
||||
this.add_device_marker(device);
|
||||
}
|
||||
|
||||
console.log("Device markers created");
|
||||
|
||||
// Display this layer
|
||||
this.map.addLayer(this.layer);
|
||||
}
|
||||
|
||||
add_device_marker(device) {
|
||||
let marker = L.marker(
|
||||
L.latLng(device.latitude, device.longitude),
|
||||
{ // See https://leafletjs.com/reference-1.4.0.html#marker
|
||||
title: `Device: ${device.name}`,
|
||||
autoPan: true,
|
||||
autoPanPadding: L.point(100, 100)
|
||||
}
|
||||
);
|
||||
this.layer.addLayer(marker);
|
||||
}
|
||||
}
|
||||
|
||||
export default LayerDeviceMarkers;
|
Loading…
Reference in new issue