countries = FileAttachment("countries@1.geojson").json()
exploded = {
const parts = countries.features.map(c => turf.flatten(c).features).flat()
parts.map((f,i) => {
f.properties = {...f.properties,id: i}
return f
})
return turf.featureCollection(parts)
}
bboxes = exploded.features.map(f => turf.bboxPolygon(turf.bbox(f),{properties: f.properties}))
tree = {
const bush = new rbush();
bush.load(
bboxes.map((b) => {
const [minX, minY, maxX, maxY] = b.bbox;
const { name, id } = b.properties;
return { minX, minY, maxX, maxY, name, id };
})
);
return bush;
}
// since it's a point, we build a 1-dimensional "search re"ctangle"
treeSearch = tree.search({
minX: ref.lng,
minY: ref.lat,
maxX: ref.lng,
maxY: ref.lat
})
bboxMatch = {
if (mapReady) {
const matchBoxes = treeSearch.map((t) => {
const { minX, minY, maxX, maxY, name, id } = t;
return turf.bboxPolygon([minX, minY, maxX, maxY], {
properties: {
name,
id
}
});
});
map.getSource("bboxMatch").setData(turf.featureCollection(matchBoxes));
return matchBoxes;
} else {
return [];
}
}
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.
