Slippy Map TileSweet, Sweet FantasyOSM Tile MathGeotoolbox playgroundAzure Tile MathSQLite Geospatial - buffers!SQLite Geospatial - intersections!TurfJS split linePIPUpdate marker without refreshing map?Bars/Pub DensityAggregating Points by H3 HexagonsFR Temp DataFR Precip DataPizza PopularityNorth pole on the move!H3 coverage - France climate model data
H3 Coverage Calculation
geodata_subset_h3l6 = {
const hexSet = new Set(
geodata_subset.features.map((d) => {
const [lng, lat] = d.geometry.coordinates;
return h3.latLngToCell(lat, lng, 6);
})
);
return rewind(
geojson2h3.h3SetToFeatureCollection(Array.from(hexSet), (hex) => ({
pointid: h3l6Map.get(hex).id,
value: h3l6Map.get(hex).value
}))
);
}
// h3 level 6 map
h3l6Map = {
const gridmap = new Map();
geodata_subset.features.forEach((feature) => {
const [lng, lat] = feature.geometry.coordinates;
gridmap.set(h3.latLngToCell(lat, lng, 6), feature.properties);
});
return gridmap;
}
// h3 level 7 map
h3l7Map = {
const gridmap = new Map();
geodata_subset.features.forEach((feature) => {
const [lng, lat] = feature.geometry.coordinates;
gridmap.set(h3.latLngToCell(lat, lng, 7), feature.properties);
});
return gridmap;
}
geodata_subset_h3l6_full = {
const hexSet = new Set(h3l6Map.keys());
Array.from(hexSet).forEach((d) => {
const ring = h3.gridDisk(d, 1);
ring.forEach((r) => {
hexSet.add(r);
});
});
return rewind(
geojson2h3.h3SetToFeatureCollection(Array.from(hexSet), (hex) => ({
pointid: h3l6Map.has(hex) ? h3l6Map.get(hex).id : null
}))
);
}
geodata_centerpoints_h3l6 = turf.featureCollection(
geodata_subset_h3l6_full.features.map((h) => ({
type: "Feature",
id: h.id,
properties: { pointid: h.pointid },
geometry: { type: "Point", coordinates: h3.cellToLatLng(h.id).reverse() }
}))
)
selectedDisk = {
const child = h3.cellToCenterChild(selectHex.id, 7);
const zone = h3
.gridDiskDistances(child, rings)
.reduce((features, hexring, index) => {
const ringFeatures = hexring.map((cell) =>
geojson2h3.h3ToFeature(cell, {
distance: index,
source: h3l7Map.has(cell),
value: h3l7Map.has(cell) ? h3l7Map.get(cell).value : null
})
);
return [...features, ...ringFeatures];
}, []);
return rewind(turf.featureCollection(zone));
}
function weightedValue(inputs) {
const sumOfWeighted = inputs.reduce((acc, cur) => {
acc += cur.weight * cur.value;
return acc;
}, 0);
const sumOfWeights = inputs.reduce((acc, cur) => {
acc += cur.weight;
return acc;
}, 0);
return Math.round((sumOfWeighted / sumOfWeights) * 100) / 100;
}
function getCellValue(hex) {
const child = h3.cellToCenterChild(hex, 7);
const zone = h3
.gridDiskDistances(child, rings)
.reduce((features, hexring, index) => {
const ringFeatures = hexring
.filter((cell) => h3l7Map.has(cell))
.map((cell) => ({
weight: distanceWeight(index),
value: h3l7Map.get(cell).value
}));
return [...features, ...ringFeatures];
}, []);
return weightedValue(zone);
}
coverage = turf.featureCollection(
geodata_subset_h3l6_full.features.map((d) => {
d.properties.value = getCellValue(d.id);
return d;
})
)
refhexes = selectedDisk.features
.filter((d) => d.properties.source)
.map((d) => {
const { distance, value } = d.properties;
return { value, weight: distanceWeight(distance) };
})
distanceWeight = function (distance) {
return Math.round(Math.pow(distance + 1, exponent) * 1000) / 1000;
}
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.
