Data Visualization & GIS at Eurostat. Exploring new ways of making maps.
Public
Edited
Jan 17
4 forks
25 stars
getQueryTags = (bbox) => `
//WAYS
// Roads
way["highway"](${bbox});
// Buildings
relation["building"](${bbox});
way["building"](${bbox});
// Water bodies
relation["water"](${bbox}); // all water!
relation["natural"="water"](${bbox});
way["natural"="water"](${bbox});
way["water"="pond"](${bbox});
way["water"="lake"](${bbox});
way["water"="river"](${bbox});
way["waterway"="river"](${bbox});
way["waterway"="stream"](${bbox});
// Parks and recreational areas
way["leisure"="park"](${bbox});
relation["leisure"="park"](${bbox});
// Forests
relation["natural"="forest"](${bbox});
way["natural"="forest"](${bbox});
// Railways
way["railway"](${bbox});
// all landuse
relation["landuse"="meadow"](${bbox});
way["landuse"="meadow"](${bbox});
way["landuse"="grass"](${bbox});
way["landuse"="construction"](${bbox});
// way["landuse"](${bbox});
// Query to fetch rivers and other water features (e.g., streams, lakes)
way["leisure"="pitch"](${bbox});
//trees
node["natural"="tree"](${bbox});
`
osmData = {
const bbox = MAP_BBOX.join(",");
const tags = getQueryTags(bbox);
const query = `
[out:json];
(
${tags}
);
(._;>;);
out body;
`;
return fetch(
`https://overpass-api.de/api/interpreter?data=${encodeURIComponent(query)}`
)
.then((response) => response.json())
.then((data) => data.elements)
.catch((error) => {
console.error("Error fetching OSM data:", error);
return [];
});
}
osmWaysNodesAndRelations = {
const nodes = {};
const ways = [];
const relations = [];
const trees = []; // Separate array for trees
osmData.forEach((element) => {
if (element.type === "node") {
// Check if it's a tree
if (element.tags && element.tags["natural"] === "tree") {
trees.push({
id: element.id,
lat: element.lat,
lon: element.lon,
tags: element.tags
});
} else {
nodes[element.id] = { lat: element.lat, lon: element.lon };
}
} else if (element.type === "way") {
ways.push(element);
} else if (element.type === "relation") {
relations.push(element);
}
});
return { nodes, ways, relations, trees }; // Include trees in the returned object
}
coordinates = ({
cardiff: [51.4837, -3.185738],
copenhagen: [55.6768155, 12.5706028],
paris: [48.858258, 2.294531],
poznan: [52.4063664, 16.9297639],
tampere: [61.4986082, 23.755491],
newYork: [40.7804843, -73.9791474],
amsterdam: [52.3676, 4.9041]
})
d3 = require("d3@7")
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.
