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

Switch to GeoJSON. It's sooo much simpler!

Browse source
This commit is contained in:
Starbeamrainbowlabs 2019-06-11 12:13:20 +01:00
parent 03033c0b24
commit e09419b018
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
3 changed files with 21 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client_src/js/Helpers/SvgWriter.mjs
View file

@ -2,7 +2,7 @@
import XMLWriter from 'xml-writer';
import Rectangle from './Rectangle.mjs';
// import Rectangle from './Rectangle.mjs';
import Vector2 from './Vector2.mjs';
/*

2
client_src/js/MapManager.mjs
View file

@ -13,8 +13,6 @@ import VoronoiManager from './Overlay/VoronoiManager.mjs';
import DeviceData from './DeviceData.mjs';
import UI from './UI.mjs';
import Vector2 from './Helpers/Vector2.mjs';
class MapManager {
constructor() {
console.log(Config);

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

@ -6,9 +6,6 @@ import { Delaunay } from 'd3-delaunay';
import Vector2 from '../Helpers/Vector2.mjs';
import Rectangle from '../Helpers/Rectangle.mjs';
import SvgWriter from '../Helpers/SvgWriter.mjs';
/**
* Generates and manages a single voronoi SVGOverlay layer.
*/
@ -41,8 +38,6 @@ class VoronoiOverlay {
}
for(let cell of this.cells) {
// TODO: Remove this restriction
if(cell.point.y < 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_max) result.x_max = cell.point.x;
if(cell.point.y < result.y_min) result.y_min = cell.point.y;
@ -87,37 +82,34 @@ class VoronoiOverlay {
// TODO: Investigate GeoJSON. Maybe it could help us avoid the complexity of an SVGOverlay? It looks like we might be able to apply a custom colour to a GeoJSON polygon too: https://leafletjs.com/reference-1.5.0.html#geojson
let svg = new SvgWriter(
"100%", "100%",
bounding_box,
true
);
let geojson = [];
// TODO: Render the SVG here
for(let cell of this.cells) {
if(cell.polygon !== null) {
svg.addPolygon(
`hsla(${(Math.random()*360).toFixed(2)}, 50%, 50%, 0.6)`,
cell.polygon
);
}
svg.addCircle(cell.point, 0.005, "red");
if(cell.polygon == null) {
console.warn("Warning: Null cell polygon encountered.", cell);
continue;
}
svg.complete();
console.log(svg.toString());
return svg.toString();
geojson.push({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [cell.polygon.map((point) => [point.x, point.y])],
},
"properties": {
// TODO: Replace this with an actual colour
"colour": `hsla(${(Math.random()*360).toFixed(2)}, 50%, 50%, 0.6)`
}
});
}
return geojson;
}
add_to(map) {
let bounds = this.computeBoundingBox();
this.layer = L.svgOverlay(
SvgWriter.string2element(this.render()),
L.latLngBounds(
L.latLng(bounds.TopLeft.y, bounds.TopLeft.x),
L.latLng(bounds.BottomRight.y, bounds.BottomRight.x)
)
);
this.layer = L.geoJSON(this.render(), {
style: (feature) => { return { color: feature.properties.colour } }
});
this.layer.addTo(map);
}