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