2d:null 2e:["$","title",null,{"children":"MY COLLECTION | cadasa | Observable"}] 33:T79fb,mapboxMap = { const container = html`

`; yield container; mapboxgl.accessToken = "pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw"; var map = new mapboxgl.Map({ container: container, style: "mapbox://styles/mapbox/satellite-streets-v11", //: //'mapbox://styles/mapbox/satellite-v9',//"mapbox://styles/mapbox/streets-v11" center: button2 ? [-0.2795188, 51.5560208] : [-0.2795188, 51.5560208], //[airports.filter(d=>d.properties.name === mas[mas.length-1])[0].geometry.coordinates[0], //airports.filter(d=>d.properties.name === mas[mas.length-1])[0].geometry.coordinates[1]], projection: "globe", //maxZoom: 1.3, zoom: button2 ? 2 : 2 }); //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("dest", { type: "geojson", // Line metrics is required to use the 'line-progress' property // lineMetrics: false, data: airports_geo }); map.addLayer({ id: "route", type: "line", source: "dest", filter: ["==", ["geometry-type"], "LineString"], layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": "#bd0000", "line-width": 3 } }); map.addLayer({ id: "circle", type: "symbol", source: "dest", filter: ["==", ["geometry-type"], "Point"], paint: { "text-color": "red" }, layout: { "icon-image": "{icon}", /*"text-field": ["get", "name"], "text-variable-anchor": ["top", "bottom", "left", "right"], "text-ignore-placement": true, "text-offset": [5, 5], "text-radial-offset": 0.8, "text-justify": "auto", "text-size": 10, "text-allow-overlap": true,*/ "icon-allow-overlap": true } }); map.addLayer({ id: "circle2", type: "symbol", source: "dest", filter: ["has", "r2024"], paint: { "text-color": "orange" }, layout: { //"icon-image": "{icon}", "text-field": ["get", "name"], "text-variable-anchor": ["top", "bottom", "left", "right"], "text-ignore-placement": true, "text-offset": [5, 5], "text-radial-offset": 0.8, "text-justify": "auto", "text-size": 10, "text-allow-overlap": true //"icon-allow-overlap": true } }); map.addLayer({ id: "circle3", type: "symbol", source: "dest", filter: ["has", "r2024a"], paint: { "text-color": "red" }, layout: { //"icon-image": "{icon}", "text-field": ["get", "name"], "text-variable-anchor": ["top", "bottom", "left", "right"], "text-ignore-placement": true, "text-offset": [5, 5], "text-radial-offset": 0.8, "text-justify": "auto", "text-size": 10, "text-allow-overlap": true //"icon-allow-overlap": true } }); /* 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.flag + "

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

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

" + "Capacity: " + e.features[0].properties.capacity + "

" + "Distance to mystery stadium: " + 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("mouseenter", "circle", function (e) { 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] } } ] }; // 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 = radios === "CL" ? "

" + e.features[0].properties.flag + " " + e.features[0].properties.name + "

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

' + "Stage: " + e.features[0].properties.event + "

" + "Length: " + e.features[0].properties.capacity + "

" + "Year: " + e.features[0].properties.year + "

" + "👉 Click to fly to the race" : radios === "AI" && e.features[0].properties.r2024 === undefined && e.features[0].properties.r2024a === undefined ? "