viewof map2 = { let buttonText = "Welcome!"; const container = html`

`; const footer = html`

Flight progress
Distance

4710 km
Time to go

2h 45min
Altitude

11889 m
Speed

878 km/h
Local time

08:25 am
Local radio station

Radio Alistiqama

`; const button = html`

${buttonText}

`; const parent = html`

`; parent.appendChild(button); parent.appendChild(container); parent.appendChild(footer); //console.log(test); const configs = config.tenerifaHelsinki; let bearing = turf.bearing(configs.origin, configs.destination); const map = new mapboxgl.Map({ container, style, center: configs.mapCenter, zoom: configs.zoom, projection: 'globe', pitch: 40, attributionControl: false }); invalidation.then(() => map.remove()); map.addControl(new mapboxgl.FullscreenControl()); container.value = map; map.on('load', () => { map.resize(); addIconLayers(map, features, bearing); container.dispatchEvent(new CustomEvent('input')); }); // wait for the terrain to load before starting animations map.once('idle', () => { // animate const distance = turf.lineDistance(features.route); let start; const animationDuration = configs.animationDuration; //get countries from source for geofencing const countries = map.querySourceFeatures('composite', {sourceLayer: 'country_boundaries'}); const intersectingCountries = countries.filter((country) => turf.booleanIntersects(features.route, country)); function frame(time) { if (!start) start = time; const phase = (time - start) / animationDuration; const pointAlongRoute = turf.along( features.route.features[0], distance * phase ); map.getSource('animatedIconSource').setData(pointAlongRoute); //this would be nicer with line-gradient, but can't get it to work const split = turf.lineSplit(features.route.features[0], pointAlongRoute); map.getSource('routeSourceUpdated').setData(split.features[0]); //start camera behind const translatedRoute = turf.transformTranslate(features.route.features[0], -800, bearing); const pointAlongRouteCamera = turf.along( translatedRoute, distance * phase ); //interate through country subset and update button intersectingCountries.forEach((country) => { if (turf.booleanPointInPolygon(pointAlongRoute, country)) { document.getElementById('mapbutton').innerHTML = country.properties.name; } }) //constantly update bearing, otherwise icons gets off track bearing = turf.bearing(pointAlongRoute, configs.destination); map.setLayoutProperty( 'animatedIconShadow', 'icon-rotate', bearing ); map.setLayoutProperty( 'animatedIcon', 'icon-rotate', bearing ); if(followBtn)updateCamera(map, bearing, pointAlongRouteCamera.geometry.coordinates, configs); if (phase > 1) { return; } requestAnimationFrame(frame); } requestAnimationFrame(frame); }); return parent; }

Purpose-built for displays of data