CTO @Datawrapper & proud @nytgraphics alumni
html`actual area: ${turf.area(square)}`
viewof steps = number({ value: 10, step: 1 })
viewof projection = select(["gnom", "laea", "tmerc"])
viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [13.416463, 52.543784],
zoom: 17,
style: "mapbox://styles/mapbox/streets-v10",
scrollZoom: false
});
console.log(square);
map.on('load', () => {
map.addLayer({
id: 'test',
type: 'fill',
layout: {},
paint: {
'fill-color': '#088',
'fill-opacity': 0.8
},
source: {
type: 'geojson',
data: square
}
});
});
map.on('move', () => {
const c = map.getCenter();
mutable centerLL = [c.lng, c.lat];
});
invalidation.then(() => map.remove());
}
mutable centerLL = [13.416463, 52.543784]
points = {
const sideH = side/2;
const corners = [
[center[0]-sideH, center[1]-sideH],
[center[0]+sideH, center[1]-sideH],
[center[0]+sideH, center[1]+sideH],
[center[0]-sideH, center[1]+sideH],
[center[0]-sideH, center[1]-sideH]
];
const points = [];
for (let s=0; s<4; s++) {
for (let i=0; i<steps; i++) {
if (!i) points.push(corners[s]);
else points.push([
corners[s][0] + (i/steps) * (corners[s+1][0]-corners[s][0]),
corners[s][1] + (i/steps) * (corners[s+1][1]-corners[s][1])
]);
}
}
return points;
}
center = {
return prj.forward(centerLL)
}
prj = proj4(`+proj=${projection} +lat_0=${centerLL[1]} +lon_0=${centerLL[0]} +x_0=4321000 +y_0=3210000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs`)
square = {
console.log(points.map(p => prj.inverse(p)))
return {
"type": "Feature",
"properties": { },
"geometry": {
"type": "Polygon",
"coordinates": [points.map(p => prj.inverse(p))]
}
}
}
proj4 = require('https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js')
turf = require('https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.min.js')
import {number} from "@jashkenas/inputs"
import {select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
