2f:T3f7a,mapboxMap = { const container = html`

`; yield container; mapboxgl.accessToken = "pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw"; var map = new mapboxgl.Map({ container: container, style: mas.filter((d) => d === goals.goalWords[0]).length != 0 ? "mapbox://styles/mapbox/satellite-streets-v11" : "mapbox://styles/mapbox/satellite-v9", //"mapbox://styles/mapbox/streets-v11" center: mas.length === 0 ? [0, 0] : [ airports.filter((d) => d.name === mas[mas.length - 1])[0].lon, airports.filter((d) => d.name === mas[mas.length - 1])[0].lat ], projection: "globe", //maxZoom: 1.3, zoom: 1.4 }); const zoomThreshold = 3; map.addControl(new mapboxgl.FullscreenControl()); map.addControl(new mapboxgl.NavigationControl()); // Add geolocate control to the map. map.addControl( new mapboxgl.GeolocateControl({ positionOptions: { enableHighAccuracy: true }, trackUserLocation: true }) ); const size = 120; // This implements `StyleImageInterface` // to draw a pulsing dot icon on the map. const pulsingDot = { width: size, height: size, data: new Uint8Array(size * size * 4), // When the layer is added to the map, // get the rendering context for the map canvas. onAdd: function () { const canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; this.context = canvas.getContext("2d"); }, // Call once before every frame where the icon will be used. render: function () { const duration = 1000; const t = (performance.now() % duration) / duration; const radius = (size / 2) * 0.3; const outerRadius = (size / 2) * 0.7 * t + radius; const context = this.context; // Draw the outer circle. context.clearRect(0, 0, this.width, this.height); context.beginPath(); context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); context.fillStyle = `rgba(255, 200, 200, ${1 - t})`; context.fill(); // Draw the inner circle. context.beginPath(); context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2); context.fillStyle = "rgba(255, 100, 100, 1)"; context.strokeStyle = "white"; context.lineWidth = 2 + 4 * (1 - t); context.fill(); context.stroke(); // Update this image's data with data from the canvas. this.data = context.getImageData(0, 0, this.width, this.height).data; // Continuously repaint the map, resulting // in the smooth animation of the dot. map.triggerRepaint(); // Return `true` to let the map know that the image was updated. return true; } }; map.on("load", () => { //map.addSource('line', { //type: 'geojson', // Line metrics is required to use the 'line-progress' property // lineMetrics: false, //data: geojson2 //}); //map.addLayer({ //'id': 'fill', //'type': 'fill', //'source': 'line', // reference the data source //'layout': {}, //'paint': { //'fill-color': ['get', 'colors'], //'fill-opacity': .35 //} //},'waterway-label' //); map.addSource("dest", { type: "geojson", // Line metrics is required to use the 'line-progress' property // lineMetrics: false, data: myairports_geo }); map.addLayer( { id: "circle", type: "circle", source: "dest", // reference the data source layout: { "circle-sort-key": 1 }, paint: { "circle-stroke-color": "white", "circle-stroke-width": 2.5, "circle-stroke-opacity": 1, "circle-color": "#0f2739", "circle-opacity": 1, "circle-radius": 7.5 } } //,'waterway-label' ); map.addImage("pulsing-dot", pulsingDot, { pixelRatio: 2 }); map.addSource("dot-point", { type: "geojson", data: { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [orig.lon, orig.lat] // icon position [lng, lat] } } ] } }); map.addLayer({ id: "layer-with-pulsing-dot", type: "symbol", source: "dot-point", layout: { "icon-image": "pulsing-dot" } }); //}); // const popup2 = new mapboxgl.Popup({closeButton: false, closeOnClick: true}); map.on("mouseenter", "circle", function (e) { // Change the cursor to a pointer when the mouse is over the states layer. map.getCanvas().style.cursor = "pointer"; const origin = [orig.lon, orig.lat]; var coordinates = e.features[0].geometry.coordinates; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } mutable destination = coordinates; // A simple line from origin to destination. const route = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "LineString", coordinates: [origin, mutable destination] } } ] }; // A single point that animates along the route. // Coordinates are initially set to origin. const point = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { type: "Point", coordinates: origin } } ] }; // Calculate the distance in kilometers between route start/end point. const lineDistance = turf.length(route.features[0]); var title = "

GUESS #" + gnbyname.get(e.features[0].properties.name) + "

" + //'' + e.features[0].properties.carriers +': ' + e.features[0].properties.carriers_t + '

' + "Airport: " + e.features[0].properties.name + "

" + "Distance to mystery airport: " + Math.round(lineDistance) + " kms

"; //'👉 Click to see COVID info' const popup2 = new mapboxgl.Popup({ offset: 7.5, closeButton: false, closeOnClick: true }); popup2 .setLngLat(coordinates) .setHTML(title) .setMaxWidth("450px") .addTo(map); map.on("mouseleave", "circle", function () { popup2.remove(); }); const arc = []; // Number of steps to use in the arc and animation, more steps means // a smoother arc and animation, but too many steps will result in a // low frame rate const steps = lineDistance <= 1000 ? 100 : lineDistance > 1000 && lineDistance <= 2000 ? 200 : lineDistance > 2000 && lineDistance <= 3000 ? 300 : lineDistance > 3000 && lineDistance <= 4000 ? 400 : lineDistance > 4000 && lineDistance <= 5000 ? 500 : lineDistance > 5000 && lineDistance <= 6000 ? 600 : lineDistance > 6000 && lineDistance <= 7000 ? 700 : lineDistance > 7000 && lineDistance <= 8000 ? 800 : lineDistance > 8000 && lineDistance <= 9000 ? 900 : lineDistance > 9000 && lineDistance <= 10000 ? 1000 : 1500; // Draw an arc between the `origin` & `destination` of the two points for (let i = 0; i < lineDistance; i += lineDistance / steps) { const segment = turf.along(route.features[0], i); arc.push(segment.geometry.coordinates); } // Update the route with calculated arc coordinates route.features[0].geometry.coordinates = arc; // Used to increment the value of the point measurement against the route. let counter = 0; map.addSource("route", { type: "geojson", data: route }); map.addSource("point", { type: "geojson", data: point }); map.addLayer({ id: "route", source: "route", type: "line", layout: { "line-sort-key": 2 }, paint: { "line-width": 2, "line-color": "#007cbf" } }); map.addLayer({ id: "point", source: "point", type: "symbol", layout: { // This icon is a part of the Mapbox Streets style. // To view all images available in a Mapbox style, open // the style in Mapbox Studio and click the "Images" tab. // To add a new image to the style at runtime see // https://docs.mapbox.com/mapbox-gl-js/example/add-image/ "icon-image": "airport-15", "icon-rotate": ["get", "bearing"], "icon-rotation-alignment": "map", "icon-allow-overlap": true, "icon-ignore-placement": true } }); function animate() { const start = route.features[0].geometry.coordinates[ counter >= steps ? counter - 1 : counter ]; const end = route.features[0].geometry.coordinates[ counter >= steps ? counter : counter + 1 ]; if (!start || !end) return; // Update point geometry to a new position based on counter denoting // the index to access the arc point.features[0].geometry.coordinates = route.features[0].geometry.coordinates[counter]; // Calculate the bearing to ensure the icon is rotated to match the route arc // The bearing is calculated between the current point and the next point, except // at the end of the arc, which uses the previous point and the current point point.features[0].properties.bearing = turf.bearing( turf.point(start), turf.point(end) ); // Update the source with this new data map.getSource("point").setData(point); // Request the next frame of animation as long as the end has not been reached if (counter < steps) { requestAnimationFrame(animate); } counter = counter + 1; } viewof route2.addEventListener("input", () => { // Set the coordinates of the original point back to origin point.features[0].geometry.coordinates = origin; // Set the coordinates of the new destination in the route route.features[0].geometry.coordinates = [origin, viewof route2.value]; // Calculate the distance in kilometers between route start/end point. const lineDistance = turf.length(route.features[0]); const arc = []; // Number of steps to use in the arc and animation, more steps means // a smoother arc and animation, but too many steps will result in a // low frame rate const steps = lineDistance <= 1000 ? 100 : lineDistance > 1000 && lineDistance <= 2000 ? 200 : lineDistance > 2000 && lineDistance <= 3000 ? 300 : lineDistance > 3000 && lineDistance <= 4000 ? 400 : lineDistance > 4000 && lineDistance <= 5000 ? 500 : lineDistance > 5000 && lineDistance <= 6000 ? 600 : lineDistance > 6000 && lineDistance <= 7000 ? 700 : lineDistance > 7000 && lineDistance <= 8000 ? 800 : lineDistance > 8000 && lineDistance <= 9000 ? 900 : lineDistance > 9000 && lineDistance <= 10000 ? 1000 : 1500; // Draw an arc between the `origin` & `destination` of the two points for (let i = 0; i < lineDistance; i += lineDistance / steps) { const segment = turf.along(route.features[0], i); arc.push(segment.geometry.coordinates); } // Update the route with calculated arc coordinates route.features[0].geometry.coordinates = arc; // Update the source layer map.getSource("point").setData(point); map.getSource("route").setData(route); // Reset the counter counter = 0; // Restart the animation animate(counter); }); // Start the animation animate(counter); }); }); map.on("click", "circle", function (e) { const origin2 = [orig2.lon, orig2.lat]; const pinRoute = e.features[0].geometry.coordinates.slice(); mutable destination = pinRoute; // A simple line from origin to destination. const routen = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "LineString", coordinates: [origin2, mutable destination] } } ] }; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - pinRoute[0]) > 180) { pinRoute[0] += e.lngLat.lng > pinRoute[0] ? 360 : -360; } const lineDistance2 = turf.length(routen.features[0]); var title = "

GUESS #" + gnbyname.get(e.features[0].properties.name) + "

" + //'' + e.features[0].properties.carriers +': ' + e.features[0].properties.carriers_t + '

' + "Airport: " + e.features[0].properties.name + "

" + "Distance to mystery airport: " + Math.round(lineDistance2) + " kms

"; //'👉 Click to see COVID info' const popup3 = new mapboxgl.Popup({ offset: 7.5, className: "popupCustom", closeButton: false, closeOnClick: true, focusAfterOpen: false }); popup3.setLngLat(pinRoute).setHTML(title).setMaxWidth("450px").addTo(map); //.setLngLat(e.lngLat) //.setHTML(title) //.addTo(map); }); map.on("touchstart", "circle", function (e) { // Change the cursor to a pointer when the mouse is over the states layer. map.getCanvas().style.cursor = "pointer"; const origin2 = [orig2.lon, orig2.lat]; const pinRoute = e.features[0].geometry.coordinates.slice(); mutable destination = pinRoute; // A simple line from origin to destination. const routen = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "LineString", coordinates: [origin2, mutable destination] } } ] }; while (Math.abs(e.lngLat.lng - pinRoute[0]) > 180) { pinRoute[0] += e.lngLat.lng > pinRoute[0] ? 360 : -360; } const lineDistance2 = turf.length(routen.features[0]); var title = "

GUESS #" + gnbyname.get(e.features[0].properties.name) + "

" + //'' + e.features[0].properties.carriers +': ' + e.features[0].properties.carriers_t + '

' + "Airport: " + e.features[0].properties.name + "

" + "Distance to mystery airport: " + Math.round(lineDistance2) + " kms

"; const popup2 = new mapboxgl.Popup({ closeButton: false, closeOnClick: true }); popup2.setLngLat(pinRoute).setHTML(title).setMaxWidth("450px").addTo(map); //.setLngLat(e.lngLat) //.setHTML(title) //.addTo(map); }); // Change it back to a pointer when it leaves. map.on("mouseleave", "circle", function () { map.getCanvas().style.cursor = ""; }); }30:[{"id":"da981c2146f6b9e83621dd9651fc0f6648384ade0afee9b03e4fc07d8d9e6befd517f930b4b9a43b477f868aa6dd31ec2e5b10baf2334506d519bfad3b552445","href":"https://static.observableusercontent.com/files/da981c2146f6b9e83621dd9651fc0f6648384ade0afee9b03e4fc07d8d9e6befd517f930b4b9a43b477f868aa6dd31ec2e5b10baf2334506d519bfad3b552445","name":"myairports.json","type":"application/json","lastModified":1744795548774.955,"size":3520},{"id":"ee4c372134fe7a9767ec8d4931f0f144b45677390fa96c89653dc6bc323426dcdcec34e33579d0337a10889f137b231fca7698f5583826e70698f014a8ba8026","href":"https://static.observableusercontent.com/files/ee4c372134fe7a9767ec8d4931f0f144b45677390fa96c89653dc6bc323426dcdcec34e33579d0337a10889f137b231fca7698f5583826e70698f014a8ba8026","name":"train_stations_europe.csv","type":"text/csv","lastModified":1745340265678.608,"size":6989914}] 2d:{"title":"MY COLLECTION","cells":[{"id":0,"value":"title2 = md`\n ${html` \n \n \n \n

\n ${viewof title}\n ${viewof radios} \n ${md`---`}\n ${viewof button2}\n

\n`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof mas = multiAutoSelect({\n options: pointsLookup,\n submit: \"GUESS\",\n size: 26,\n placeholder: \"Select an airport\"\n //value: [\"California\", \"Washington\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"mas","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"pointsLookup2 = Object.keys(data).map(function (key) {\n let row = data[key];\n return `${key} - ${row.name} (${row.city_name}, ${row.country})`;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"pointsLookup = train_stations_europe.map((d) => {\n return `${d.uic} - ${d.name_norm} (${d.country})`;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"train_stations_europe = await FileAttachment(\"train_stations_europe.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"goals = {\n const formatYearAndDate = d3.timeFormat(\"%Y %j\");\n const yearAndDate = parseInt(\n formatYearAndDate(Date.now()).split(\" \").join(\"\")\n );\n return {\n goalWords: d3\n .shuffler(d3.randomLcg(yearAndDate))(pointsLookup.slice())\n .slice(0, 1)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"orig = airports.filter((d) => d.name === goals.goalWords[0])[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"orig2 = points.filter((d) => d.name === goals.goalWords[0])[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"import { multiAutoSelect } from \"@cadasa/shape\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"import { View } from \"@mbostock/synchronized-views\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"mutable destination = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"turf = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"viewof route2 = new View({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"gnbyname = new Map(mas.map((value, key) => [value, key + 1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof radios = radio({\n //title: 'Contact Us',\n //description: 'Please select your preferred contact method',\n options: [\n { label: html`FOOTB⚽️LL`, value: \"FB\" },\n { label: html`TENN🎾S`, value: \"TN\" },\n { label: html`CYCL🚴NG`, value: \"CL\" },\n { label: html`AIRPO🛬T`, value: \"AI\" }\n ],\n value: \"FB\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof title = md`# MY COLLECTION \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof button2 = button({\n value: \"RESET VIEW\",\n description: \"Click on the stadium icon to fly to the venue\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"myairports_geo = ({\n type: \"FeatureCollection\",\n //'crs': json.crs,\n features: airports.map((d) => {\n let coordinates = [d.lon, d.lat];\n let type = \"Point\";\n let code = d.code;\n let name = d.name;\n let properties = \"\";\n let geometry = \"\";\n properties = { code, name };\n geometry = { type, coordinates };\n type = \"Feature\";\n return {\n type,\n // id,\n // name,\n // companies,\n properties,\n // properties2,\n geometry\n // coords\n };\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"myairports = FileAttachment(\"myairports.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"data = fetch(\n `https://raw.githubusercontent.com/Jonty/airline-route-data/main/airline_routes.json`\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"points = Object.keys(data).map(function (key) {\n return {\n code: key,\n name: `${key} - ${data[key].name} (${data[key].city_name}, ${data[key].country})`,\n lat: +data[key].latitude,\n lon: +data[key].longitude\n };\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"airports = train_stations_europe.map((d) => {\n return {\n code: d.uic,\n name: `${d.uic} - ${d.name_norm} (${d.country})`,\n lat: +d.latitude,\n lon: +d.longitude\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { radio, button } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"mapboxgl = {\n const gl = require(\"mapbox-gl@2\");\n if (!gl.accessToken) {\n // token allowed only this Observable\n gl.accessToken =\n \"pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw\";\n const href = await require.resolve(\"mapbox-gl@2/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}