function mapClickSim(m,i){$('#contentMapModal_'+m).modal('show');function w(){if(window.contentMaps[m]!==undefined&&typeof toggleMapIconClick==="function"&&typeof resetMarkersAndCards==="function"){resetMarkersAndCards(m);toggleMapIconClick(m,i);}else{setTimeout(w,100);}}
w();}
function handleActionClick(e){const target=e.target.closest('[data-action]');if(!target)return;const{action,actionArgs}=target.dataset;const fn={mapClickSim}[action];fn&&fn(...actionArgs.split(',').map(Number));}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',()=>{document.querySelectorAll('[data-action]').forEach(b=>b.addEventListener('click',handleActionClick));});}else{document.querySelectorAll('[data-action]').forEach(b=>b.addEventListener('click',handleActionClick));}if(typeof window.contentMaps==='undefined'){window.contentMaps={};window.initialMapBounds={};}
if(typeof window.bounds==='undefined'){window.bounds={};}
if(typeof window.markerData==='undefined'){window.markerData={};}
if(!markerData[1]){markerData[1]={};}
function initMapbox_1(){mapboxgl.accessToken='pk.eyJ1IjoibGF6eXRyaXBzIiwiYSI6ImNsaTJ4anh2MTA5NDYzZW85ODJmMm45ZzcifQ.9u5pN47V7SsoFwF6_Pw5bQ';const contentMap_1=new mapboxgl.Map({container:'contentMap_1',style:'mapbox://styles/mapbox/streets-v11',center:[-113.49383634356222,53.54615518124187],zoom:5,cooperativeGestures:false});window.contentMaps[1]=contentMap_1;if(typeof window.bounds[1]==='undefined'){window.bounds[1]=new mapboxgl.LngLatBounds();}
markerData[1][0]={"lonLat":[" -113.49383634356222","53.54615518124187"],"type":"star-plain"};markerData[1][1]={"lonLat":[" -117.8385305826862","53.221992273972155"],"best":"1","time":"195","distance":195.73192555476,"type":"numbered","onClick":true,"route":{"id":"2712","color":"#fa5050"},"card":{"title":"Jasper National Park","distanceTime":"\ud83d\ude97 315 kilometres \u23f1\ufe0f 3 hours, 15 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/89\/88\/898846adcf45833a1cddca877f28e5af-bb.jpg\" alt=\"Maligne Lake, Jasper National Park, Alberta, Canada with a panorama view of the beautiful Spirit Island, trees in the foreground, the stunning lake before the striking mountains in the distance and taken on a sunny day.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};function getNewLngLat(map,originalLngLat,offsets){var pixel=map.project(new mapboxgl.LngLat(originalLngLat[0],originalLngLat[1]));pixel.x+=offsets.x;pixel.y+=offsets.y;return map.unproject(pixel);}
Object.keys(contentMaps).forEach(function(mapNum){contentMaps[mapNum].on('zoom',function(){Object.keys(markerData[mapNum]).forEach(function(iconNum){var marker=markerData[mapNum][iconNum];if(!isMobileDevice()&&marker.cardInstance){var offsets={x:marker.card.oX,y:marker.card.oY};var newLngLat=getNewLngLat(contentMaps[mapNum],marker.lonLat,offsets);marker.cardInstance.setLngLat([newLngLat.lng,newLngLat.lat]);}});});});async function fetchRoute(d,m,i,c){const p={routeId:d};const r=await fetch('/api/request-route',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(p)});if(r.ok){const data=await r.json();if(data.response&&data.response.route){const d=JSON.parse(data.response.route);markerData[m][i].routeJson=d;updateMapWithRoute(m,i,d,c);}}}
function updateMapWithRoute(m,i,r,c){const l='iconRoute_'+m+'_'+i;const g={type:'Feature',properties:{},geometry:{type:'LineString',coordinates:r}};if(contentMaps[m].getLayer(l)){contentMaps[m].setLayoutProperty(l,'visibility','visible');contentMaps[m].getSource(l).setData(g);}else{contentMaps[m].addLayer({id:l,type:'line',source:{type:'geojson',data:g},layout:{'line-join':'round','line-cap':'round'},paint:{'line-color':c,'line-width':5,'line-opacity':0.8}});}}
function hideRouteLayer(m,i){const l='iconRoute_'+m+'_'+i;if(contentMaps[m].getLayer(l)){contentMaps[m].setLayoutProperty(l,'visibility','none');}}
window.toggleMapIconClick=function(m,iconNum){if(markerData[m][iconNum].a){return;}
for(const[key,icon]of Object.entries(markerData[m])){if(parseInt(key)===iconNum){continue;}
if(icon.popupInstance){icon.popupInstance.remove();delete icon.popupInstance;}
if(icon.route&&contentMaps[m].getLayer('iconRoute_'+m+'_'+key)){hideRouteLayer(m,key);}
if(icon.marker){icon.marker.getElement().classList.remove('markerSpanSelect');}
if(icon.cardInstance){icon.cardInstance.remove();delete icon.cardInstance;}
if(icon.cardOverlay){var overlayToRemove=icon.cardOverlay;if(overlayToRemove&&overlayToRemove.parentNode){overlayToRemove.parentNode.removeChild(overlayToRemove);delete icon.cardOverlay;}}
icon.a=false;}
if(!markerData[m][iconNum].a){markerData[m][iconNum].marker.getElement().classList.add('markerSpanSelect');if(markerData[m][iconNum].popup){const t=markerData[m][iconNum].popup.title;const p=markerData[m][iconNum].popup.text;let popupHTML='<div>';if(t){popupHTML+='<p class="font-semi-bold mb-1 font-size-normal">'+t+'</p>';}
if(p){popupHTML+='<p class="mb-0 font-size-normal">'+p+'</p>';}
popupHTML+='</div>';var popup=new mapboxgl.Popup({anchor:'bottom',closeButton:false,closeOnClick:false,className:'pointer'}).setLngLat(markerData[m][iconNum].lonLat).setHTML(popupHTML).addTo(contentMaps[m]);markerData[m][iconNum].popupInstance=popup;popup._content.addEventListener('click',function(){toggleMapIconClick(m,iconNum);});markerData[m][iconNum].marker.getElement().style.display='none';}
if(markerData[m][iconNum].route){const layerId='iconRoute_'+m+'_'+iconNum;if(contentMaps[m].getLayer(layerId)){contentMaps[m].setLayoutProperty(layerId,'visibility','visible');}else{fetchRoute(markerData[m][iconNum].route.id,m,iconNum,markerData[m][iconNum].route.color);}}
if(markerData[m][iconNum].card){var cardContent={cardTitle:markerData[m][iconNum].card.title,cardDistanceTime:markerData[m][iconNum].card.distanceTime,photoCode:markerData[m][iconNum].card.photoCode,};if(markerData[m][iconNum].hasOwnProperty('cardLink')){cardContent.cardLink=markerData[m][iconNum].cardLink;}
if(markerData[m][iconNum].hasOwnProperty('cardLinkText')){cardContent.cardLinkText=markerData[m][iconNum].cardLinkText;}
if(!isMobileDevice()){var cardContentHtml=createCardContentHtml(cardContent,false);var offsets={x:markerData[m][iconNum].card.oX,y:markerData[m][iconNum].card.oY};var newLngLat=getNewLngLat(contentMaps[m],markerData[m][iconNum]['lonLat'],offsets);var cardPopup=new mapboxgl.Popup({anchor:'bottom',closeButton:false,closeOnClick:false,className:'mapPopupCard'}).setHTML(cardContentHtml).setLngLat([newLngLat.lng,newLngLat.lat]).addTo(contentMaps[m]);markerData[m][iconNum].cardInstance=cardPopup;}else{var cardMobile=document.createElement('div');cardMobile.className='mapPopupCardMobile';cardMobile.innerHTML=createCardContentHtml(cardContent,true);var mapContainer=contentMaps[m].getContainer();mapContainer.appendChild(cardMobile);markerData[m][iconNum].cardOverlay=cardMobile;}}
markerData[m][iconNum].a=true;updateMapBounds(m,iconNum);}else{resetMarkersAndCards(m);}}
window.resetMarkersAndCards=function(m){Object.keys(markerData[m]).forEach((i)=>{if(markerData[m][i].marker){markerData[m][i].marker.getElement().classList.remove('markerSpanSelect');}
if(markerData[m][i].popupInstance){markerData[m][i].popupInstance.remove();delete markerData[m][i].popupInstance;}
if(markerData[m][i].route){if(contentMaps[m].getLayer('iconRoute_'+m+'_'+i)){hideRouteLayer(m,i);}}
if(markerData[m][i].card){if(markerData[m][i].cardInstance){markerData[m][i].cardInstance.remove();delete markerData[m][i].cardInstance;}}
if(markerData[m][i].cardOverlay){var overlayToRemove=markerData[m][i].cardOverlay;if(overlayToRemove&&overlayToRemove.parentNode){overlayToRemove.parentNode.removeChild(overlayToRemove);delete markerData[m][i].cardOverlay;}}
markerData[m][i].marker.getElement().style.display='block';markerData[m][i].a=false;if(markerData[m][i].best){updateMapBounds(m,i);}});}
function createCardContentHtml(c,m){let htmlContent='<div class="cardContentPopup">';if(c.photoCode){htmlContent+='<div class="card-img-top cardListCardTop">'+c.photoCode+'</div>';}
if(c.cardTitle||c.cardDistanceTime||c.cardLink){htmlContent+='<div class="card-body cardListCardBody">';if(c.cardTitle){htmlContent+='<div class="card-title cardListCardTitle">'+c.cardTitle+'</div>';}
if(c.cardDistanceTime){if(m){const parts=c.cardDistanceTime.split('⏱️');htmlContent+='<div class="cardDistanceTime"><div class="w-100" style="margin-bottom: 8px;">'+parts[0].trim()+'</div><div class="w-100">⏱️ '+parts[1].trim()+'</div></div>';}else{htmlContent+='<div class="cardDistanceTime">'+c.cardDistanceTime+'</div>';}}
if(c.cardLink){var linkText=c.cardLinkText||'Read more';htmlContent+='<a class="but-primary-outline mt-3" href="'+c.cardLink+'">'+linkText+'</a>';}
htmlContent+='</div>';}
htmlContent+='</div>';return htmlContent;}
$(document).on('shown.bs.modal','[id^=contentMapModal_]',function(){let modalId=$(this).attr('id');let mapNum=modalId.replace('contentMapModal_','');if(window.contentMaps&&window.contentMaps[mapNum]){window.contentMaps[mapNum].resize();Object.keys(markerData[mapNum]).forEach((i)=>{updateMapBounds(mapNum,i);});}});$(document).on('hidden.bs.modal','[id^=contentMapModal_]',function(){resetMarkersAndCards($(this).attr('id').replace('contentMapModal_',''));});function isMobileDevice(){return window.innerWidth<=768||window.innerHeight<=600;}
function updateMapBounds(mapNum,iconNum){const oldBounds=contentMaps[mapNum].getBounds();const newBounds=contentMaps[mapNum].getBounds();const mapDimensions=contentMaps[mapNum].getContainer().getBoundingClientRect();const clickedMarker=markerData[mapNum][iconNum];const lngDiff=oldBounds.getNorthEast().lng-oldBounds.getSouthWest().lng;const latDiff=oldBounds.getNorthEast().lat-oldBounds.getSouthWest().lat;const lngPerPx=lngDiff / mapDimensions.width;const latPerPx=latDiff / mapDimensions.height;if(clickedMarker['popup']&&clickedMarker.a){const pixelCoordinates=contentMaps[mapNum].project(clickedMarker.lonLat);const tooCloseX=100;const tooCloseT=80;const tooCloseB=10;const eXp=120;const eTp=120;const eBp=20;const extendNWSE=[0,0,0,0];if(pixelCoordinates.x<tooCloseX){extendNWSE[3]=eXp-pixelCoordinates.x;}
else if(pixelCoordinates.x>mapDimensions.width-tooCloseX){extendNWSE[1]=eXp-(mapDimensions.width-pixelCoordinates.x);}
if(pixelCoordinates.y<tooCloseT){extendNWSE[0]=eTp-pixelCoordinates.y;}
else if(pixelCoordinates.y>mapDimensions.height-tooCloseB){extendNWSE[2]=eBp-(mapDimensions.height-pixelCoordinates.y);}
for(let i=0;i<extendNWSE.length;i++){if(extendNWSE[i]>0){switch(i){case 0:const extendNorthLat=extendNWSE[i]*latPerPx;newBounds.extend(new mapboxgl.LngLat(clickedMarker.lonLat[0],oldBounds.getNorthEast().lat+extendNorthLat));break;case 1:const extendEastLng=extendNWSE[i]*lngPerPx;newBounds.extend(new mapboxgl.LngLat(oldBounds.getNorthEast().lng+extendEastLng,clickedMarker.lonLat[1]));break;case 2:const extendSouthLat=extendNWSE[i]*latPerPx;newBounds.extend(new mapboxgl.LngLat(clickedMarker.lonLat[0],oldBounds.getSouthWest().lat-extendSouthLat));break;case 3:const extendWestLng=extendNWSE[i]*lngPerPx;newBounds.extend(new mapboxgl.LngLat(oldBounds.getSouthWest().lng-extendWestLng,clickedMarker.lonLat[1]));break;}}}
if(Math.abs(newBounds.getSouthWest().lng-oldBounds.getSouthWest().lng)>1e-6||Math.abs(newBounds.getSouthWest().lat-oldBounds.getSouthWest().lat)>1e-6||Math.abs(newBounds.getNorthEast().lng-oldBounds.getNorthEast().lng)>1e-6||Math.abs(newBounds.getNorthEast().lat-oldBounds.getNorthEast().lat)>1e-6){contentMaps[mapNum].fitBounds(newBounds,{padding:0,duration:600,easing:(t)=>t*(2-t)});}}
if(clickedMarker['route']&&clickedMarker['routeJson']&&clickedMarker['clicked']){const paddingRoutePixels=20;let extendWest=false,extendEast=false,extendNorth=false,extendSouth=false;clickedMarker['routeJson'].forEach(coord=>{if(coord[0]<newBounds.getWest())extendWest=true;if(coord[0]>newBounds.getEast())extendEast=true;if(coord[1]>newBounds.getNorth())extendNorth=true;if(coord[1]<newBounds.getSouth())extendSouth=true;newBounds.extend(new mapboxgl.LngLat(coord[0],coord[1]));});const C=contentMaps[mapNum].getContainer();const lngDegPerPixel=(newBounds.getEast()-newBounds.getWest())/ C.offsetWidth;const latDegPerPixel=(newBounds.getNorth()-newBounds.getSouth())/ C.offsetHeight;const wB=extendWest?newBounds.getWest()-paddingRoutePixels*lngDegPerPixel:newBounds.getWest();const eB=extendEast?newBounds.getEast()+paddingRoutePixels*lngDegPerPixel:newBounds.getEast();const nB=extendNorth?newBounds.getNorth()+paddingRoutePixels*latDegPerPixel:newBounds.getNorth();const sB=extendSouth?newBounds.getSouth()-paddingRoutePixels*latDegPerPixel:newBounds.getSouth();const paddedBounds=new mapboxgl.LngLatBounds(new mapboxgl.LngLat(wB,sB),new mapboxgl.LngLat(eB,nB));contentMaps[mapNum].fitBounds(paddedBounds,{padding:0,duration:600,easing:(t)=>t*(2-t)});}
if(!isMobileDevice()&&markerData[mapNum][iconNum].card&&markerData[mapNum][iconNum].a){const w=300;const h=360;const p=100;const oX=markerData[mapNum][iconNum].card.oX;const oY=markerData[mapNum][iconNum].card.oY;const markerPixel=contentMaps[mapNum].project(clickedMarker.lonLat);const topLeftPixel={x:markerPixel.x+oX-w/2-p,y:markerPixel.y+oY-h-p};const topRightPixel={x:topLeftPixel.x+w+(2*p),y:topLeftPixel.y};const bottomLeftPixel={x:topLeftPixel.x,y:topLeftPixel.y+h+(2*p)};const bottomRightPixel={x:topRightPixel.x,y:bottomLeftPixel.y};[topLeftPixel,topRightPixel,bottomLeftPixel,bottomRightPixel].forEach(pixel=>{const lngLat=contentMaps[mapNum].unproject(pixel);newBounds.extend(lngLat);});contentMaps[mapNum].fitBounds(newBounds,{padding:0,duration:600,easing:(t)=>t*(2-t)});}}markerData[1][2]={"lonLat":[" -115.34921186296266","51.09698384044114"],"best":"2","time":"225","distance":242.33476497256,"type":"numbered","onClick":true,"route":{"id":"2713","color":"#fa5050"},"card":{"title":"Canmore","distanceTime":"\ud83d\ude97 390 kilometres \u23f1\ufe0f 3 hours, 45 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/bd\/fe\/bdfe4408a54deae8032ce89c5d056588-bb.jpg\" alt=\"Charming townhouses with majestic mountains in the background in autumn\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][3]={"lonLat":[" -115.57049561697357","51.17810227303257"],"best":"3","time":"240","distance":257.86904477849,"type":"numbered","onClick":true,"route":{"id":"2717","color":"#fa5050"},"card":{"title":"Banff National Park","distanceTime":"\ud83d\ude97 415 kilometres \u23f1\ufe0f 4 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/73\/19\/73196cc64229deb77be602c357aa1c4b-bb.jpg\" alt=\"Banff National Park, Canada taken at Moraine Lake under the ice at morning spring time with mountains in the distance.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][4]={"lonLat":[" -114.07191442480026","51.0449081234425"],"best":"4","time":"190","distance":186.4113576712,"type":"numbered","onClick":true,"route":{"id":"2714","color":"#fa5050"},"card":{"title":"Calgary","distanceTime":"\ud83d\ude97 300 kilometres \u23f1\ufe0f 3 hours, 10 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/2e\/7b\/2e7b687c69403c6262e24a248ad8935d-bb.jpg\" alt=\"A colorful sunrise sky over downtown Calgary in the summer\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][5]={"lonLat":[" -123.118130","49.282539"],"best":"5","time":"780","distance":723.89743895649,"type":"numbered","onClick":true,"route":{"id":"692","color":"#fa5050"},"card":{"title":"Vancouver","distanceTime":"\ud83d\ude97 1,165 kilometres \u23f1\ufe0f 13 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/94\/e9\/94e964d827b16943f77ee7eb744d1676-bb.jpg\" alt=\"Vancouver, British Columbia, Canada with a beautiful view of the city in the background and the bridge crossing the water, plus mountains in the distance on a sunny clear day.\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-edmonton-to-vancouver","cardLinkText":"Read more"};markerData[1][6]={"lonLat":[" -113.28452591267502","54.72382711042397"],"best":"6","time":"110","distance":93.2056788356,"type":"numbered","onClick":true,"route":{"id":"2709","color":"#fa5050"},"card":{"title":"Athabasca","distanceTime":"\ud83d\ude97 150 kilometres \u23f1\ufe0f 1 hour, 50 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/fa\/e6\/fae6353153b4b7f852221241dbe8225d-bb.jpg\" alt=\"Athabasca River, Alberta, Canada where the glacial Silt turns the Athabasca River blue on Icefields Parkway, surrounded by trees and snow-capped mountains in the distance against a clear blue sky.\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][7]={"lonLat":[" -116.29751273128124","51.442253667603964"],"best":"7","time":"310","distance":301.36502823511,"type":"numbered","onClick":true,"route":{"id":"2716","color":"#fa5050"},"card":{"title":"Yoho National Park","distanceTime":"\ud83d\ude97 485 kilometres \u23f1\ufe0f 5 hours, 10 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/31\/5c\/315ce77b1c13745064646371f4969441-bb.jpg\" alt=\"Yoho National Park, Canada with a bridge over Emerald Lake, a coniferous forest and mountains in the background on a sunny day.\">","oX":-175,"oY":360},"cardLink":"#","cardLinkText":""};markerData[1][8]={"lonLat":[" -118.19582730049136","50.998045261468135"],"best":"8","time":"420","distance":434.95983456613,"type":"numbered","onClick":true,"route":{"id":"2721","color":"#fa5050"},"card":{"title":"Revelstoke","distanceTime":"\ud83d\ude97 700 kilometres \u23f1\ufe0f 7 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/0b\/67\/0b67c2fe9a9aefbd6d6b3858d56e73c6-bb.jpg\" alt=\"Downhill skiing at Revelstoke ski resort in British Columbia, Canada\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][9]={"lonLat":[" -117.48924826943022","51.46053178316544"],"best":"9","time":"360","distance":375.92957130359,"type":"numbered","onClick":true,"route":{"id":"2720","color":"#fa5050"},"card":{"title":"Glacier National Park of Canada","distanceTime":"\ud83d\ude97 605 kilometres \u23f1\ufe0f 6 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/2c\/55\/2c55063ec26ca4d2acb13a3cae7c60d8-bb.jpg\" alt=\"Glacier National Park, British Columbia, Canada with the amazing Rocky Mountains and view from Abbott Ridge on a cloudy but sunny day.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][10]={"lonLat":[" -119.49632833462461","49.88663496217498"],"best":"10","time":"570","distance":553.02036109123,"type":"numbered","onClick":true,"route":{"id":"2722","color":"#fa5050"},"card":{"title":"Kelowna","distanceTime":"\ud83d\ude97 890 kilometres \u23f1\ufe0f 9 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/c9\/07\/c9072f2bcb1b2276bed12b79489ce03f-bb.jpg\" alt=\"Kelowna, British Columbia, Canada with a vineyard in the foreground overlooking Okanagan Lake and the town in the distance in the fall.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][11]={"lonLat":[" -120.32767600529098","50.67468335773182"],"best":"11","time":"510","distance":503.31066571224,"type":"numbered","onClick":true,"route":{"id":"2723","color":"#fa5050"},"card":{"title":"Kamloops","distanceTime":"\ud83d\ude97 810 kilometres \u23f1\ufe0f 8 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/38\/a4\/38a4a9a94152cc3a221d2925d293436e-bb.jpg\" alt=\"Kamloops, Canada with a scenic Lookout at the town and river and mountains beyond, taken at sunset with a dramatic sky.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][12]={"lonLat":[" -113.39475310438564","53.636158160337445"],"best":"12","time":"370","distance":329.32673188579,"type":"numbered","onClick":true,"route":{"id":"2718","color":"#fa5050"},"card":{"title":"Giants of the Prairies Loop","distanceTime":"\ud83d\ude97 530 kilometres \u23f1\ufe0f 6 hours, 10 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/c2\/29\/c2290613c58c37cc615530c824e48265-bb.jpg\" alt=\"Giant sculpture of a pysanka, a painted egg, on a sunny day\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][13]={"lonLat":[" -113.81507657706194","49.12645934166522"],"best":"13","time":"320","distance":341.75415573053,"type":"numbered","onClick":true,"route":{"id":"2719","color":"#fa5050"},"card":{"title":"Waterton Lakes National Park","distanceTime":"\ud83d\ude97 550 kilometres \u23f1\ufe0f 5 hours, 20 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/9f\/f3\/9ff31cede9f91395b209b7eb6abe68dc-bb.jpg\" alt=\"Red chair look over Waterton Lake Marina Point in autumn foliage season sunny morning. Blue sky with colourful clouds reflect on the lake water surface. \">","oX":175,"oY":360},"cardLink":"#","cardLinkText":""};markerData[1][14]={"lonLat":[" -112.8445127417722","53.572583948911756"],"best":"14","time":"35","distance":31.068559611867,"type":"numbered","onClick":true,"route":{"id":"2707","color":"#fa5050"},"card":{"title":"Elk Island National Park","distanceTime":"\ud83d\ude97 50 kilometres \u23f1\ufe0f 35 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/2c\/b8\/2cb8b19a073ea5191a2c747f3213e43b-bb.jpg\" alt=\"Northern Lights in the sky over the national park at night\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][15]={"lonLat":[" -113.8115863237519","52.26905496184704"],"best":"15","time":"100","distance":96.312534796787,"type":"numbered","onClick":true,"route":{"id":"2710","color":"#fa5050"},"card":{"title":"Red Deer","distanceTime":"\ud83d\ude97 155 kilometres \u23f1\ufe0f 1 hour, 40 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/61\/af\/61afc401969a1e5a599c6fb385ddd683-bb.jpg\" alt=\"Old train bridge over Red Deer River, now part of the bike path. The river can be seen from both sides of the bridge where it connects on both sides of the path to forested downtown area.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][16]={"lonLat":[" -115.7845355361678","54.00163946773287"],"best":"16","time":"130","distance":124.27423844747,"type":"numbered","onClick":true,"route":{"id":"2711","color":"#fa5050"},"card":{"title":"Hard Luck Canyon","distanceTime":"\ud83d\ude97 200 kilometres \u23f1\ufe0f 2 hours, 10 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/9f\/34\/9f349f8a751675943f8ebffebddce897-bb.jpg\" alt=\"Small bird sitting on reeds in Rotary Park next to the river\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][17]={"lonLat":[" -111.49590535164033","50.76350966490861"],"best":"17","time":"290","distance":304.47188419629,"type":"numbered","onClick":true,"route":{"id":"2715","color":"#fa5050"},"card":{"title":"Drumheller and Dinosaur Provincial Park","distanceTime":"\ud83d\ude97 490 kilometres \u23f1\ufe0f 4 hours, 50 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/0f\/78\/0f780b800b3eec28ff7c50e3dd05f462-bb.jpg\" alt=\"&quot;Welcome to Drumheller&quot; sign with dinosaur at the entrance to town on a sunny day\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][18]={"lonLat":[" -113.36522093430118","52.97034367017366"],"best":"18","time":"60","distance":43.495983456613,"type":"numbered","onClick":true,"route":{"id":"2708","color":"#fa5050"},"card":{"title":"Wetaskiwin","distanceTime":"\ud83d\ude97 70 kilometres \u23f1\ufe0f 1 hour","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/fc\/d0\/fcd04573d98aec1866e4379aab58bff5-bb.jpg\" alt=\"Wetaskiwin Historic City Hall Night Shot, Alberta, Canada\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][19]={"lonLat":[" -112.05387639198514","53.494226431527736"],"best":"19","time":"70","distance":62.137119223733,"type":"numbered","onClick":true,"route":{"id":"2728","color":"#fa5050"},"card":{"title":"Vegreville","distanceTime":"\ud83d\ude97 100 kilometres \u23f1\ufe0f 1 hour, 10 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/4f\/d4\/4fd45bed422d5172a011a4251b2df465-bb.jpg\" alt=\"White exterior of a Ukrainian Catholic Church during sunset\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][20]={"lonLat":[" -113.77499790836121","50.34945675390825"],"best":"20","time":"220","distance":236.12105305019,"type":"numbered","onClick":true,"route":{"id":"2727","color":"#fa5050"},"card":{"title":"Nanton","distanceTime":"\ud83d\ude97 380 kilometres \u23f1\ufe0f 3 hours, 40 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/e7\/ef\/e7ef6d8b1afd37ca78df6e4d281545e5-bb.jpg\" alt=\"Exterior of historic buildings in downtown as the sun sets\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};initialMapBounds[1]=new mapboxgl.LngLatBounds(window.bounds[1].getSouthWest(),window.bounds[1].getNorthEast());const visibleMapRoutes_1=[];contentMaps[1].on('click',(e)=>{resetMarkersAndCards(1);});const markerConfig={'finish':{className:'marker_finish',size:[58,58],offset:[0,-29],span:false,best:false,text:false,},'start':{className:'marker_start',size:[58,58],offset:[0,-29],span:false,best:false,text:false,},'star':{className:'marker_star',size:[58,58],offset:[0,-29],span:false,best:false,text:false,},'numbered':{className:'mapMarkerNum',size:false,offset:[0,0],span:true,best:true,text:false,},'star-plain':{className:'mapMarkerNum markerSpanRed',size:false,offset:[0,0],span:true,best:false,text:'☆',},'grey':{className:'mapMarkerNum markerSpanGrey',size:false,offset:[0,0],span:true,best:false,text:false,},};function addMarkersToMap(m,f=null){Object.values(markerData[m]).forEach((i,n)=>{if(f!==null&&n<f){return;}
var el=document.createElement('div');var mC=markerConfig[i.type]||markerConfig.star;el.className=mC.className;if(mC.span){var t='';if(i.best){t=i.best;}
else if(mC.text){t=mC.text;}
el.innerHTML='<span><div id="markerSpan-'+m+'-'+n+'" class="mapMarkerNumInner">'+t+'</div></span>';}
if(mC.width&&mC.height){el.style.width=mC.width+'px';el.style.height=mC.height+'px';}
var marker=new mapboxgl.Marker(el,{offset:mC.offset}).setLngLat(i.lonLat).addTo(window.contentMaps[m]);marker.markerType=i.iconType;if(f!==null){}
i.marker=marker;if(i.best){window.bounds[m].extend(i.lonLat);}
if(i.onClick){marker.getElement().addEventListener('click',function(){event.stopPropagation();toggleMapIconClick(m,n);});}});}
markerData[1][23]={"lonLat":[" -114.37173470256182","62.45413207824722"],"time":"910","distance":900.98822874413,"type":"grey","onClick":true,"route":{"id":"2724","color":"#fa5050"},"card":{"title":"Yellowknife","distanceTime":"\ud83d\ude97 1,450 kilometres \u23f1\ufe0f 15 hours, 10 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/31\/da\/31da301a6fe169c0c4715f2f0d36ceae-bb.jpg\" alt=\"Northern Lights above teepees in Aurora Village \">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][21]={"lonLat":[" -122.332967","47.606173"],"time":"990","distance":969.33905989024,"type":"grey","onClick":true,"route":{"id":"1301","color":"#fa5050"},"card":{"title":"Seattle","distanceTime":"\ud83d\ude97 1,560 kilometres \u23f1\ufe0f 16 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/c0\/bd\/c0bd188e6859aa2b69b1fb7d3e42d56f-bb.jpg\" alt=\"Seattle skyline during sunset with Space Needle in view and mountain in the background\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-edmonton-to-seattle","cardLinkText":"Read more"};markerData[1][22]={"lonLat":[" -149.9184443660236","61.227539179134254"],"time":"2040","distance":1938.6781197805,"type":"grey","onClick":true,"route":{"id":"2725","color":"#fa5050"},"card":{"title":"Alaska","distanceTime":"\ud83d\ude97 3,120 kilometres \u23f1\ufe0f 34 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/c3\/47\/c347b7d9c95a9c6ec11243b13fe6d54f-bb.jpg\" alt=\"Anchorage, Alaska, USA with the city skyline in winter at dusk with the Chugach mountains behind.\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-edmonton-to-alaska","cardLinkText":"Read more"};addMarkersToMap(1);contentMap_1.fitBounds(window.bounds[1],{padding:{top:60,bottom:60,left:60,right:60}});const sortByValue=document.querySelector('.cardListSortDropdown').value;sortMapMarkers(markerData,sortOptionsMap,sortByValue,1);}const sortOptionsMap={'best':'best','distance':'distanceSort',};function sortMapMarkers(markerData,sortOptionsMap,sortBy,listNum){const markersWithDistance=Object.values(markerData[listNum]).filter(marker=>marker.hasOwnProperty('distance')&&marker.hasOwnProperty('best'));const hasDistanceSort=markersWithDistance.some(marker=>marker.hasOwnProperty('distanceSort'));if(!hasDistanceSort){const sortedMarkers=markersWithDistance.sort((a,b)=>a.distance-b.distance);sortedMarkers.forEach((sortedMarker,index)=>{sortedMarker.distanceSort=index+1;});}
Object.keys(markerData[listNum]).forEach(iconNum=>{const marker=markerData[listNum][iconNum];if(marker.hasOwnProperty('distance')&&marker.hasOwnProperty('best')){const markerElement=document.getElementById('markerSpan-'+listNum+'-'+iconNum);if(markerElement){const propertyToUse=sortOptionsMap[sortBy]||sortBy;const v=marker[propertyToUse];if(v!==undefined){markerElement.innerHTML=v;}else{markerElement.innerHTML='';}}}});document.querySelectorAll('.cardListSortDropdown').forEach(function(dropdownUpdate){dropdownUpdate.value=sortBy;});}
(function(){function initializeSortDropdown(){document.querySelectorAll('.cardListSortDropdown').forEach(function(dropdown){dropdown.addEventListener('change',function(){const sortBy=this.value;const listNum=this.getAttribute('data-listnum');const cardsContainer=document.querySelector('.row[data-listnum=\"'+listNum+'\"]');Array.from(cardsContainer.children).sort((a,b)=>{const aValue=parseFloat(a.getAttribute('data-'+sortBy)||Infinity);const bValue=parseFloat(b.getAttribute('data-'+sortBy)||Infinity);return aValue-bValue;}).forEach((card,index)=>{cardsContainer.appendChild(card);const titleElement=card.querySelector('.card-title.cardListCardTitle');if(titleElement){const updatedTitle=(index+1)+titleElement.innerHTML.replace(/^\d+\./,'.');titleElement.innerHTML=updatedTitle;}});sortMapMarkers(markerData,sortOptionsMap,sortBy,listNum);});});}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',initializeSortDropdown);}else{initializeSortDropdown();}})(); var mapScriptCreated = 0;
var mapCssCreated = 0;
var mapScriptLoaded = 0;
var mapCssLoaded = 0;
var mapLoadList = [];
function showLazyMap(fname) {
    if (mapScriptLoaded == 1 && mapCssLoaded == 1) {
        if (!mapLoadList.includes(fname)) {
            window[fname]();
            mapLoadList.push(fname);
        }
    }
}
(function fn() {
    var pics = document.querySelectorAll('.no-js-hide');
    pics.forEach(function(pic) {
        pic.classList.toggle('no-js-hide');
    });
    var lazyImages = [].slice.call(document.querySelectorAll(".lazeeload"));
    if ("IntersectionObserver" in window) {
        const config = {
            root: null,
            rootMargin: '1000px',
            threshold: 0
        };
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    if (lazyImage.dataset.src) {lazyImage.src = lazyImage.dataset.src;}
                    if (lazyImage.dataset.srcset) {lazyImage.srcset = lazyImage.dataset.srcset;}
                    if (lazyImage.dataset.map) {
                        const fname = "initMapbox_"+lazyImage.dataset.map;
                        if (mapScriptLoaded == 0) {
                        
                            let script = document.createElement('script');
                            script.async=true;
                            script.defer=true;
                            script.src = "https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js";
                            script.onload = function(){
                                mapScriptLoaded = 1;
                                showLazyMap(fname);
                            }
                            document.head.appendChild(script);
                            mapScriptCreated = 1;
                            let css = document.createElement('link');
                            css.rel = "stylesheet";
                            css.href = "https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css";
                            css.onload = function(){
                                mapCssLoaded = 1;
                                showLazyMap(fname);
                            }
                            document.head.appendChild(css);
                            mapCssCreated = 1;
                        } else {
                            if (typeof window[fname] === 'function') {
                                window[fname]();
                            }
                            showLazyMap(fname);
                        }                      
                    }
                    lazyImage.classList.remove("no-js-hide");
                    lazyImage.classList.remove("lazeeload");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        }, config);

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
            lazyImage.classList.add("lazeeload-activated");
        });
    } else {
        let active = false; 
        const lazyLoad = function() {
            if (active === false) {
            active = true;

            setTimeout(function() {
                lazyImages.forEach(function(lazyImage) {
                if ((lazyImage.getBoundingClientRect().top <= window.innerHeight+1000 && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                    if (lazyImage.dataset.src) lazyImage.src = lazyImage.dataset.src;
                    if (lazyImage.dataset.srcset) lazyImage.srcset = lazyImage.dataset.srcset;
                    if (lazyImage.dataset.onload) lazyImage.onload = lazyImage.dataset.onload;
                    lazyImage.classList.remove("lazeeload");
                    lazyImages = lazyImages.filter(function(image) {
                        return image !== lazyImage;
                    });
                    if (lazyImages.length === 0) {
                    document.removeEventListener("scroll", lazyLoad);
                    window.removeEventListener("resize", lazyLoad);
                    window.removeEventListener("orientationchange", lazyLoad);
                    }
                }
                });

                active = false;
            }, 200);
            }
        };
        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationchange", lazyLoad);
    } 
    var lazyImages = [].slice.call(document.querySelectorAll(".lazeeload"));
    i=1;
    lazyImages.forEach(function(lazyImage) {
        if (!(lazyImage.classList.contains("lazeeload-activated"))) {
            if (lazyImage.dataset.src) lazyImage.src = lazyImage.dataset.src;
            if (lazyImage.dataset.srcset) lazyImage.srcset = lazyImage.dataset.srcset;
            lazyImage.classList.remove("lazeeload");
        }
    });
})();