Public
Edited
Apr 30, 2024
airport_volume_airport_locations.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof map = {
let container = html`<div style='height:800px;' />`;
// Give the container dimensions.
yield container;
// Create the "map" object with the maplibre.Map constructor, referencing
// the container div
const mapRef = (container.value = new maplibre.Map({
container,
// center,
zoom: 1,
maplibreLogo: true,
style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
attributionControl: true
}));
await new Promise((resolve, reject) => {
mapRef.on("load", async () => {
mapRef.addSource("points", {
type: "geojson",
data: turf.featureCollection(
airport_volume_airport_locations.map((d) =>
turf.point([d.Airport1Longitude, d.Airport1Latitude], d)
)
)
});
mapRef.addLayer({
id: "points",
type: "circle",
source: "points",
layout: {},
paint: {
"circle-radius": {
stops: [
[10, 2],
[16, 4]
]
},
"circle-color": "black"
}
});
resolve();
});
});
const popup = new maplibre.Popup({
closeButton: false,
closeOnClick: false
});
// Change the cursor to a pointer when the mouse is over the poi layer
mapRef.on("mouseenter", "points", (e) => {
mapRef.getCanvas().style.cursor = "pointer";
const p = e.features[0].properties;
const description = `<strong>Orig: </strong>${p.Orig}
<br><strong>Name: </strong>${p.Name}
<br><strong>TotalSeats: </strong>${p.TotalSeats}
<br><strong>Country: </strong>${p["Country Name"]}`;
popup.setLngLat(e.lngLat).setHTML(description).addTo(mapRef);
});
// Change it back to a pointer when it leaves.
mapRef.on("mouseleave", "points", () => {
mapRef.getCanvas().style.cursor = "";
popup.remove();
});
invalidation.then(() => mapRef.remove());
yield container;
}
maplibre = {
const gl = await require("maplibre-gl@2.4.0");
const href = await require.resolve("maplibre-gl@2.4.0/dist/maplibre-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return gl;
}
turf = require("@turf/turf@5")
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.
