sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-11-25 06:53:00 +00:00
Code Issues Releases Wiki Activity

Work on the voronoi overlay some more

Browse source 
We still need to write some masty rendering code, and lots of other 
connecting glue
This commit is contained in:
Starbeamrainbowlabs 2019-06-09 23:51:41 +01:00
parent 6513530b41
commit 278adb8468
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 49 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client_src/js/MapManager.mjs
View file

@ -3,15 +3,19 @@
// Import leaflet, but some plugins require it to have the variable name 'L' :-/ // Import leaflet, but some plugins require it to have the variable name 'L' :-/
import L from 'leaflet'; import L from 'leaflet';
import 'leaflet-fullscreen'; import 'leaflet-fullscreen';
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.src.withlog.js'; // import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.src.withlog.js';
import Config from './Config.mjs'; import Config from './Config.mjs';
import LayerDeviceMarkers from './LayerDeviceMarkers.mjs'; import LayerDeviceMarkers from './LayerDeviceMarkers.mjs';
import LayerHeatmap from './LayerHeatmap.mjs'; import VoronoiOverlay from './Overlay/VoronoiOverlay.mjs';
import LayerHeatmapGlue from './LayerHeatmapGlue.mjs'; // import LayerHeatmap from './LayerHeatmap.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';
class MapManager { class MapManager {
constructor() { constructor() {
console.log(Config); console.log(Config);
@ -53,16 +57,27 @@ class MapManager {
.then(this.setup_layer_control.bind(this)); .then(this.setup_layer_control.bind(this));
// Add the heatmap // Add the heatmap
console.info("[map] Loading heatmap...."); // console.info("[map] Loading heatmap....");
this.setup_heatmap() // this.setup_heatmap()
.then(() => console.info("[map] Heatmap loaded successfully.")) // .then(() => console.info("[map] Heatmap loaded successfully."))
// ...and the time dimension // // ...and the time dimension
.then(this.setup_time_dimension.bind(this)) // .then(this.setup_time_dimension.bind(this))
.then(() => console.info("[map] Time dimension initialised.")); // .then(() => console.info("[map] Time dimension initialised."));
this.ui = new UI(Config, this); this.ui = new UI(Config, this);
this.ui.setup().then(() => console.log("[map] Settings initialised.")); this.ui.setup().then(() => console.log("[map] Settings initialised."));
this.setup_overlay();
}
setup_overlay() {
this.overlay = new VoronoiOverlay();
this.overlay.addCells(
new VoronoiCell(new Vector2(100, 100)),
new VoronoiCell(new Vector2(100, 200)),
new VoronoiCell(new Vector2(75, 100)),
new VoronoiCell(new Vector2(50, 50))
);
let svg = this.overlay.render();
} }
setup_time_dimension() { setup_time_dimension() {
@ -121,7 +136,7 @@ class MapManager {
}, { // Overlay(s) }, { // Overlay(s)
"Devices": this.device_markers.layer, "Devices": this.device_markers.layer,
// TODO: Have 1 heatmap layer per reading type? // TODO: Have 1 heatmap layer per reading type?
"Heatmap": this.heatmap.layer // "Heatmap": this.heatmap.layer
}, { // Options }, { // Options
}); });

16
client_src/js/Overlay/VoronoiCell.mjs Normal file
View file

@ -0,0 +1,16 @@
"use strict";
import Vector2 from '../Helpers/Vector2.mjs';
/**
* Represents a single Voronoi diagram cell.
* @param {Vector2} point The point at which the cell is located.
*/
class VoronoiCell {
constructor(in_point) {
this.point = in_point;
this.def = null;
}
}
export default VoronoiCell;

6
client_src/js/Overlay/VoronoiOverlay.mjs
View file

@ -60,6 +60,12 @@ class VoronoiOverlay {
console.log(VoronoiOverlay.diagram); console.log(VoronoiOverlay.diagram);
// TODO: Map the generated polygons back onto this.cells // TODO: Map the generated polygons back onto this.cells
for(let their_cell of VoronoiOverlay.diagram.cells) {
let our_cell = this.cells.find((el) => el.point.x == their_cell.site.x && el.point.y == their_cell.site.y);
our_cell.def = their_cell;
}
console.log(this.cells);
this.svg = new SvgWriter(); this.svg = new SvgWriter();

2
client_src/js/index.mjs
View file

@ -1,7 +1,7 @@
"use strict"; "use strict";
import '../css/main.css'; import '../css/main.css';
import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css'; // import '../../node_modules/leaflet-timedimension/dist/leaflet.timedimension.control.css';
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------