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:[-90.20191994932527,38.65149174114563],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":[-90.683368,38.697118],"type":"star-plain"};markerData[1][1]={"lonLat":[-90.026843,35.156195],"best":1,"time":350,"distance":330,"type":"numbered","c":{"route":{"id":1604,"color":"#fa5050"},"card":{"title":"St Louis to Memphis","d":"330 miles","t":350,"p":"[\"0b391e93f7a8d61d770638f7ddf37211\",\"Beale Street in Memphis, TN at twilight with bright neon lights illuminated\"]","oX":175,"oY":0}}};markerData[1][2]={"lonLat":[-85.765251,38.253432],"best":2,"time":290,"distance":290,"type":"numbered","c":{"route":{"id":1602,"color":"#fa5050"},"card":{"title":"St Louis to Louisville","d":"290 miles","t":290,"p":"[\"31bb7c2bbc4aa6803050cc9f94d6f123\",\"Louisville, KY skyline at sunset, with lights reflecting on the water below\"]","oX":175,"oY":0}}};markerData[1][3]={"lonLat":[-84.501465,39.107895],"best":3,"time":330,"distance":360,"type":"numbered","c":{"route":{"id":1608,"color":"#fa5050"},"card":{"title":"St Louis to Cincinnati","d":"360 miles","t":330,"p":"[\"954bbf9d26cd013a8fceaeff25a75448\",\"Cincinnati, Ohio skyline over the river at dusk with the bridge lit up\"]","oX":175,"oY":0}}};markerData[1][4]={"lonLat":[-97.518962,35.561794],"best":4,"time":660,"distance":620,"type":"numbered","c":{"route":{"id":1616,"color":"#fa5050"},"card":{"title":"St Louis to Oklahoma City","d":"620 miles","t":660,"p":"[\"e66db1f9742868e8e7d0207fcb91283b\",\"Alley Mill, a red wooden historic building on the Ozark National Scenic Riverways\"]","oX":175,"oY":0}}};markerData[1][5]={"lonLat":[-94.564992,39.095933],"best":5,"time":270,"distance":270,"type":"numbered","c":{"route":{"id":1600,"color":"#fa5050"},"card":{"title":"St Louis to Kansas City","d":"270 miles","t":270,"p":"[\"6db93848cc705837fc7666b827c76e89\",\"Kansas City Scout Memorial with a view of Kansas City, Missouri skyline at dawn \"]","oX":175,"oY":0}}};markerData[1][6]={"lonLat":[-85.13278,41.085917],"best":6,"time":350,"distance":370,"type":"numbered","c":{"route":{"id":1611,"color":"#fa5050"},"card":{"title":"St Louis to Fort Wayne","d":"370 miles","t":350,"p":"[\"267ac7a6914b37e72be4b7cc31d4650b\",\"Downtown historic buildings in Fort Wayne, Indiana\"]","oX":175,"oY":0}}};markerData[1][7]={"lonLat":[-90.07054487459754,29.953095688724737],"best":7,"time":870,"distance":865,"type":"numbered","c":{"route":{"id":2506,"color":"#fa5050"},"card":{"title":"St Louis to New Orleans","d":"865 miles","t":870,"p":"[\"edb6d878f392cf76a99d23d13d5f1a31\",\"Brass jazz band plays in front of Jackson Square in the New Orleans French Quarter\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-new-orleans","linkText":"Read more"}}};markerData[1][8]={"lonLat":[-89.647282,39.78952],"best":8,"time":90,"distance":100,"type":"numbered","c":{"route":{"id":1596,"color":"#fa5050"},"card":{"title":"St Louis to Springfield","d":"100 miles","t":90,"p":"[\"c928506d02d67f2a35438cd3ce8470db\",\"Aerial view of the Illinois State Capitol building in Springfield on a clear day\"]","oX":175,"oY":0}}};markerData[1][9]={"lonLat":[-90.988706,37.461726],"best":9,"time":140,"distance":120,"type":"numbered","c":{"route":{"id":1598,"color":"#fa5050"},"card":{"title":"St Louis to Mark Twain National Forest","d":"120 miles","t":140,"p":"[\"a0fc5480ff09f37b84ade7d699ccc8b1\",\"Johnson\\u2019s Shut Ins State Park Forest beside the water\"]","oX":175,"oY":0}}};markerData[1][10]={"lonLat":[-93.284181,45.050768],"best":10,"time":620,"distance":590,"type":"numbered","c":{"route":{"id":1615,"color":"#fa5050"},"card":{"title":"St Louis to Minneapolis","d":"590 miles","t":620,"p":"[\"689f0964776170fe46c392529ed00548\",\"Mississippi river along Highway 35 or the Great River Road\"]","oX":175,"oY":0}}};markerData[1][11]={"lonLat":[-86.779534,36.166978],"best":11,"time":350,"distance":330,"type":"numbered","c":{"route":{"id":1605,"color":"#fa5050"},"card":{"title":"St Louis to Nashville","d":"330 miles","t":350,"p":"[\"e06340d533dbc60b89b7f1344537fdee\",\"Nashville skyline at night, with a boat passing by on the river in the foreground\"]","oX":175,"oY":0}}};markerData[1][12]={"lonLat":[-92.322306,34.877132],"best":12,"time":330,"distance":350,"type":"numbered","c":{"route":{"id":1606,"color":"#fa5050"},"card":{"title":"St Louis to Little Rock","d":"350 miles","t":330,"p":"[\"41cd21a047bf8f62a4f85e973040e9a8\",\"State Capitol at Little Rock, AR, with pink blossoms in the foreground\"]","oX":175,"oY":0}}};markerData[1][13]={"lonLat":[-95.934236,41.387803],"best":13,"time":500,"distance":480,"type":"numbered","c":{"route":{"id":1614,"color":"#fa5050"},"card":{"title":"St Louis to Omaha","d":"480 miles","t":500,"p":"[\"426cead5b998625e6f08e91641df9d00\",\"Bengal Tiger at Henry Doorly Zoo, Omaha\"]","oX":175,"oY":0}}};markerData[1][14]={"lonLat":[-93.21259437860522,36.64590930526426],"best":14,"time":315,"distance":310,"type":"numbered","c":{"route":{"id":2594,"color":"#fa5050"},"card":{"title":"St Louis to Branson","d":"310 miles","t":315,"p":"[\"04e419d2a0dbc3df8bb4405f9679b77b\",\"Chapel of the Ozarks in Branson, Missouri at Sunset with Table Rock Lake in the background.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-branson-missouri","linkText":"Read more"}}};markerData[1][15]={"lonLat":[-91.009925,38.55944],"best":15,"time":60,"distance":50,"type":"numbered","c":{"route":{"id":1595,"color":"#fa5050"},"card":{"title":"St Louis to Washington, MO and Wine Country","d":"50 miles","t":60,"p":"[\"436db052c1cb416634911a71e9ce2b06\",\"Vineyard in Augusta, MO. Rows of vines growing in a field \"]","oX":175,"oY":0}}};markerData[1][16]={"lonLat":[-104.9847935,39.7392148],"best":16,"time":810,"distance":905,"type":"numbered","c":{"route":{"id":851,"color":"#fa5050"},"card":{"title":"St Louis to Denver","d":"905 miles","t":810,"p":"[\"6b4280340489160e05b4110e9d28fafa\",\"Denver, Colorado, USA with a panorama of Denver skyline long exposure at twilight.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-denver","linkText":"Read more"}}};markerData[1][17]={"lonLat":[-86.168249,39.793213],"best":17,"time":230,"distance":240,"type":"numbered","c":{"route":{"id":1599,"color":"#fa5050"},"card":{"title":"St Louis to Indianapolis","d":"240 miles","t":230,"p":"[\"8a3896e685388b60696fc625c92796f6\",\"Indianapolis city skyline at sunset with a purple hued sky behind and Soliders' and Sailors' Monument below\"]","oX":175,"oY":0}}};markerData[1][18]={"lonLat":[-94.84686,39.771322],"best":18,"time":310,"distance":320,"type":"numbered","c":{"route":{"id":1603,"color":"#fa5050"},"card":{"title":"St Louis to Highway 36 Scenic Drive","d":"320 miles","t":310,"p":"[\"65c6eec60881a4565a7c7f62badc7ad7\",\"Street view of historic Hannibal, MO on a sunny day \"]","oX":175,"oY":0}}};markerData[1][19]={"lonLat":[-91.43799453318486,38.70662257874738],"best":19,"time":100,"distance":80,"type":"numbered","c":{"route":{"id":2604,"color":"#fa5050"},"card":{"title":"St Louis to Hermann","d":"80 miles","t":100,"p":"[\"df8686f4bd01988bdd2b48f1294973e5\",\"Downtown Hermann business during Christmastime.\"]","oX":175,"oY":0}}};markerData[1][20]={"lonLat":[-90.683368,38.697118],"best":20,"time":40,"distance":30,"type":"numbered","c":{"route":{"id":1594,"color":"#fa5050"},"card":{"title":"St Louis to Katy Trail State Park","d":"30 miles","t":40,"p":"[\"3fcb31a1218b2d148b91783f6ca2e8ae\",\"Old converted railway bridge at Katy Trail State Park, MO\"]","oX":175,"oY":0}}};markerData[1][21]={"lonLat":[-91.703481,37.851499],"best":21,"time":120,"distance":110,"type":"numbered","c":{"route":{"id":1597,"color":"#fa5050"},"card":{"title":"St Louis to The Fugitive Beach","d":"110 miles","t":120,"p":"[\"9a8675e4e0a591f8792d2556f4e2586f\",\"Vintage sign advertising Totem Pole Trading Post in Rolla, MO\"]","oX":175,"oY":0}}};markerData[1][22]={"lonLat":[-89.400018,43.094346],"best":22,"time":330,"distance":360,"type":"numbered","c":{"route":{"id":1607,"color":"#fa5050"},"card":{"title":"St Louis to Madison","d":"360 miles","t":330,"p":"[\"9a5a85832a65d24b2edd984624b554f0\",\"State Street historic downtown in Madison, WI\"]","oX":175,"oY":0}}};markerData[1][23]={"lonLat":[-87.912012,43.042759],"best":23,"time":350,"distance":370,"type":"numbered","c":{"route":{"id":1610,"color":"#fa5050"},"card":{"title":"St Louis to Milwaukee via Chicago","d":"370 miles","t":350,"p":"[\"eb7dfd049fb32ef4210e63f1afc1d6fa\",\"Downtown Milwaukee by the Milwaukee River on a clear sunny day\"]","oX":175,"oY":0}}};markerData[1][24]={"lonLat":[-94.002525,41.325233],"best":24,"time":360,"distance":360,"type":"numbered","c":{"route":{"id":1609,"color":"#fa5050"},"card":{"title":"St Louis to Madison County","d":"360 miles","t":360,"p":"[\"129bafbaa7d4dadcd93e2c9776411a08\",\"Historic Cutler Donahoe Covered Bridge, Winterset in Madison County, Iowa\"]","oX":175,"oY":0}}};markerData[1][25]={"lonLat":[-97.347113,37.668339],"best":25,"time":470,"distance":450,"type":"numbered","c":{"route":{"id":1613,"color":"#fa5050"},"card":{"title":"St Louis to Wichita","d":"450 miles","t":470,"p":"[\"fb296f6a2e41141836a7cb57aaa43139\",\"Meeting of the Arkansas and Little Arkansas River beneath the Keeper of the Plains near downtown Wichita at dawn\"]","oX":175,"oY":0}}};markerData[1][26]={"lonLat":[-90.90753299894922,39.374198057011725],"best":26,"time":90,"distance":80,"type":"numbered","c":{"route":{"id":2606,"color":"#fa5050"},"card":{"title":"St Louis to Clarksville","d":"80 miles","t":90,"p":"[\"e8bc3710e8f43ced883cee36e0b001d1\",\"Scenic view of Calumet Creek near Clarksville, Missouri with surrounding landscape reflected in its waters\"]","oX":175,"oY":0}}};markerData[1][27]={"lonLat":[-86.081973,42.767634],"best":27,"time":410,"distance":430,"type":"numbered","c":{"route":{"id":1612,"color":"#fa5050"},"card":{"title":"St Louis to Holland, MI","d":"430 miles","t":410,"p":"[\"175f54bf99affb8f0b4d178438c2ccc1\",\"Colorful buildings in Holland, MI with yellow tulips in the foreground\"]","oX":175,"oY":0}}};markerData[1][28]={"lonLat":[-90.578015,41.524479],"best":28,"time":290,"distance":280,"type":"numbered","c":{"route":{"id":1601,"color":"#fa5050"},"card":{"title":"St Louis to Quad Cities Region","d":"280 miles","t":290,"p":"[\"cc21c5f93267d0bdfe49a4286f2c609c\",\"Aerial View of Davenport, Iowa, Quad Cities\"]","oX":175,"oY":0}}};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][32]={"lonLat":[-115.08172742814496,36.183324914693635],"time":1500,"distance":1730,"type":"grey","c":{"route":{"id":853,"color":"#fa5050"},"card":{"title":"St Louis to Las Vegas","d":"1,730 miles","t":1500,"p":"[\"01eb22d2707a2d4fd7b6c3f12765946a\",\"Night view of the strip with the buildings lit-up\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-las-vegas","linkText":"Read more"}}};markerData[1][29]={"lonLat":[-118.25146337630352,34.054656799108464],"time":1860,"distance":1980,"type":"grey","c":{"card":{"title":"St Louis to Los Angeles","d":"1,980 miles","t":1860,"p":"[\"eea6d7abde10cb88785a071c344e5fa5\",\"Downtown Los Angeles, California, USA skyline during rush hour at sunset.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-los-angeles","linkText":"Read more"}}};markerData[1][30]={"lonLat":[-110.58802230301174,44.42816162379195],"time":1405,"distance":1460,"type":"grey","c":{"card":{"title":"St Louis to Yellowstone National Park","d":"1,460 miles","t":1405,"p":"[\"bac3ed868a595eafb70c7cf89002c2ec\",\"Steaming water with foreground lit up pink and blue in sunrise light. Hills behind.\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-yellowstone-national-park","linkText":"Read more"}}};markerData[1][31]={"lonLat":[-90.07054487459754,29.953095688724737],"time":1140,"distance":1230,"type":"grey","c":{"route":{"id":2593,"color":"#fa5050"},"card":{"title":"St Louis to New Orleans","d":"1,230 miles","t":1140,"p":"[\"edb6d878f392cf76a99d23d13d5f1a31\",\"Brass jazz band plays in front of Jackson Square in the New Orleans French Quarter\"]","oX":175,"oY":0,"link":"\/trip\/road-trip-from-st-louis-to-new-orleans","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))); });