let buttonText = "Welcome!";

const container = html`<div id='map' class='bg-gray-dark w-full h600'></div>`;

const footer = html`

<li class='mylistElement'>

<p class='mylistTitle'>Local radio station</p>

<div style="display: flex; align-items: center; justify-content: space-around;">

<p>Radio Alistiqama</p>

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

<circle cx="7.87012" cy="7.67871" r="7.67871" fill="white"/>

<path d="M5.48145 10.7235V5.4441C5.48145 4.6734 6.31654 4.19239 6.98321 4.5791L11.4504 7.17035C12.1085 7.55212 12.1161 8.49987 11.4642 8.89218L6.99704 11.5803C6.33054 11.9814 5.48145 11.5013 5.48145 10.7235Z" fill="#29323A"/>

</svg>

</div>

</li>

</ul>

</div>`;

const button = html`

<div class='box'>

<p id="mapbutton">${buttonText}</p>

</div>`;

const parent = html`<div></div>`;

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;

}