function mapClickSim(m,i){new bootstrap.Modal(document.getElementById('contentMapModal_'+m)).show();function w(){if(window.contentMaps[m]!==undefined&&typeof toggleMapIconClick==="function"&&typeof resetMarkersAndCards==="function"){resetMarkersAndCards(m);setTimeout(()=>{toggleMapIconClick(m,i,true);},500);}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));}function genImgContent(p,m){p=JSON.parse(p);if(Array.isArray(p[0])){let d='carousel'+Math.random().toString(36).substr(2,9);b='';for(let i=0;i`;} let c=``;return c;}else{return genImg(p,m);}} function genImg(p,m){var c=m?'w-100 h-100 object-fit-cover':'img-fluid w-100';var a=p[0];var u=`https://cdn.lazytrips.com/photos/`+a.slice(0,2)+'/'+a.slice(2,4)+'/'+a;var r=``+p[1]+``;return r;} function getNewLngLat(m,o,f){var p=m.project(new mapboxgl.LngLat(o[0],o[1]));p.x+=f.x;p.y+=f.y;return m.unproject(p);} function onMapZoom(m){console.log('fired');if(contentMaps[m]){contentMaps[m].on('zoom',function(){Object.keys(markerData[m]).forEach(function(i){var p=markerData[m][i];if(!mDev()&&p.cardInstance){var o={x:p.c.card.oX,y:p.c.card.oY};var n=getNewLngLat(contentMaps[m],p.lonLat,o);p.cardInstance.setLngLat([n.lng,n.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 j=await r.json();if(j.response&&j.response.route){const d=JSON.parse(j.response.route);markerData[m][i].c.route.json=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,i,e=true){if(markerData[m][i].a){return;} for(const[key,icon]of Object.entries(markerData[m])){if(parseInt(key)===i){continue;} if(icon.popupInstance){icon.popupInstance.remove();delete icon.popupInstance;} if(icon.c?.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 o=icon.cardOverlay;if(o&&o.parentNode){o.parentNode.removeChild(o);delete icon.cardOverlay;}} icon.a=false;} if(!markerData[m][i].a){markerData[m][i].marker.getElement().classList.add('markerSpanSelect');if(markerData[m][i].c?.popup){const t=markerData[m][i].c.popup.title;const p=markerData[m][i].c.popup.text;let popupHTML='
';if(t){popupHTML+='

'+t+'

';} if(p){popupHTML+='

'+p+'

';} popupHTML+='
';var popup=new mapboxgl.Popup({anchor:'bottom',closeButton:false,closeOnClick:false,className:'pointer'}).setLngLat(markerData[m][i].lonLat).setHTML(popupHTML).addTo(contentMaps[m]);markerData[m][i].popupInstance=popup;popup._content.addEventListener('click',function(){toggleMapIconClick(m,i);});markerData[m][i].marker.getElement().style.display='none';} if(markerData[m][i].c?.route){const layerId='iconRoute_'+m+'_'+i;if(contentMaps[m].getLayer(layerId)){contentMaps[m].setLayoutProperty(layerId,'visibility','visible');}else{fetchRoute(markerData[m][i].c.route.id,m,i,markerData[m][i].c.route.color);}} if(markerData[m][i].c?.card){var cardContent={n:markerData[m][i].c.card.title,d:markerData[m][i].c.card.d,t:markerData[m][i].c.card.t,p:markerData[m][i].c.card.p,};if(markerData[m][i].c.card.hasOwnProperty('link')){cardContent.l=markerData[m][i].c.card.link;} if(markerData[m][i].c.card.hasOwnProperty('linkText')){cardContent.s=markerData[m][i].c.card.linkText;} if(!mDev()){var cardContentHtml=createCardContentHtml(cardContent,false);var offsets={x:markerData[m][i].c.card.oX,y:markerData[m][i].c.card.oY};var newLngLat=getNewLngLat(contentMaps[m],markerData[m][i]['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][i].cardInstance=cardPopup;setTimeout(()=>{if(markerData[m][i].cardInstance&&markerData[m][i].cardInstance.isOpen()){markerData[m][i].c.card.height=markerData[m][i].cardInstance.getElement().offsetHeight;}},10);}else{var cardMobile=document.createElement('div');cardMobile.className='mapPopupCardMobile';cardMobile.innerHTML=createCardContentHtml(cardContent,true);var mapContainer=contentMaps[m].getContainer();mapContainer.appendChild(cardMobile);markerData[m][i].cardOverlay=cardMobile;}} markerData[m][i].a=true;if(e){updateMapBounds(m,i);}}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].c&&markerData[m][i].c.route){if(contentMaps[m].getLayer('iconRoute_'+m+'_'+i)){hideRouteLayer(m,i);}} if(markerData[m][i].c&&markerData[m][i].c.card){if(markerData[m][i].cardInstance){markerData[m][i].cardInstance.remove();delete markerData[m][i].cardInstance;}} if(markerData[m][i].cardOverlay){var o=markerData[m][i].cardOverlay;if(o&&o.parentNode){o.parentNode.removeChild(o);delete markerData[m][i].cardOverlay;}} markerData[m][i].marker.getElement().style.display='block';markerData[m][i].a=false;});} function formatTime(t){const h=Math.floor(t / 60);const m=t%60;return`⏱️ ${h > 0 ? h + " hour" + (h > 1 ? "s" : "") : ""}${h > 0 && m > 0 ? ", " : ""}${m > 0 ? m + " minute" + (m > 1 ? "s" : "") : ""}`;} function createCardContentHtml(c,m){cC='';if(m){cC=' d-flex flex-row';} let h='
';if(c.p){p=genImgContent(c.p,m);h+='
'+p+'
';} if(c.n||c.d||c.t||c.l){h+='
';if(c.n){h+='
'+c.n+'
';} if(c.d){h+='
';} if(c.d){h+='
🚗 '+c.d+'
';} if(c.t){h+='
'+formatTime(c.t)+'
';} if(!m){h+='
';} if(c.l){var z=c.s||'Read more';p='';if(m){p=' pt-2';} h+='';}} if(m){h+='
';} h+='
';return h;} document.addEventListener('shown.bs.modal',function(e){if(e.target.id.startsWith('contentMapModal_')){let m=e.target.id.replace('contentMapModal_','');let t=window.contentMaps[m];if(t){setTimeout(()=>{e.target.style.borderBottom='1px solid #eee';setTimeout(()=>{e.target.style.borderBottom='';},1);},1);}}});window.addEventListener('resize',function(){document.querySelectorAll('[id^="contentMapModal_"]').forEach(p=>{if(p.classList.contains('show')){let m=p.id.replace('contentMapModal_','');let t=window.contentMaps[m];if(t){setTimeout(()=>{t.style.borderBottom='1px solid #eee';setTimeout(()=>{t.style.borderBottom='';},1);},1);}}});});function mDev(){return window.innerWidth<=768||window.innerHeight<=600;} async function updateMapBounds(m,n){const map=contentMaps[m];const oldBounds=contentMaps[m].getBounds();var T=contentMaps[m].getBounds();const D=contentMaps[m].getContainer().getBoundingClientRect();const x=markerData[m][n];const lngDiff=oldBounds.getNorthEast().lng-oldBounds.getSouthWest().lng;const latDiff=oldBounds.getNorthEast().lat-oldBounds.getSouthWest().lat;const lngPerPx=lngDiff / D.width;const latPerPx=latDiff / D.height;const U=[];var B=new mapboxgl.LngLatBounds(T.toArray());var R=new mapboxgl.LngLatBounds(T.toArray());if(!mDev()&&markerData[m][n].c.card&&markerData[m][n].a){const cP=new Promise(async(resolve)=>{const h=await new Promise(resolveHeight=>{const hInt=setInterval(()=>{let chk=markerData[m][n].c.card.height;if(chk){clearInterval(hInt);resolveHeight(chk);}},100);});const w=300;var p=15;const z=contentMaps[m].getZoom();var a=0;if(z<7){a=(8-z)*10;} const oX=markerData[m][n].c.card.oX;const oY=markerData[m][n].c.card.oY;const P=map.project(new mapboxgl.LngLat(x.lonLat[0],x.lonLat[1]));const tG=P.y+oY-h if(tG{const jR=await new Promise(resolve=>{const intervalId=setInterval(()=>{if(x.c.route.json&&Array.isArray(x.c.route.json)&&x.c.route.json.length>0){clearInterval(intervalId);resolve(true);}},100);});if(jR){const paddingRoutePixels=20;let extendWest=false,extendEast=false,extendNorth=false,extendSouth=false;x.c.route.json.forEach(coord=>{if(coord[0]R.getEast())extendEast=true;if(coord[1]>R.getNorth())extendNorth=true;if(coord[1]status)){T.extend(B.getSouthWest());T.extend(B.getNorthEast());T.extend(R.getSouthWest());T.extend(R.getNorthEast());map.fitBounds(T,{padding:0,duration:600,easing:(t)=>t*(2-t)});}}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'+t+'';} 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;window.bounds[m].extend(i.lonLat);if(i.c){marker.getElement().addEventListener('click',function(){event.stopPropagation();toggleMapIconClick(m,n,true);});}});}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:[-109.00894482456067,37.95455599071917],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":[-104.9847935,39.7392148],"type":"star-plain"};markerData[1][1]={"lonLat":[-105.5487281176055,37.69348985672689],"best":1,"time":230,"distance":239,"type":"numbered","c":{"route":{"id":1447,"color":"#fa5050"},"card":{"title":"Great Sand Dunes National Park","d":"239 miles","t":230,"p":"[\"0d6a8820acfd90b72169c69f81cc178e\",\"Great Sand Dunes National Park, Colorado, USA with sand dunes in the foreground and mountains in the distance on a clear day.\"]","oX":175,"oY":0}}};markerData[1][2]={"lonLat":[-104.82161026846842,38.833922935394824],"best":2,"time":85,"distance":70,"type":"numbered","c":{"route":{"id":974,"color":"#fa5050"},"card":{"title":"Colorado Springs","d":"70 miles","t":85,"p":"[\"4e3c0c899b9f2bd21757ce6c63580f74\",\"Garden of the Gods, Colorado Springs, at dusk with the rugged mountains in the background\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-colorado-springs","linkText":"Read more"}}};markerData[1][3]={"lonLat":[-105.937999,35.687427],"best":3,"time":390,"distance":360,"type":"numbered","c":{"route":{"id":489,"color":"#fa5050"},"card":{"title":"Santa Fe","d":"360 miles","t":390,"p":"[\"0c705efb7d8dbecbea9b05c858807e6f\",\"An image of Santa Fe, New Mexico during dusk with street lights on, buildings on both sides of the road, and the mountain in the background still visible.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-santa fe","linkText":"Read more"}}};markerData[1][4]={"lonLat":[-110.57845848035281,44.4144305359788],"best":4,"time":510,"distance":509,"type":"numbered","c":{"route":{"id":1455,"color":"#fa5050"},"card":{"title":"Yellowstone National Park","d":"509 miles","t":510,"p":"[\"e64f28e53e49801cbec13b6a38db0749\",\"Madison River near the West Entrance to Yellowstone National Park\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-yellowstone-national-park","linkText":"Read more"}}};markerData[1][5]={"lonLat":[-111.7616242,34.86821635],"best":5,"time":660,"distance":740,"type":"numbered","c":{"route":{"id":1459,"color":"#fa5050"},"card":{"title":"Sedona","d":"740 miles","t":660,"p":"[\"9caf1a2974b3202ce8a840bcaf790d97\",\"Travel in Devil's Bridge Trail, scenic view panoramic landscape, Sedona, Arizona, USA\"]","oX":175,"oY":0}}};markerData[1][6]={"lonLat":[-107.812287,37.937499],"best":6,"time":390,"distance":370,"type":"numbered","c":{"route":{"id":2005,"color":"#fa5050"},"card":{"title":"Telluride","d":"370 miles","t":390,"p":"[\"f7d23e47ba6f5a1be690bba8bf24f493\",\"A street view in Telluride, Colorado where snow is on the road and some buildings are on the both sides of the road. The San Juan mountain can be seen on the background.t.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-telluride","linkText":"Read more"}}};markerData[1][7]={"lonLat":[-106.04618127865453,39.4807509646244],"best":7,"time":90,"distance":80,"type":"numbered","c":{"route":{"id":2122,"color":"#fa5050"},"card":{"title":"Breckenridge","d":"80 miles","t":90,"p":"[\"4939e2695f6f0bf834ff9005e9d6bf4a\",\"Scenic views around Breckenridge Colorado ski resort town with skiers travelling on ski lift\"]","oX":175,"oY":0,"link":"\/blog\/is-the-drive-from-denver-to-breckenridge-scary","linkText":"Read more"}}};markerData[1][8]={"lonLat":[-105.52166904800757,40.37705458085897],"best":8,"time":85,"distance":66,"type":"numbered","c":{"route":{"id":2121,"color":"#fa5050"},"card":{"title":"Estes Park","d":"66 miles","t":85,"p":"[\"e48471777e9b873e2f7aebf2f4c62e89\",\"Estes Park sign etched onto large rock, surrounded by mountains and blue skies\"]","oX":175,"oY":0}}};markerData[1][9]={"lonLat":[-108.41193045629208,37.33948906564254],"best":9,"time":490,"distance":415,"type":"numbered","c":{"route":{"id":424,"color":"#fa5050"},"card":{"title":"Mesa Verde National Park","d":"415 miles","t":490,"p":"[\"1ea7235eea64b7e115c767bf6fc0684e\",\"Cliff Palace Indian Ruins, Mesa Verde National Park, Colorado. This spectacular ruin is the largest in all of North America, comprising over 150 rooms. It was built by the Anasazi around 1200 AD.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-mesa-verde-national-park","linkText":"Read more"}}};markerData[1][10]={"lonLat":[-102.2394237,43.87419088],"best":10,"time":435,"distance":430,"type":"numbered","c":{"route":{"id":829,"color":"#fa5050"},"card":{"title":"Badlands National Park","d":"430 miles","t":435,"p":"[\"794b0c5624f6c1998b68febc0c61ec09\",\"Panoramic shot showing the jagged, gray eroded peaks of Badlands National Park at sunset, with a purple-pink hued sky\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-badlands-national-park","linkText":"Read more"}}};markerData[1][11]={"lonLat":[-112.138166,36.055133],"best":11,"time":720,"distance":692,"type":"numbered","c":{"route":{"id":530,"color":"#fa5050"},"card":{"title":"Grand Canyon","d":"692 miles","t":720,"p":"[\"936f5eb4f8e668a95f766b5f38e7d6ad\",\"View down into the Grand Canyon at sunset.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-grand-canyon","linkText":"Read more"}}};markerData[1][12]={"lonLat":[-115.139218,36.171528],"best":12,"time":720,"distance":810,"type":"numbered","c":{"route":{"id":1846,"color":"#fa5050"},"card":{"title":"Las Vegas","d":"810 miles","t":720,"p":"[\"4672fa7a1a616d033b241f40caa14ec9\",\"Las Vegas Strip with hotels and casinos lit up and the Bellagio Fountain at night\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-las-vegas","linkText":"Read more"}}};markerData[1][13]={"lonLat":[-113.22825591036946,37.455190970288065],"best":13,"time":660,"distance":740,"type":"numbered","c":{"route":{"id":1193,"color":"#fa5050"},"card":{"title":"Zion and Bryce Canyon National Parks","d":"740 miles","t":660,"p":"[\"4199ef944f875a07f435c981786bc2ed\",\"Wide view of the Zion National Park and its canyon on a sunny day\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-zion-national-park","linkText":"Read more"}}};markerData[1][14]={"lonLat":[-103.17193941505303,29.668328521268112],"best":14,"time":780,"distance":824,"type":"numbered","c":{"route":{"id":1461,"color":"#fa5050"},"card":{"title":"Big Bend National Park","d":"824 miles","t":780,"p":"[\"8f82f4a8f01d4050bd7b958ec755ba1f\",\"Bricked tunnel underneath mountains along a stretch of road at Big Bend National Park\"]","oX":175,"oY":0,"link":"\/blog\/can-you-drive-through-big-bend-national-park","linkText":"Read more"}}};markerData[1][15]={"lonLat":[-105.20946930800875,39.73788985889627],"best":15,"time":24,"distance":15,"type":"numbered","c":{"route":{"id":2118,"color":"#fa5050"},"card":{"title":"Golden","d":"15 miles","t":24,"p":"[\"1c6c5b90edd6c7a8c317d618d1d66b98\",\"Panorama of Downtown Golden Colorado from drone\"]","oX":175,"oY":0}}};markerData[1][16]={"lonLat":[-106.81844266438988,39.189734123134535],"best":16,"time":240,"distance":185,"type":"numbered","c":{"route":{"id":444,"color":"#fa5050"},"card":{"title":"Aspen","d":"185 miles","t":240,"p":"[\"7f5a7fd92458a72038bcb53e96a3acc9\",\"Panorama showing landscape with brilliant fall colors along road to Capitol Peak near Aspen Colorado on sunny autumn afternoon\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-aspen","linkText":"Read more"}}};markerData[1][17]={"lonLat":[-107.8794062588175,37.27521488591682],"best":17,"time":410,"distance":375,"type":"numbered","c":{"route":{"id":485,"color":"#fa5050"},"card":{"title":"Durango","d":"375 miles","t":410,"p":"[\"40d69134f010b4ec496f50b341ba5812\",\"The winding Animas River running through Durango with trees on either bank and mountains in the distance. Water babbling over rocks.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-durango","linkText":"Read more"}}};markerData[1][18]={"lonLat":[-112.07391679070129,33.448520620494186],"best":18,"time":780,"distance":820,"type":"numbered","c":{"route":{"id":615,"color":"#fa5050"},"card":{"title":"Phoenix","d":"820 miles","t":780,"p":"[\"fc2079b55063ca64a544a92b62c11237\",\"Daytime view of downtown Phoenix, Arizona\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-phoenix","linkText":"Read more"}}};markerData[1][19]={"lonLat":[-109.54026988415616,38.583824503159526],"best":19,"time":560,"distance":480,"type":"numbered","c":{"route":{"id":2124,"color":"#fa5050"},"card":{"title":"Moab","d":"480 miles","t":560,"p":"[\"3589157e1b76ad7f261779d05e2fa6d1\",\"Canyonlands National Park, Utah, USA with moody clouds above colorful golden lit needles in Elephant Canyon in the Needles District. \"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-moab","linkText":"Read more"}}};markerData[1][20]={"lonLat":[-111.891771,40.771463],"best":20,"time":480,"distance":525,"type":"numbered","c":{"route":{"id":192,"color":"#fa5050"},"card":{"title":"Salt Lake City","d":"525 miles","t":480,"p":"[\"13f17e2450c8b9fc18885b3e4e49531b\",\"Wasatch Mountains in the fall as you approach Salt Lake City on the road trip from Denver.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-salt-lake-city","linkText":"Read more"}}};markerData[1][21]={"lonLat":[-106.65042,35.084434],"best":21,"time":550,"distance":520,"type":"numbered","c":{"route":{"id":1675,"color":"#fa5050"},"card":{"title":"Albuquerque","d":"520 miles","t":550,"p":"[\"fa59448b2b96e70251da2908ba1642fd\",\"Hot air balloons in the sky with no cloud in sight\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-albuquerque","linkText":"Read more"}}};markerData[1][22]={"lonLat":[-106.17274921680867,32.77798003958056],"best":22,"time":520,"distance":564,"type":"numbered","c":{"route":{"id":1456,"color":"#fa5050"},"card":{"title":"White Sands National Monument","d":"564 miles","t":520,"p":"[\"f0eea85e9962f0de81bd767953459558\",\"Alkali Flat Trail in White Sands National Monument, New Mexico, USA against a blue sky.\"]","oX":175,"oY":0}}};markerData[1][23]={"lonLat":[-109.71555144117461,38.17138363097998],"best":23,"time":450,"distance":438,"type":"numbered","c":{"route":{"id":1452,"color":"#fa5050"},"card":{"title":"Canyonlands and Arches National Parks and Moab","d":"438 miles","t":450,"p":"[\"1bb382b95f122bdb29eb0915ede06515\",\"Panoramic view of Upheaval Dome Crater, Canyonlands National Park, with red and yellow jagged rock beneath a blue sky\"]","oX":175,"oY":0,"link":"\/blog\/can-you-drive-through-canyonlands-national-park","linkText":"Read more"}}};markerData[1][24]={"lonLat":[-103.46254,43.892441],"best":24,"time":600,"distance":580,"type":"numbered","c":{"route":{"id":536,"color":"#fa5050"},"card":{"title":"Mount Rushmore in the Black Hills","d":"580 miles","t":600,"p":"[\"262a7b3a2b2585feeca02fde16f598b2\",\"Shows the faces of past US presidents carved on granite as a massive sculpture on Mount Rushmore during a sunny day\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-mount-rushmore","linkText":"Read more"}}};markerData[1][25]={"lonLat":[-105.69669373539566,39.70616125722248],"best":25,"time":50,"distance":45,"type":"numbered","c":{"route":{"id":2119,"color":"#fa5050"},"card":{"title":"Georgetown","d":"45 miles","t":50,"p":"[\"a41cd34c19e7e341c76bad124b6de7f9\",\"Perfectly still water on Gem Lake with reflection of blue sky, clouds, mountains, and trees, Estes Park, Colorado\"]","oX":175,"oY":0}}};markerData[1][26]={"lonLat":[-105.57342147349291,36.40722857079222],"best":26,"time":360,"distance":330,"type":"numbered","c":{"route":{"id":952,"color":"#fa5050"},"card":{"title":"Taos","d":"330 miles","t":360,"p":"[\"20ac4e7584df581ed736bd20247e9408\",\"Ancient dwellings of Taos, with a hill in the background on a sunny day with a few clouds\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-taos","linkText":"Read more"}}};markerData[1][27]={"lonLat":[-110.20623288105406,36.99238901322441],"best":27,"time":780,"distance":630,"type":"numbered","c":{"route":{"id":1454,"color":"#fa5050"},"card":{"title":"Monument Valley, Arizona","d":"630 miles","t":780,"p":"[\"2279309ace54c2ab25b9f7fcd81530f2\",\"Empty scenic highway in Monument Valley, Arizona, USA\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-monument-valley","linkText":"Read more"}}};markerData[1][28]={"lonLat":[-106.8320435900594,40.4853460732183],"best":28,"time":180,"distance":156,"type":"numbered","c":{"route":{"id":1444,"color":"#fa5050"},"card":{"title":"Steamboat Springs","d":"156 miles","t":180,"p":"[\"3053bab170791ba13924ea161297e86c\",\"Dog sledding from the point of perspective of the rider, through snow\"]","oX":175,"oY":0}}};markerData[1][29]={"lonLat":[-106.37733457162288,39.6432286276183],"best":29,"time":95,"distance":98,"type":"numbered","c":{"route":{"id":2123,"color":"#fa5050"},"card":{"title":"Vail","d":"98 miles","t":95,"p":"[\"12feea747491710a341f33b34d4ab468\",\"People walking on busy streets next to skating rink. Stores, mountains in the background at Vail, Colorado\"]","oX":175,"oY":0,"link":"\/blog\/is-the-drive-from-denver-to-vail-scary","linkText":"Read more"}}};markerData[1][30]={"lonLat":[-110.73187572704163,43.5911375653235],"best":30,"time":740,"distance":700,"type":"numbered","c":{"route":{"id":2126,"color":"#fa5050"},"card":{"title":"Jackson Hole","d":"700 miles","t":740,"p":"[\"1588cf48d2a7a8f51da811c176aa98c9\",\"Grand Teton National Park, Wyoming. Reflection of mountains on Jackson Lake near Yellowstone.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-jackson-hole","linkText":"Read more"}}};initialMapBounds[1]=new mapboxgl.LngLatBounds(window.bounds[1].getSouthWest(),window.bounds[1].getNorthEast());const visibleMapRoutes_1=[];contentMaps[1].on('click',(e)=>{resetMarkersAndCards(1);});onMapZoom(1);markerData[1][36]={"lonLat":[-118.243905,34.052556],"time":1070,"distance":1140,"type":"grey","c":{"route":{"id":551,"color":"#fa5050"},"card":{"title":"Los Angeles","d":"1,140 miles","t":1070,"p":"[\"970a9ebeae39bc0aae7384b35ae6bd30\",\"A beautiful view of the skyline with the light from the sunrise reflecting the buildings of Los Angeles\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-los-angeles","linkText":"Read more"}}};markerData[1][31]={"lonLat":[-117.17205451294721,32.73320444423728],"time":1260,"distance":1250,"type":"grey","c":{"route":{"id":641,"color":"#fa5050"},"card":{"title":"San Diego","d":"1,250 miles","t":1260,"p":"[\"437c73e71f5127afd80a4e31db3b1e96\",\"Tall buildings reflecting in blue water with setting sun and silhouetted palm trees\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-san-diego","linkText":"Read more"}}};markerData[1][32]={"lonLat":[-122.3896551282696,37.79164324599789],"time":1290,"distance":1394,"type":"grey","c":{"route":{"id":777,"color":"#fa5050"},"card":{"title":"San Francisco","d":"1,394 miles","t":1290,"p":"[\"c7273a3788b1e5494b839299482c5b45\",\"San Francisco, California, USA with a view of the Golden Gate Bridge at sunset.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-san-francisco","linkText":"Read more"}}};markerData[1][33]={"lonLat":[-87.66044204994066,41.86065122102946],"time":1240,"distance":1310,"type":"grey","c":{"route":{"id":639,"color":"#fa5050"},"card":{"title":"Chicago","d":"1,310 miles","t":1240,"p":"[\"7614ed0fe277f9fd611278094d706637\",\"Panoramic view of high rise buildings of Denver skyline with green trees in the foreground and rocky mountains in the background\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-chicago","linkText":"Read more"}}};markerData[1][34]={"lonLat":[-122.33212470857237,47.60628409265447],"time":1170,"distance":1300,"type":"grey","c":{"route":{"id":605,"color":"#fa5050"},"card":{"title":"Seattle","d":"1,300 miles","t":1170,"p":"[\"ef68c21a8a7f16a367199f75b2b87bcb\",\"The futuristic Space Needle dominates the Seattle skyline on a cloudy day\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-seattle","linkText":"Read more"}}};markerData[1][35]={"lonLat":[-113.7713045,48.7479171],"time":1065,"distance":1055,"type":"grey","c":{"route":{"id":1025,"color":"#fa5050"},"card":{"title":"Glacier National Park","d":"1,055 miles","t":1065,"p":"[\"0485d167756211ba09e832d50ee33874\",\"Rare and unique panoramic view from the Belly River Region of Glacier National Park, with snowy mountain range and lakes\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-denver-to-glacier-national-park","linkText":"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(n=>{const marker=markerData[listNum][n];if(marker.hasOwnProperty('distance')&&marker.hasOwnProperty('best')){const markerElement=document.getElementById('markerSpan-'+listNum+'-'+n);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 iSort(){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');if(titleElement){const updatedTitle=titleElement.innerHTML.replace(/^\s*\d+/,index+1);titleElement.innerHTML=updatedTitle;}});sortMapMarkers(markerData,sortOptionsMap,sortBy,listNum);});});} if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',iSort);}else{iSort();}})(); 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"); } }); })(); document.addEventListener('DOMContentLoaded', () => { const h = document.querySelector('header.fixed-top'), o = getComputedStyle(h).right; ['show.bs.modal', 'hidden.bs.modal'].forEach(e => document.querySelectorAll('.fullScreenModal').forEach(m => m.addEventListener(e, ev => h.style.right = ev.type === 'show.bs.modal' ? `${window.innerWidth - document.documentElement.clientWidth}px` : o))); });