2f:T78c,viewof map = { let container = html`

`; // 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 = `Orig: ${p.Orig}
Name: ${p.Name}
TotalSeats: ${p.TotalSeats}
Country: ${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; }30:[{"id":"bd3b8e29201bcdf406eca17e3d5abf4a98ac15328905a3c215d65a73bfce633888fab57793513ddd481dce787e20586f6eac365ce0bb74e777923f5d2f93e6d8","href":"https://static.observableusercontent.com/files/bd3b8e29201bcdf406eca17e3d5abf4a98ac15328905a3c215d65a73bfce633888fab57793513ddd481dce787e20586f6eac365ce0bb74e777923f5d2f93e6d8","name":"airport_volume_airport_locations.csv","type":"text/csv","lastModified":1714459276116.595,"size":141286}] 2d:{"title":"Global Airports","cells":[{"id":0,"value":"# Global Airports\n","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"Data source: https://datacatalog.worldbank.org/search/dataset/0038117/Global-Airports","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"airport_volume_airport_locations = await FileAttachment(\"airport_volume_airport_locations.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"turf = require(\"@turf/turf@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}