Published
Edited
Jul 9, 2020
2 forks
2 stars
{
const map = mapView;
const {min, max} = stats;
console.log('here', features, tileFeatures)
renderMapLayer({
map,
id: 'grid',
data: features,
type: 'fill',
paint: {
'fill-color': {
"property": "elevation",
"stops": [
[min, 'blue'],
[max, 'red']
]
},
'fill-outline-color': 'rgba(0,0,0,0)',
'fill-opacity': 0.5
}
});
const {minLat, maxLat, minLng, maxLng} = bounds;
renderMapLayer({
map,
id: 'tile-bounds',
data: tileFeatures,
type: 'line',
paint: {
'line-color': 'black',
'line-opacity': 0.75
}
})
return md`*{map rendering logic}*`
}
bounds = ({
minLat: tile2lat(tile.y + 1, tile.z),
maxLat: tile2lat(tile.y, tile.z),
minLng: tile2long(tile.x, tile.z),
maxLng: tile2long(tile.x + 1, tile.z),
})
h3Indexes = {
const {minLat, maxLat, minLng, maxLng} = bounds;
const height = maxLat - minLat;
const width = maxLng - minLng;
const rowCount = dem.length;
const colCount = dem[0].length;
const px2coord = (row, col) => ({
lat: maxLat - (row / rowCount) * height,
lng: (col / colCount) * width + minLng
});
const indexes = {};
for (let r = 0; r < rowCount; r++) {
for (let c = 0; c < colCount; c++) {
const {lat, lng} = px2coord(r, c);
const h3Index = h3.geoToH3(lat, lng, h3Resolution);
if (!indexes[h3Index]) {
indexes[h3Index] = {sum: 0, count: 0};
}
indexes[h3Index].sum += dem[r][c];
indexes[h3Index].count++;
}
}
return Object.keys(indexes).map(h3Index => {
const {sum, count} = indexes[h3Index];
return {h3Index, elevation: sum / count};
})
}
features = ({
type: 'FeatureCollection',
features: h3Indexes.map(({h3Index, elevation}) => ({
type: 'Feature',
id: h3Index,
properties: {h3Index, elevation},
geometry: {
type: 'Polygon',
coordinates: [h3.h3ToGeoBoundary(h3Index, true)]
}
}))
})
tileFeatures = {
const {minLat, maxLat, minLng, maxLng} = bounds;
return {
type: 'FeatureCollection',
features: [
{type: 'Feature', geometry: {type: 'Polygon', coordinates: [[
[minLng, minLat],
[maxLng, minLat],
[maxLng, maxLat],
[minLng, maxLat],
[minLng, minLat],
]]}}
]
}
}
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.
