Browse Source

[client] Display device markers. Hooray!

pull/26/head
Starbeamrainbowlabs 4 years ago
parent
commit
a3cc45a44c
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 2
      README.md
  2. 4
      client_src/css/main.css
  3. 8
      client_src/js/Config.mjs
  4. 17
      client_src/js/Helpers/GetFromUrl.mjs
  5. 50
      client_src/js/LayerDeviceMarkers.mjs
  6. 11
      client_src/js/Map.mjs
  7. 2
      logic/Actions/ListDevices.php
  8. 5
      package-lock.json
  9. 3
      package.json

2
README.md

@ -66,7 +66,7 @@ https://example.com/path/to/api.php?action=fetch-data&datetime=2019-01-03%2007:5 @@ -66,7 +66,7 @@ https://example.com/path/to/api.php?action=fetch-data&datetime=2019-01-03%2007:5
Parameter | Type | Meaning
--------------------|-----------|---------------------
`only_with_location`| bool | Optional. If present only devices with a defined location will be returned. Useful for getting a list of devices to place on a map.
`only-with-location`| bool | Optional. If present only devices with a defined location will be returned. Useful for getting a list of devices to place on a map.
Examples:

4
client_src/css/main.css

@ -1,6 +1,10 @@ @@ -1,6 +1,10 @@
@import "../../node_modules/leaflet/dist/leaflet.css";
@import "../../node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css";
@import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.css";
@import "../../node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css";
html, body { font-size: 100%; }
body {
font-family: sans-serif;

8
client_src/js/Config.mjs

@ -1,6 +1,10 @@ @@ -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
}

17
client_src/js/Helpers/GetFromUrl.mjs

@ -0,0 +1,17 @@ @@ -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);
})
}

50
client_src/js/LayerDeviceMarkers.mjs

@ -0,0 +1,50 @@ @@ -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;

11
client_src/js/Map.mjs

@ -5,23 +5,32 @@ import L from 'leaflet'; @@ -5,23 +5,32 @@ import L from 'leaflet';
import 'leaflet-fullscreen';
import Config from './Config.mjs';
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
class Map {
constructor() {
}
setup() {
// Create the map
this.map = L.map("map", {
fullscreenControl: true
});
this.map.setView(Config.default_location, Config.default_zoom);
// Add the OpenStreetMap tile layer
this.layer_openstreet = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
id: "openstreetmap",
maxZoom: 19,
attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap contributors</a>"
}).addTo(this.map);
// Add the device markers
console.info("[map] Loading device markers....");
this.device_markers = new LayerDeviceMarkers(this.map);
this.device_markers.setup().then(() => {
console.info("[map] Device markers loaded successfully.");
});
}
}

2
logic/Actions/ListDevices.php

@ -33,7 +33,7 @@ class ListDevices implements IAction { @@ -33,7 +33,7 @@ class ListDevices implements IAction {
$start_handle = microtime(true);
// 1: Parse & validate parameters
$only_with_location = !empty($_GET["only_with_location"]);
$only_with_location = !empty($_GET["only-with-location"]);
// 1: Pull data from database
$data = $this->device_repo->get_all_devices($only_with_location);

5
package-lock.json generated

@ -1071,6 +1071,11 @@ @@ -1071,6 +1071,11 @@
"resolved": "https://registry.npmjs.org/leaflet-webgl-heatmap/-/leaflet-webgl-heatmap-0.2.7.tgz",
"integrity": "sha1-mf+/8wrmgDb/4t3tgZjPf+2QSg8="
},
"leaflet.markercluster": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
"integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw=="
},
"loader-utils": {
"version": "0.2.17",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",

3
package.json

@ -20,7 +20,8 @@ @@ -20,7 +20,8 @@
"leaflet": "^1.4.0",
"leaflet-fullscreen": "^1.0.2",
"leaflet-timedimension": "^1.1.0",
"leaflet-webgl-heatmap": "^0.2.7"
"leaflet-webgl-heatmap": "^0.2.7",
"leaflet.markercluster": "^1.4.1"
},
"devDependencies": {
"@types/leaflet": "^1.2.14",

Loading…
Cancel
Save