Get it displaying device locations, but they aren't lined up yet.

This commit is contained in:
Starbeamrainbowlabs 2019-06-11 00:19:37 +01:00
parent 388b269590
commit d3978310b4
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 45 additions and 26 deletions

View file

@ -7,13 +7,12 @@ import 'leaflet-fullscreen';
import Config from './Config.mjs'; import Config from './Config.mjs';
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs'; import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
import VoronoiOverlay from './Overlay/VoronoiOverlay.mjs'; import VoronoiManager from './Overlay/VoronoiManager.mjs';
// import LayerHeatmap from './LayerHeatmap.mjs'; // import LayerHeatmap from './LayerHeatmap.mjs';
// import LayerHeatmapGlue from './LayerHeatmapGlue.mjs'; // import LayerHeatmapGlue from './LayerHeatmapGlue.mjs';
import DeviceData from './DeviceData.mjs'; import DeviceData from './DeviceData.mjs';
import UI from './UI.mjs'; import UI from './UI.mjs';
import VoronoiCell from './Overlay/VoronoiCell.mjs';
import Vector2 from './Helpers/Vector2.mjs'; import Vector2 from './Helpers/Vector2.mjs';
class MapManager { class MapManager {
@ -70,14 +69,7 @@ class MapManager {
} }
setup_overlay() { setup_overlay() {
this.overlay = new VoronoiOverlay(); this.overlay = new VoronoiManager(this.device_data, this.map);
this.overlay.addCells(
new VoronoiCell(new Vector2(53.739429, -0.445607)),
new VoronoiCell(new Vector2(53.775879, -0.413569)),
new VoronoiCell(new Vector2(53.745144, -0.279373)),
new VoronoiCell(new Vector2(53.738222, -0.335983))
);
this.overlay.add_to(this.map);
} }
setup_time_dimension() { setup_time_dimension() {

View file

@ -0,0 +1,22 @@
"use strict";
import VoronoiOverlay from './VoronoiOverlay.mjs';
import VoronoiCell from './VoronoiCell.mjs';
import Vector2 from '../Helpers/Vector2.mjs';
class VoronoiManager {
constructor(in_device_data, map) {
this.device_data = in_device_data;
this.overlay = new VoronoiOverlay();
this.overlay.addCells(...this.device_data.devices
.filter((device) => typeof device.latitude == "number" &&
typeof device.longitude == "number")
.map((device) =>
new VoronoiCell(new Vector2(device.latitude, device.longitude))
));
this.overlay.add_to(map);
}
}
export default VoronoiManager;

View file

@ -19,6 +19,10 @@ class VoronoiOverlay {
this.cells = []; this.cells = [];
} }
/**
* Adds a cell to the voronoi overlay.
* @param {VoronoiCell} cells The cell to add. May be specified as many times as requires to add cells in bulk.
*/
addCells(...cells) { addCells(...cells) {
this.cells.push(...cells); this.cells.push(...cells);
} }
@ -37,15 +41,13 @@ class VoronoiOverlay {
} }
for(let cell of this.cells) { for(let cell of this.cells) {
if(!isNaN(cell.point.x)) { // TODO: Remove this restriction
if(cell.point.x < 40) continue; // Exclude the freetown one for testing 'cause it's miles away
if(cell.point.x < result.x_min) result.x_min = cell.point.x; if(cell.point.x < result.x_min) result.x_min = cell.point.x;
if(cell.point.x > result.x_max) result.x_max = cell.point.x; if(cell.point.x > result.x_max) result.x_max = cell.point.x;
}
if(!isNaN(cell.point.y)) {
if(cell.point.y < result.y_min) result.y_min = cell.point.y; if(cell.point.y < result.y_min) result.y_min = cell.point.y;
if(cell.point.y > result.y_max) result.y_max = cell.point.y; if(cell.point.y > result.y_max) result.y_max = cell.point.y;
} }
}
result.x_min -= this.border.x; result.x_min -= this.border.x;
result.y_min -= this.border.y; result.y_min -= this.border.y;
@ -83,7 +85,7 @@ class VoronoiOverlay {
console.log(this.cells); console.log(this.cells);
this.svg = new SvgWriter( let svg = new SvgWriter(
"100%", "100%", "100%", "100%",
bounding_box, bounding_box,
true true
@ -91,15 +93,18 @@ class VoronoiOverlay {
// TODO: Render the SVG here // TODO: Render the SVG here
for(let cell of this.cells) { for(let cell of this.cells) {
this.svg.addPolygon( if(cell.polygon !== null) {
svg.addPolygon(
`hsla(${(Math.random()*360).toFixed(2)}, 50%, 50%, 0.6)`, `hsla(${(Math.random()*360).toFixed(2)}, 50%, 50%, 0.6)`,
cell.polygon cell.polygon
); );
this.svg.addCircle(cell.point, 0.005, "red"); }
svg.addCircle(cell.point, 0.005, "red");
} }
this.svg.complete(); svg.complete();
return this.svg.toString(); console.log(svg.toString());
return svg.toString();
} }
add_to(map) { add_to(map) {