{ mapboxgl.accessToken = 'pk.eyJ1Ijoicnlhbm1hdHR0IiwiYSI6ImNsdXFxa2l0MDAxN3Iya3JyeGJieTYzajYifQ.N65Wup9Fqz-T1UuAgv2nsw'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/ryanmattt/clvasuat600su01qv5be93vsp', center: [5.315802, 60.388453], zoom: 12.8, minZoom: 13 }); map.loadImage('https://imgs.search.brave.com/43WdNtXONC7AJYIhpf6df3jC54lFnR6yCXcMpt2oHOY/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9hc3Nl/dHMuZHJ5aWNvbnMu/Y29tL3VwbG9hZHMv/aWNvbi9wcmV2aWV3/LzUwNTgvaWNvbl9n/cmlkXzF4X2Y2NDAw/ZTg1LTNlOTEtNGVl/ZS04NDhkLTI3YWQy/NDc0OTkxOC5wbmc', function (error, image) { if (error) throw error; map.addImage('camera', image); }); map.loadImage('https://imgs.search.brave.com/5SOuLRo06e3vP3yHy_JFjBg5_vItENRdIlRmndMGKVI/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9zdGF0/aWMtMDAuaWNvbmR1/Y2suY29tL2Fzc2V0/cy4wMC9mb3JrLWFu/ZC1rbmlmZS13aXRo/LXBsYXRlLWVtb2pp/LTI1NngyMjktamR0/N3A1Z3MucG5n', function (error, image) { if (error) throw error; map.addImage('forkknife', image); }); //** BEGIN HIKE ANIMATIONS SETUP **// const localSouthHike = structuredClone(southHike); const localNorthHike = structuredClone(northHike); const geojsonSouthHike = { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[localSouthHike.features[0].geometry.coordinates[0][0][0],localSouthHike.features[0].geometry.coordinates[0][0][1]]] } } ] }; localSouthHike.features[0].geometry.coordinates[0].shift(); const geojsonNorthHike = { 'type': 'FeatureCollection', 'features': [ { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[localNorthHike.features[0].geometry.coordinates[0][0][0],localNorthHike.features[0].geometry.coordinates[0][0][1]]] } } ] }; localNorthHike.features[0].geometry.coordinates[0].shift(); var run = 0; var currSouthCoords = []; var currNorthCoords = []; const pointsToAdd = 4; var pointsAdded = 0; let animation; // to store and cancel the animation //** END HIKE ANIMATIONS SETUP **// //** BEGIN PHOTO LAYER SETUP **// const localPhotos = structuredClone(image_data); const geojsonPhotos = { 'type': 'FeatureCollection', 'features': [ { } ] }; //** END PHOTO LAYER SETUP **// // MAP LOAD map.on('load', () => { map.addSource('photos', { type: 'geojson', data: geojsonPhotos }); //** BEGIN HIKE LAYERS **// map.addSource('northLine', { 'type': 'geojson', 'data': geojsonNorthHike }); map.addSource('southLine', { 'type': 'geojson', 'data': geojsonSouthHike }); map.addLayer({ 'id': 'line-animation-north', 'type': 'line', 'source': 'northLine', 'layout': { 'line-cap': 'round', 'line-join': 'round' }, 'paint': { 'line-color': '#F64740', 'line-width': 4, 'line-opacity': 1 } }); map.addLayer({ 'id': 'line-animation-south', 'type': 'line', 'source': 'southLine', 'layout': { 'line-cap': 'round', 'line-join': 'round' }, 'paint': { 'line-color': '#F64740', 'line-width': 4, 'line-opacity': 1 } }); if(run<2){ animateLine(); } function animateLine(timestamp) { if (typeof localSouthHike.features[0].geometry.coordinates[0][0] != "undefined") { for (let i = 0; i < pointsToAdd; i++) { if (typeof localSouthHike.features[0].geometry.coordinates[0][0] == "undefined") { run++; break; } const x = localSouthHike.features[0].geometry.coordinates[0][0][0]; // draw a sine wave with some math. const y = localSouthHike.features[0].geometry.coordinates[0][0][1]; // append new coordinates to the lineString geojsonSouthHike.features[0].geometry.coordinates.push([x, y]); localSouthHike.features[0].geometry.coordinates[0].shift(); // then update the map map.getSource('southLine').setData(geojsonSouthHike); currSouthCoords = [x,y] pointsAdded++; } } if (typeof localNorthHike.features[0].geometry.coordinates[0][0] != "undefined") { for (let i = 0; i < pointsToAdd; i++) { if (typeof localNorthHike.features[0].geometry.coordinates[0][0] == "undefined") { run++; break; } const x = localNorthHike.features[0].geometry.coordinates[0][0][0]; const y = localNorthHike.features[0].geometry.coordinates[0][0][1]; geojsonNorthHike.features[0].geometry.coordinates.push([x, y]); localNorthHike.features[0].geometry.coordinates[0].shift(); map.getSource('northLine').setData(geojsonNorthHike); currNorthCoords = [x,y] pointsAdded++; } } if(localPhotos.length>0 || pointsAdded%100==0) { localPhotos.features.forEach((photoObj, index) => { const photoCoords = photoObj.geometry.coordinates if(distance(photoCoords, currSouthCoords, currNorthCoords) < .002) { localPhotos.features.slice(index) geojsonPhotos.features.push(photoObj); map.getSource('photos').setData(geojsonPhotos); } }); } animation = requestAnimationFrame(animateLine); } //** END HIKE LAYERS **// //** BEGIN PHOTOS LAYER **// map.addLayer({ 'id': 'pic-layer', 'type': 'symbol', 'source': 'photos', 'layout': { 'icon-image': 'camera', 'icon-size': .2, 'icon-allow-overlap': true } }); map.on('click', 'pic-layer', (e) => { if (!e.features || e.features.length === 0) { console.error('No features found at clicked location'); return; } const coordinates = e.features[0].geometry.coordinates.slice(); const time = e.features[0].properties.time; const description = e.features[0].properties.url; //WOOO DATES const date = new Date(time.substring(0,10).replace(/:/g, '-')+"T"+time.substring(11)); const options = { weekday:"long", month: "short", day: "numeric", dayperiod: "narrow", hourCycle: "h12", hour: "numeric", minute: "numeric" } const formattedDate = `${date.toLocaleString("en-US", options)}`; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } const popup = new mapboxgl.Popup(); const popupContent = document.createElement('div'); popupContent.innerHTML = `

${date.getDate()=="12"?"Fløyen Hike":"Damsgårdsfjellet Hike"}

Timestamp: ${formattedDate}

`; popup.setLngLat(coordinates) .setDOMContent(popupContent) .addTo(map); }); map.on('mouseenter', 'pic-layer', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'pic-layer', () => { map.getCanvas().style.cursor = ''; }); //** END PHOTOS LAYER **// //** BEGIN RESTAURANTS LAYER **// map.addSource('restaurants', { type: 'geojson', data: restaurants }); map.addLayer({ 'id': 'food-layer', 'type': 'symbol', 'source': 'restaurants', 'layout': { 'icon-image': 'forkknife', 'icon-size': .1, 'icon-allow-overlap': true } }); map.on('click', 'food-layer', (e) => { if (!e.features || e.features.length === 0) { console.error('No features found at clicked location'); return; } const restaurant = e.features[0].properties; const coordinates = e.features[0].geometry.coordinates.slice(); const time = e.features[0].properties.timestamp; const description = restaurant.description; const name = restaurant.name; //WOOO DATES const date = new Date(time); const options = { weekday:"long", month: "short", day: "numeric", dayperiod: "narrow", hourCycle: "h12", hour: "numeric", minute: "numeric" } const formattedDate = `${date.toLocaleString("en-US", options)}`; while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } var popupText = `

${name}

${getStarString(restaurant.rating)}
Cuisine: ${restaurant.cuisine}
Meal: ${titleCase(restaurant.meal)}
Review:
${description}

`; console.log(typeof restaurant.img) if (typeof restaurant.img !== 'undefined') { popupText += ``; } const popup = new mapboxgl.Popup(); const popupContent = document.createElement('div'); popupContent.innerHTML = popupText; popup.setLngLat(coordinates) .setDOMContent(popupContent) .addTo(map); }); map.on('mouseenter', 'food-layer', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'food-layer', () => { map.getCanvas().style.cursor = ''; }); //** END RESTAURANTS LAYER **// }); // Helper functions for string creation function getStarString (starcount){ switch (starcount){ case 1: return "⭐" case 2: return "⭐⭐" case 3: return "⭐⭐⭐" case 4: return "⭐⭐⭐⭐" case 5: return "⭐⭐⭐⭐⭐" } } function titleCase(word) { return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase(); } function distance(coord1, coord2, coord3){ const deltaX1 = coord2[0] - coord1[0]; const deltaY1 = coord2[1] - coord1[1]; const distance1 = Math.sqrt(deltaX1 ** 2 + deltaY1 ** 2); const deltaX2 = coord3[0] - coord1[0]; const deltaY2 = coord3[1] - coord1[1]; const distance2 = Math.sqrt(deltaX2 ** 2 + deltaY2 ** 2); // console.log(distance) return distance1