mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-11-25 06:53:00 +00:00
Get it displaying device locations, but they aren't lined up yet.
This commit is contained in:
parent
388b269590
commit
d3978310b4
3 changed files with 45 additions and 26 deletions
|
@ -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() {
|
||||||
|
|
22
client_src/js/Overlay/VoronoiManager.mjs
Normal file
22
client_src/js/Overlay/VoronoiManager.mjs
Normal 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;
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue