const gl = await require("mapbox-gl@v2.13.0");

if (!gl.accessToken) {

gl.accessToken =

"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g";

const href = await require.resolve("mapbox-gl@v2.13.0/dist/mapbox-gl.css");

document.head.appendChild(html`<link href=${href} rel=stylesheet>`);

}

return gl;

// Create space for a map

let container = html`<div style='height:600px;' />`;

yield container;

// Creates map from Mapbox

let map = new mapboxgl.Map({

container,

// Coordinates taken from Google Maps of the Gömmaren area

center: [17.937, 59.256],

// Starting zoom

zoom: 14,

// Choose from different Mapbox styles like light, dark, or I chose outdoors version 12

style: "mapbox://styles/mapbox/outdoors-v12"

});

const geojson = {

'type': 'FeatureCollection',

'features': [

{

'type': 'Feature',

'properties': {},

'geometry': {

'type': 'LineString',

// Took the gpx file and changed it to a csv to delete all data except coordinates and elevation, then converted to a geojson to get the coordinates

'coordinates': coordinates

}

}

]

};

map.on('load', () => {

// 'line-gradient' can only be used with GeoJSON sources

// and the source must have the 'lineMetrics' option set to true

map.addSource('line', {

type: 'geojson',

lineMetrics: true,

data: geojson

});

// following this tutorial: https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/

// the layer must be of type 'line'

map.addLayer({

type: 'line',

source: 'line',

id: 'line',

paint: {

'line-color': 'red',

'line-width': 5,

// 'line-gradient' must be specified using an expression

// with the special 'line-progress' property

'line-gradient': [

'interpolate',

['linear'],

['line-progress'],

// See Angie's elevation transformations c

0,"#880077",0.01,"#860079",0.02,"#93006c",0.03,"#85007a",0.04,"#7f0080",0.05,"#770088",0.06,"#7e0081",0.07,"#7c0083",0.08,"#84007b",0.09,"#80007f",0.1,"#9d0062",0.11,"#c5003a",0.12,"#cb0034",0.13,"#c60039",0.14,"#ba0045",0.15,"#ad0052",0.16,"#b2004d",0.17,"#a90056",0.18,"#960069",0.19,"#91006e",0.2,"#84007b",0.21,"#8e0071",0.22,"#7e0081",0.23,"#85007a",0.24,"#81007e",0.25,"#84007b",0.26,"#80007f",0.27,"#7c0083",0.28,"#85007a",0.29,"#8e0071",0.3,"#a1005e",0.31,"#a90056",0.32,"#af0050",0.33,"#b1004e",0.34,"#b0004f",0.35,"#be0041",0.36,"#cc0033",0.37,"#af0050",0.38,"#bf0040",0.39,"#b70048",0.4,"#b70048",0.41,"#b80047",0.42,"#b5004a",0.43,"#aa0055",0.44,"#b0004f",0.45,"#af0050",0.46,"#ba0045",0.47,"#bf0040",0.48,"#c1003e",0.49,"#d0002f",0.5,"#de0021",0.51,"#ea0015",0.52,"#fb0004",0.53,"#f70008",0.54,"#f5000a",0.55,"#e80017",0.56,"#f0000f",0.57,"#eb0014",0.58,"#d80027",0.59,"#ca0035",0.6,"#d2002d",0.61,"#a90056",0.62,"#9b0064",0.63,"#990066",0.64,"#8d0072",0.65,"#870078",0.66,"#780087",0.67,"#84007b",0.68,"#85007a",0.69,"#880077",0.7,"#6b0094",0.71,"#5f00a0",0.72,"#5c00a3",0.73,"#4f00b0",0.74,"#5800a7",0.75,"#5100ae",0.76,"#5d00a2",0.77,"#5c00a3",0.78,"#60009f",0.79,"#5b00a4",0.8,"#5300ac",0.81,"#4000bf",0.82,"#3a00c5",0.83,"#3700c8",0.84,"#2900d6",0.85,"#1a00e5",0.86,"#0a00f5",0.87,"#0500fa",0.88,"#1000ef",0.89,"#2900d6",0.9,"#2700d8",0.91,"#2000df",0.92,"#2e00d1",0.93,"#4800b7",0.94,"#6b0094",0.95,"#82007d",0.96,"#7f0080",0.97,"#73008c",0.98,"#5e00a1",0.99,"#4c00b3",1,"#4400bb"

]

},

layout: {

'line-cap': 'round',

'line-join': 'round'

}

});

});

}