mapboxMap = { const container = html`

`; yield container; mapboxgl.accessToken = "pk.eyJ1IjoidG9mZmkiLCJhIjoiY2lvMDBxMzR3MDB1eHZza2x4NGI2YjI5OSJ9.IEaNA05pWbT92nOu-lEOYw"; var map = new mapboxgl.Map({ container: container, style: "mapbox://styles/mapbox/light-v10", //"mapbox://styles/mapbox/streets-v11" center: [orig.lon, orig.lat], projection: "globe", // minZoom: 1, zoom: 1.9 }); 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: dest_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; } var title = "

DIRECT ROUTE: " + e.features[0].properties.orig + "-" + e.features[0].properties.dest + "

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

" + "Distance: " + e.features[0].properties.km + " kilometers

" + "Duration: " + e.features[0].properties.min + " minutes

" + "👉 Click to see COVID info"; const popup2 = new mapboxgl.Popup({ offset: 7.5, closeButton: false, closeOnClick: true, anchor: origin[1] > coordinates[1] ? "top" : "bottom" }); popup2 .setLngLat(coordinates) .setHTML(title) .setMaxWidth("450px") .addTo(map); map.on("mouseleave", "circle", function () { popup2.remove(); }); 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]); 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 origin = [orig.lon, orig.lat]; const pinRoute = e.features[0].geometry.coordinates.slice(); // 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; } var title = "

" + isoAlpha3toEmoji(e.features[0].properties.iso3) + " " + e.features[0].properties.name + ": COVID Info Published " + e.features[0].properties.published + "

" + e.features[0].properties.option2 + "

" + e.features[0].properties.option3 + "

" + e.features[0].properties.option4 + "

" + e.features[0].properties.info + "

" + "Sources: " + e.features[0].properties.sources; const popup3 = new mapboxgl.Popup({ offset: 7.5, className: "popupCustom", closeButton: false, closeOnClick: true, focusAfterOpen: false, anchor: origin[1] > pinRoute[1] ? "top" : "bottom" }); 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 origin = [orig.lon, orig.lat]; const pinRoute = e.features[0].geometry.coordinates.slice(); // 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; } var title = "

DIRECT ROUTE: " + e.features[0].properties.orig + "-" + e.features[0].properties.dest + "

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

" + "Distance: " + e.features[0].properties.km + " kilometers

" + "Duration: " + e.features[0].properties.min + " minutes

" + "👉 Click to see COVID info"; const popup2 = new mapboxgl.Popup({ closeButton: false, closeOnClick: true, anchor: origin[1] > pinRoute[1] ? "top" : "bottom" }); 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 = ""; }); }); }