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.96153156856461,49.830660976391314],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":[" -114.07253754738072","51.04516353871628"],"type":"star-plain"};markerData[1][1]={"lonLat":["-115.57099939768165","51.178553244921204"],"best":"1","time":"270","distance":173.98393382645,"type":"numbered","onClick":true,"route":{"id":"2532","color":"#fa5050"},"card":{"title":"Banff","distanceTime":"\ud83d\ude97 280 kilometres \u23f1\ufe0f 4 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/80\/d4\/80d4eaf7d4fc2be6d59ca7b03f654e45-bb.jpg\" alt=\"Amazing place to be on earth. Moraine lake, Banff National Park, Alberta, Canada\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-banff","cardLinkText":"Read more"};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":["-118.105356","52.877747"],"best":"2","time":"510","distance":304.47188419629,"type":"numbered","onClick":true,"route":{"id":"1006","color":"#fa5050"},"card":{"title":"Jasper","distanceTime":"\ud83d\ude97 490 kilometres \u23f1\ufe0f 8 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/f6\/1e\/f61e025ce0eae3d98a18ad25604ed267-bb.jpg\" alt=\"Athabasca Glacier, Jasper National Park, Canada taken at Upper Sunwapta Falls with the water originating from the Athabasca Glacier in the distance and trees surrounding the waters edge, mountains in the distance. \">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-jasper","cardLinkText":"Read more"};markerData[1][3]={"lonLat":["-123.11444752981444","49.23611972507206"],"best":"3","time":"870","distance":717.68372703412,"type":"numbered","onClick":true,"route":{"id":"2538","color":"#fa5050"},"card":{"title":"Vancouver","distanceTime":"\ud83d\ude97 1,155 kilometres \u23f1\ufe0f 14 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/ed\/43\/ed43d309fce3f236e8c54a59523550b8-bb.jpg\" alt=\"Vancouver skyline, British Columbia, Canada at sunset with boats in the harbor and mountains in the far distance. \">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-vancouver","cardLinkText":"Read more"};markerData[1][4]={"lonLat":["-116.96368274805161","51.29576533875257"],"best":"4","time":"180","distance":164.66336594289,"type":"numbered","onClick":true,"route":{"id":"2549","color":"#fa5050"},"card":{"title":"Golden","distanceTime":"\ud83d\ude97 265 kilometres \u23f1\ufe0f 3 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/b2\/b5\/b2b5fa4ac07b2c63e404dc935ae0b66c-bb.jpg\" alt=\"Panoramic view of the chalet in Kicking Horse Ski Resort on a sunny winter day\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][5]={"lonLat":["-116.28844122735049","51.4584347172862"],"best":"5","time":"125","distance":118.06052652509,"type":"numbered","onClick":true,"route":{"id":"2546","color":"#fa5050"},"card":{"title":"Yoho National Park","distanceTime":"\ud83d\ude97 190 kilometres \u23f1\ufe0f 2 hours, 5 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/c6\/74\/c6746428040432d615f0665fb224acbb-bb.jpg\" alt=\"Stunning turquoise waters and mountain backdrop reflected in the waters, with red kayaks tied up along the shoreline, Yoho National Park, Canada\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][6]={"lonLat":["-113.49894234189573","53.54645064568506"],"best":"6","time":"190","distance":186.4113576712,"type":"numbered","onClick":true,"route":{"id":"2548","color":"#fa5050"},"card":{"title":"Edmonton","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\/1a\/55\/1a55c9c97ee9e7deff5504f60a34a0bc-bb.jpg\" alt=\"Panoramic view of Edmonton skyline on a sunny day\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][7]={"lonLat":["-113.42916658861502","48.74881769193777"],"best":"7","time":"180","distance":180.19764574883,"type":"numbered","onClick":true,"route":{"id":"2550","color":"#fa5050"},"card":{"title":"Glacier National Park, Montana","distanceTime":"\ud83d\ude97 290 kilometres \u23f1\ufe0f 3 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/9a\/39\/9a395ed0000b5a27c40b02e69f621d86-bb.jpg\" alt=\"Mountain goats surrounded by incredible views over hidden lake and snow-capped hills at Glacier National Park\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][8]={"lonLat":["-110.578488","44.414017"],"best":"8","time":"750","distance":702.14944722819,"type":"numbered","onClick":true,"route":{"id":"1020","color":"#fa5050"},"card":{"title":"Yellowstone National Park","distanceTime":"\ud83d\ude97 1,130 kilometres \u23f1\ufe0f 12 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/b9\/94\/b9942d1a26c12d4225db05c57d0e6304-bb.jpg\" alt=\"Male bison lying in a field of yellow flowers\">","oX":175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-yellowstone-national-park","cardLinkText":"Read more"};markerData[1][9]={"lonLat":[" -117.46251206461145","51.45842216129876"],"best":"9","time":"210","distance":198.83878151595,"type":"numbered","onClick":true,"route":{"id":"2553","color":"#fa5050"},"card":{"title":"Glacier National Park Canada","distanceTime":"\ud83d\ude97 320 kilometres \u23f1\ufe0f 3 hours, 30 minutes","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":["-115.95171586070542","50.98315636600502"],"best":"10","time":"110","distance":105.63310268035,"type":"numbered","onClick":true,"route":{"id":"2551","color":"#fa5050"},"card":{"title":"Kootenay National Park","distanceTime":"\ud83d\ude97 170 kilometres \u23f1\ufe0f 1 hour, 50 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/af\/e1\/afe15fd146feefe8690392dcfa3acf0c-bb.jpg\" alt=\"Kootenay National Park, Canada with green alpine meadows in the foreground and Rockwall Mountain Peak Cliffs in the distance on sunny day.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][11]={"lonLat":[" -115.34760185875022","51.088598004382916"],"best":"11","time":"70","distance":65.24397518492,"type":"numbered","onClick":true,"route":{"id":"2554","color":"#fa5050"},"card":{"title":"Canmore","distanceTime":"\ud83d\ude97 105 kilometres \u23f1\ufe0f 1 hour, 10 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][12]={"lonLat":["-119.48720612750917","49.88599277585243"],"best":"12","time":"440","distance":379.03642726477,"type":"numbered","onClick":true,"route":{"id":"2536","color":"#fa5050"},"card":{"title":"Kelowna","distanceTime":"\ud83d\ude97 610 kilometres \u23f1\ufe0f 7 hours, 20 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/22\/0a\/220a0c4b8b05ce7121b8798e728a381f-bb.jpg\" alt=\"Rows of grapes lead down to the waters of Okanagan Lake near Kelowna, with the Rocky Mountains, blue sky and white clouds in the background.\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-kelowna","cardLinkText":"Read more"};markerData[1][13]={"lonLat":["-120.348869","50.683368"],"best":"13","time":"420","distance":385.25013918715,"type":"numbered","onClick":true,"route":{"id":"2552","color":"#fa5050"},"card":{"title":"Kamloops","distanceTime":"\ud83d\ude97 620 kilometres \u23f1\ufe0f 7 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/51\/b4\/51b42453d4451a67a27aee7ea022a43f-bb.jpg\" alt=\"Kamloops Lake, British Columbia, Canada taken at sunset over Kamloops Lake along the Trans Canada Highway.\">","oX":-175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][14]={"lonLat":["-117.423515","47.657981"],"best":"14","time":"680","distance":559.2340730136,"type":"numbered","onClick":true,"route":{"id":"1188","color":"#fa5050"},"card":{"title":"Spokane","distanceTime":"\ud83d\ude97 900 kilometres \u23f1\ufe0f 11 hours, 20 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/7e\/e8\/7ee8bf2e801b9dce3cd970e45b67e7ad-bb.jpg\" alt=\"Orange sunrise over the river and trees in Spokane\">","oX":175,"oY":360},"cardLink":"\/trip\/road-trip-from-calgary-to-spokane","cardLinkText":"Read more"};markerData[1][15]={"lonLat":[" -113.77493952659827","50.34951875454255"],"best":"15","time":"60","distance":55.92340730136,"type":"numbered","onClick":true,"route":{"id":"2556","color":"#fa5050"},"card":{"title":"Nanton","distanceTime":"\ud83d\ude97 90 kilometres \u23f1\ufe0f 1 hour","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":""};markerData[1][16]={"lonLat":["-111.48961854397527","50.763169884534925"],"best":"16","time":"150","distance":136.70166229221,"type":"numbered","onClick":true,"route":{"id":"2547","color":"#fa5050"},"card":{"title":"Dinosaur Provincial Park","distanceTime":"\ud83d\ude97 220 kilometres \u23f1\ufe0f 2 hours, 30 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/e9\/37\/e937c9a771c8c6b50a1c8926325da0cf-bb.jpg\" alt=\"Dinosaur Provincial Park in Alberta, where rich deposits of fossils and dinosaur bones have been found. The park is now an UNESCO World Heritage Site.\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][17]={"lonLat":["-113.64716706804896","49.708626697708404"],"best":"17","time":"110","distance":114.95367056391,"type":"numbered","onClick":true,"route":{"id":"2545","color":"#fa5050"},"card":{"title":"Head-Smashed-In Buffalo Jump World Heritage Site","distanceTime":"\ud83d\ude97 185 kilometres \u23f1\ufe0f 1 hour, 50 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/8f\/59\/8f59f96d809fac60f3027517c43576b2-bb.jpg\" alt=\"Beautiful aerial view of Canadian Prairie at Head-Smashed-In Buffalo Jump world heritage site in Southern Alberta on a sunny day with blue sky and clouds in summer, Canada\">","oX":175,"oY":0},"cardLink":"#","cardLinkText":""};markerData[1][18]={"lonLat":[" -113.4122658722827","49.72411650163939"],"best":"18","time":"105","distance":105.63310268035,"type":"numbered","onClick":true,"route":{"id":"2557","color":"#fa5050"},"card":{"title":"Fort McLeod","distanceTime":"\ud83d\ude97 170 kilometres \u23f1\ufe0f 1 hour, 45 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/68\/3e\/683edd050d92a96db28f96ad3e2a0edd-bb.jpg\" alt=\"Downtown view of historic buildings in Alberta on a sunny day\">","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":["-122.3307445941404","47.61206697074483"],"time":"1300","distance":963.12534796787,"type":"grey","onClick":true,"route":{"id":"2540","color":"#fa5050"},"card":{"title":"Seattle","distanceTime":"\ud83d\ude97 1,550 kilometres \u23f1\ufe0f 21 hours, 40 minutes","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/4f\/06\/4f06ca5323c4fa7bdc23a3665e82983b-bb.jpg\" alt=\"Seattle skyline with a large mountain in the background \">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-seattle","cardLinkText":"Read more"};markerData[1][19]={"lonLat":[" -118.00953943157745","33.87829988793677"],"time":"1440","distance":1000.4076195021,"type":"grey","onClick":true,"route":{"id":"2544","color":"#fa5050"},"card":{"title":"Los Angeles","distanceTime":"\ud83d\ude97 1,610 kilometres \u23f1\ufe0f 24 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/17\/00\/1700d1d0da7bace0489c9829b0a3e41f-bb.jpg\" alt=\"Los Angeles, California, USA with a view of the Santa Monica Pier during sunset time. \">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-los-angeles-california","cardLinkText":"Read more"};markerData[1][20]={"lonLat":["-115.156625","36.180279"],"time":"1680","distance":1553.4279805933,"type":"grey","onClick":true,"route":{"id":"1028","color":"#fa5050"},"card":{"title":"Las Vegas","distanceTime":"\ud83d\ude97 2,500 kilometres \u23f1\ufe0f 28 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/4f\/33\/4f330c34b39eb839909877be21b946bf-bb.jpg\" alt=\"Las Vegas, Nevada, USA at the Welcome to Las Vegas Sign at dusk.\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-las-vegas","cardLinkText":"Read more"};markerData[1][21]={"lonLat":["-149.899695","61.217573"],"time":"2220","distance":2106.4483416846,"type":"grey","onClick":true,"route":{"id":"1069","color":"#fa5050"},"card":{"title":"Alaska","distanceTime":"\ud83d\ude97 3,390 kilometres \u23f1\ufe0f 37 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/5d\/8a\/5d8a0ded5f32b9cf9fe35bcaf9a29316-bb.jpg\" alt=\"Alaska whale watching boat excursion. Inside passage mountain range landscape luxury travel cruise concept.\">","oX":-175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-alaska","cardLinkText":"Read more"};markerData[1][22]={"lonLat":[" -79.34556967137398","43.666088185163325"],"time":"2160","distance":2131.3031893741,"type":"grey","onClick":true,"route":{"id":"2541","color":"#fa5050"},"card":{"title":"Toronto","distanceTime":"\ud83d\ude97 3,430 kilometres \u23f1\ufe0f 36 hours","photoCode":"<img width=\"640\" height=\"480\" class=\"w-100 cardListCardImg\" src=\"https:\/\/cdn.lazytrips.com\/photos\/80\/d3\/80d33008399a61c958f9f5929291432e-bb.jpg\" alt=\"Downtown Toronto with a tram in focus, a church in the background\">","oX":175,"oY":0},"cardLink":"\/trip\/road-trip-from-calgary-to-toronto","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");
        }
    });
})();