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

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 XMLWriter from 'xml-writer';
import Rectangle from './Rectangle.mjs'; // import Rectangle from './Rectangle.mjs';
import Vector2 from './Vector2.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 DeviceData from './DeviceData.mjs';
import UI from './UI.mjs'; import UI from './UI.mjs';
import Vector2 from './Helpers/Vector2.mjs';
class MapManager { class MapManager {
constructor() { constructor() {
console.log(Config); 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 Vector2 from '../Helpers/Vector2.mjs';
import Rectangle from '../Helpers/Rectangle.mjs'; import Rectangle from '../Helpers/Rectangle.mjs';
import SvgWriter from '../Helpers/SvgWriter.mjs';
/** /**
* Generates and manages a single voronoi SVGOverlay layer. * Generates and manages a single voronoi SVGOverlay layer.
*/ */
@ -41,8 +38,6 @@ class VoronoiOverlay {
} }
for(let cell of this.cells) { 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_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(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;
@ -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 // 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( let geojson = [];
"100%", "100%",
bounding_box,
true
);
// TODO: Render the SVG here // TODO: Render the SVG here
for(let cell of this.cells) { for(let cell of this.cells) {
if(cell.polygon !== null) { if(cell.polygon == null) {
svg.addPolygon( console.warn("Warning: Null cell polygon encountered.", cell);
`hsla(${(Math.random()*360).toFixed(2)}, 50%, 50%, 0.6)`, continue;
cell.polygon
);
}
svg.addCircle(cell.point, 0.005, "red");
} }
svg.complete(); geojson.push({
console.log(svg.toString()); "type": "Feature",
return svg.toString(); "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) { add_to(map) {
let bounds = this.computeBoundingBox(); this.layer = L.geoJSON(this.render(), {
this.layer = L.svgOverlay( style: (feature) => { return { color: feature.properties.colour } }
SvgWriter.string2element(this.render()), });
L.latLngBounds(
L.latLng(bounds.TopLeft.y, bounds.TopLeft.x),
L.latLng(bounds.BottomRight.y, bounds.BottomRight.x)
)
);
this.layer.addTo(map); this.layer.addTo(map);
} }