viewof map = { 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/streets-v11" center: location, 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; //container.value = map // 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.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': location // 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 = location; 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]); 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 } }); }); }) const animate = new Promise(resolve => { setInterval(function() { // date = addMinutes(date, 1); let date = new Date(hour.time) // // https://codesandbox.io/s/cbrpb2?file=/src/index.js:580-667 var dayNightJson = new GeoJSONTerminator({ resolution: 2, time: date }) if (map.getSource('night-source')) { map.getSource('night-source').setData(dayNightJson) } else { map.addSource('night-source', { 'type': 'geojson', 'data': dayNightJson }) } if (!map.getLayer('night-polygon-layer')) { map.addLayer({ 'id': 'night-polygon-layer', 'type': 'fill', 'source': 'night-source', 'layout': {}, 'paint': { 'fill-color': '#000000', 'fill-opacity': [ "interpolate", ["linear"], ["zoom"], 0, 0.5, 8, 0.1 ], } }, 'settlement-subdivision-label'); // map.addLayer({ // 'id': 'night-polygon-layer-line', // 'type': 'line', // 'source': 'night-source', // 'layout': {}, // 'paint': { // 'line-color': '#000000', // 'line-width': 20, // 'line-blur': 20, // 'line-opacity': 0.5 // } // }, 'settlement-subdivision-label'); } }, 1000); // Every 1 second }) //return container; }