{"id":2,"date":"2020-04-16T13:50:13","date_gmt":"2020-04-16T13:50:13","guid":{"rendered":"https:\/\/startersites.io\/blocksy\/travel\/?page_id=2"},"modified":"2025-10-07T16:19:19","modified_gmt":"2025-10-07T16:19:19","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/mytriplinks.com\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5928bf e-flex e-con-boxed e-con e-parent\" data-id=\"b5928bf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7205152 e-con-full e-flex e-con e-child\" data-id=\"7205152\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01a47f1 elementor-widget elementor-widget-html\" data-id=\"01a47f1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \ud83c\udf0d Map + Top Filters (unchanged) + FlightConnections-style Right Panel -->\r\n<link href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" rel=\"stylesheet\"\/>\r\n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n\r\n<style>\r\n  :root{\r\n    --chip-bg:#fff; --chip-br:#e6e6e8; --chip-t:#111; --chip-muted:#6b7280;\r\n    --chip-shadow:0 1px 2px rgba(0,0,0,.06); --bar-bg:#fff; --bar-br:#e5e7eb;\r\n  }\r\n  .tp-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}\r\n  \/* Top chip bar (UNCHANGED) *\/\r\n  .chipbar{\r\n    display:flex; gap:8px; flex-wrap:wrap; overflow:auto; padding:10px;\r\n    background:var(--bar-bg); border:1px solid var(--bar-br); border-radius:12px;\r\n    margin-bottom:10px;\r\n  }\r\n  .chip{\r\n    position:relative; display:flex; align-items:center; gap:8px; height:36px;\r\n    padding:6px 10px; border:1px solid var(--chip-br); border-radius:12px;\r\n    background:var(--chip-bg); color:var(--chip-t); box-shadow:var(--chip-shadow); white-space:nowrap;\r\n  }\r\n  .chip .title{font-size:12px; color:var(--chip-muted)}\r\n  .chip .value{font-size:13px; font-weight:600}\r\n  .chip .caret{margin-left:4px; font-size:12px; color:var(--chip-muted)}\r\n  .chip select{position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; appearance:none; border:none; background:transparent;}\r\n  .btn{height:36px; padding:6px 12px; border-radius:12px; border:1px solid var(--chip-br); background:#f9fafb; box-shadow:var(--chip-shadow); cursor:pointer}\r\n  .btn-primary{background:#f3f4f6} .btn-danger{background:#fef2f2; border-color:#fecaca; color:#b91c1c}\r\n  .switch{display:flex;align-items:center;gap:6px}\r\n  .switch input{width:38px;height:22px;border-radius:22px;appearance:none;background:#e5e7eb;position:relative;outline:none;cursor:pointer}\r\n  .switch input:checked{background:#111827}\r\n  .switch input:before{content:\"\"; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .18s}\r\n  .switch input:checked:before{left:19px}\r\n  details#originPicker{margin:8px 0}\r\n  details#originPicker>summary{cursor:pointer; padding:6px 10px; border-radius:10px; border:1px solid var(--chip-br); display:inline-block}\r\n\r\n  \/* Layout: map left, panel right *\/\r\n  .fc-layout{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:12px;}\r\n  #map{height:calc(100vh - 260px); min-height:520px; border-radius:12px}\r\n  \/* Right panel *\/\r\n  #fc-panel{background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);overflow:hidden}\r\n  .fc-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #f0f1f3}\r\n  .fc-airport{font-weight:700}\r\n  .fc-sub{color:#6b7280;font-size:12px}\r\n  .fc-body{padding:12px;max-height:calc(100vh - 300px);overflow:auto}\r\n  .fc-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}\r\n  .fc-badges span{font-size:12px;padding:2px 8px;border:1px solid #e5e7eb;border-radius:999px;background:#f3f4f6}\r\n  .fc-search{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:10px;margin:6px 0 12px}\r\n  .fc-route{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;padding:8px 10px;border:1px solid #eef0f3;border-radius:10px;cursor:pointer}\r\n  .fc-route:hover{background:#f9fafb}\r\n  .fc-d1{font-weight:700}\r\n  .fc-d2{font-size:12px;color:#6b7280}\r\n  .fc-tags{display:flex;gap:6px}\r\n  .fc-tag{font-size:11px;border:1px solid #e5e7eb;border-radius:999px;padding:2px 6px;background:#fff}\r\n  \/* Hide Leaflet popups \u2014 we use side panel only *\/\r\n  .leaflet-popup, .leaflet-popup-pane { display:none !important; }\r\n\r\n  \/* Mobile: panel as drawer *\/\r\n  @media (max-width:1024px){\r\n    .fc-layout{grid-template-columns:1fr}\r\n    #fc-panel{position:fixed;right:10px;top:90px;width:340px;max-height:75vh;display:none;z-index:1000}\r\n    #fc-panel.open{display:block}\r\n    #fc-toggle{position:fixed;right:10px;top:90px;z-index:1100}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"tp-wrap\">\r\n  <!-- \u2705 YOUR TOP FILTER BAR (UNCHANGED) -->\r\n  <div class=\"chipbar\" role=\"toolbar\" aria-label=\"Filters\">\r\n    <button id=\"btnLocate\" class=\"btn btn-primary\">\ud83d\udccd Use my location<\/button>\r\n    <button id=\"btnToggleOrigin\" class=\"btn\">Change start<\/button>\r\n\r\n    <div class=\"chip\" style=\"pointer-events:none\">\r\n      <div class=\"title\">Origin<\/div>\r\n      <div class=\"value\" id=\"originLabel\">Detecting\u2026<\/div>\r\n    <\/div>\r\n\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">Trip type<\/div><div class=\"value\">Select<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"tripType\">\r\n        <option value=\"\">Trip Type<\/option>\r\n        <option value=\"national\">National<\/option>\r\n        <option value=\"international\">International<\/option>\r\n      <\/select>\r\n    <\/label>\r\n\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">Country<\/div><div class=\"value\" id=\"destCountryValue\">All<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"destCountry\"><\/select>\r\n    <\/label>\r\n\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">State<\/div><div class=\"value\" id=\"destStateValue\">All<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"destState\"><option value=\"\">State<\/option><\/select>\r\n    <\/label>\r\n\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">City<\/div><div class=\"value\" id=\"destCityValue\">All<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"destCity\"><option value=\"\">City<\/option><\/select>\r\n    <\/label>\r\n\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">Duration<\/div><div class=\"value\" id=\"durationValue\">All<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"duration\">\r\n        <option value=\"\">Duration<\/option>\r\n        <option value=\"short\">1\u20132 days<\/option>\r\n        <option value=\"medium\">3\u20135 days<\/option>\r\n        <option value=\"long\">6+ days<\/option>\r\n      <\/select>\r\n    <\/label>\r\n\r\n    <button id=\"resetBtn\" class=\"btn btn-danger\">Reset \u21ba<\/button>\r\n    <label class=\"switch\"><span class=\"fc-sub\">Full Map<\/span><input id=\"fullMap\" type=\"checkbox\"\/><\/label>\r\n    <button id=\"fc-toggle\" class=\"btn\" style=\"display:none\">\u2630 Details<\/button>\r\n  <\/div>\r\n\r\n  <!-- Layout: Map + Right Panel -->\r\n  <div class=\"fc-layout\">\r\n    <div id=\"map\"><\/div>\r\n    <aside id=\"fc-panel\" aria-label=\"Routes & Trip Details\">\r\n      <div class=\"fc-head\">\r\n        <div>\r\n          <div class=\"fc-airport\" id=\"fc-title\">Start Location<\/div>\r\n          <div class=\"fc-sub\" id=\"fc-subtitle\">\u2014<\/div>\r\n        <\/div>\r\n        <div class=\"fc-sub\"><span id=\"fc-count\">0<\/span> routes<\/div>\r\n      <\/div>\r\n      <div class=\"fc-body\">\r\n        <div class=\"fc-badges\">\r\n          <span id=\"fc-duration\">Duration: \u2014<\/span>\r\n          <span id=\"fc-distance\">Distance: \u2014<\/span>\r\n        <\/div>\r\n        <input id=\"fc-search\" class=\"fc-search\" placeholder=\"Search destination, code\u2026\">\r\n        <div id=\"fc-routes\"><\/div>\r\n        <hr>\r\n        <h4 style=\"margin:8px 0\">Suggested Plan<\/h4>\r\n        <ul id=\"fc-plan\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n        <div id=\"fc-notes\" class=\"fc-sub\">Pick a destination to see details.<\/div>\r\n      <\/div>\r\n    <\/aside>\r\n  <\/div>\r\n\r\n  <!-- Manual origin picker (same as before) -->\r\n  <details id=\"originPicker\" style=\"display:none\">\r\n    <summary>Pick a different start location<\/summary>\r\n    <div class=\"chipbar\" style=\"margin-top:8px\">\r\n      <label class=\"chip\"><div><div class=\"title\">Country<\/div><div class=\"value\">Select<span class=\"caret\">\u25be<\/span><\/div><\/div><select id=\"oCountry\"><\/select><\/label>\r\n      <label class=\"chip\"><div><div class=\"title\">State<\/div><div class=\"value\">Select<span class=\"caret\">\u25be<\/span><\/div><\/div><select id=\"oState\"><option value=\"\">State<\/option><\/select><\/label>\r\n      <label class=\"chip\"><div><div class=\"title\">City<\/div><div class=\"value\">Select<span class=\"caret\">\u25be<\/span><\/div><\/div><select id=\"oCity\"><option value=\"\">City<\/option><\/select><\/label>\r\n      <button id=\"applyOrigin\" class=\"btn btn-primary\">Set as start<\/button>\r\n    <\/div>\r\n  <\/details>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---- DB (same style as before) ---- *\/\r\nconst DB = {\r\n  india:{label:\"India\",states:{\r\n    rajasthan:{label:\"Rajasthan\",cities:{jaipur:{label:\"Jaipur\",lat:26.9124,lon:75.7873,info:\"\ud83c\udff0 Pink City\"},udaipur:{label:\"Udaipur\",lat:24.5854,lon:73.7125,info:\"\ud83d\udca6 Lakes\"}}},\r\n    goa:{label:\"Goa\",cities:{panaji:{label:\"Panaji\",lat:15.4909,lon:73.8278,info:\"\ud83c\udfd6\ufe0f Beaches\"}}},\r\n    maharashtra:{label:\"Maharashtra\",cities:{mumbai:{label:\"Mumbai\",lat:19.076,lon:72.8777,info:\"\ud83c\udfac Bollywood\"}}}\r\n  }},\r\n  usa:{label:\"United States\",states:{\r\n    california:{label:\"California\",cities:{losangeles:{label:\"Los Angeles\",lat:34.0522,lon:-118.2437,info:\"\ud83c\udfa5 Hollywood\"},sanfrancisco:{label:\"San Francisco\",lat:37.7749,lon:-122.4194,info:\"\ud83c\udf09 Golden Gate\"}}},\r\n    newyork:{label:\"New York\",cities:{nyc:{label:\"New York City\",lat:40.7128,lon:-74.006,info:\"\ud83d\uddfd Times Square\"}}}\r\n  }}\r\n};\r\n\r\n\/* ---- Helpers ---- *\/\r\nconst $=id=>document.getElementById(id);\r\nfunction fillCountries(sel){ sel.innerHTML = '<option value=\"\">Country<\/option>' + Object.entries(DB).map(([k,v])=>`<option value=\"${k}\">${v.label}<\/option>`).join(''); }\r\nfunction fillStates(c,sel){ sel.innerHTML='<option value=\"\">State<\/option>'; if(!c) return; Object.entries(DB[c].states).forEach(([k,v])=> sel.insertAdjacentHTML('beforeend', `<option value=\"${k}\">${v.label}<\/option>`)); }\r\nfunction fillCities(c,s,sel){ sel.innerHTML='<option value=\"\">City<\/option>'; if(!c||!s) return; Object.entries(DB[c].states[s].cities).forEach(([k,v])=> sel.insertAdjacentHTML('beforeend', `<option value=\"${k}\">${v.label}<\/option>`)); }\r\nfunction cityObj(c,s,ct){ return DB?.[c]?.states?.[s]?.cities?.[ct] || null; }\r\nfunction prettyCity(c,s,ct){ return `${DB[c].states[s].cities[ct].label}, ${DB[c].states[s].label}, ${DB[c].label}`; }\r\nconst km=(a,b)=>{ const R=6371,toRad=x=>x*Math.PI\/180; const dLat=toRad(b.lat-a.lat), dLng=toRad(b.lng-a.lng);\r\n  const s=Math.sin(dLat\/2)**2 + Math.cos(toRad(a.lat))*Math.cos(toRad(b.lat))*Math.sin(dLng\/2)**2; return 2*R*Math.asin(Math.sqrt(s));\r\n};\r\nfunction labelDuration(d){ return d==='short'?'1\u20132 days':d==='medium'?'3\u20135 days':d==='long'?'6+ days':'\u2014'; }\r\nfunction planHTML(d){\r\n  if(d==='short') return `<li>Highlights & heritage walk<\/li><li>Signature food tour<\/li>`;\r\n  if(d==='medium') return `<li>Landmarks + museum<\/li><li>Nearby day trip<\/li><li>Evening market<\/li>`;\r\n  if(d==='long') return `<li>Full city circuit<\/li><li>2 day-trips<\/li><li>Relax + shopping<\/li>`;\r\n  return `<li>Select a duration to see a tailored plan.<\/li>`;\r\n}\r\n\r\n\/* ---- Map ---- *\/\r\nconst map = L.map('map',{worldCopyJump:true}).setView([20.6,78.9],5);\r\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{attribution:'\u00a9 OpenStreetMap'}).addTo(map);\r\nlet originMarker, destMarker, routeLine;\r\n\r\n\/* ---- Right panel renderers ---- *\/\r\nfunction setPanelHeader(title, subtitle, count=0){\r\n  $('fc-title').textContent = title || 'Trip';\r\n  $('fc-subtitle').textContent = subtitle || '\u2014';\r\n  $('fc-count').textContent = count;\r\n}\r\nfunction setPanelBadges({duration='\u2014', distance='\u2014'}={}){\r\n  $('fc-duration').textContent = `Duration: ${duration}`;\r\n  $('fc-distance').textContent = `Distance: ${distance}`;\r\n}\r\nfunction setPanelRoutes(routes=[]){\r\n  const box=$('fc-routes'); box.innerHTML='';\r\n  routes.forEach(r=>{\r\n    const el=document.createElement('div'); el.className='fc-route';\r\n    el.innerHTML=`<div><div class=\"fc-d1\">${r.city} <span class=\"fc-d2\">(${r.code})<\/span><\/div>\r\n                  <div class=\"fc-d2\">${r.km} km<\/div><\/div>\r\n                  <div class=\"fc-tags\">${(r.tags||[]).map(t=>`<span class=\"fc-tag\">${t}<\/span>`).join('')}<\/div>`;\r\n    el.addEventListener('click',()=>{ drawRouteTo(r.lat,r.lng); });\r\n    box.appendChild(el);\r\n  });\r\n}\r\nfunction setPanelPlan(d){ $('fc-plan').innerHTML = planHTML(d); }\r\nfunction setPanelNotes(text){ $('fc-notes').textContent = text || ''; }\r\n\r\n\/* ---- Origin & route drawing ---- *\/\r\nfunction drawRouteTo(lat,lng){\r\n  if(!originMarker) return;\r\n  if(routeLine) map.removeLayer(routeLine);\r\n  routeLine = L.polyline([originMarker.getLatLng(), L.latLng(lat,lng)], {weight:4, opacity:.9}).addTo(map);\r\n  map.fitBounds(routeLine.getBounds(), {padding:[30,30]});\r\n}\r\n\r\n\/* ---- UI state ---- *\/\r\nconst tripType=$('tripType'), destCountry=$('destCountry'), destState=$('destState'), destCity=$('destCity');\r\nconst oCountry=$('oCountry'), oState=$('oState'), oCity=$('oCity');\r\n\r\nfillCountries(destCountry); fillCountries(oCountry);\r\n$('destCountryValue').textContent='All \u25be';\r\n\r\n\/* Manual origin picker *\/\r\noCountry?.addEventListener('change',e=>{ fillStates(e.target.value,oState); oCity.innerHTML='<option>City<\/option>'; });\r\noState?.addEventListener('change',e=>{ fillCities(oCountry.value,e.target.value,oCity); });\r\n\r\n\/* Origin helpers *\/\r\nlet currentOrigin = { lat:20.6, lng:78.9, label:'India (default)', country:'india' };\r\nfunction guessOriginCountry(lat,lng){ if(lng>60&&lng<100&&lat>6&&lat<36) return 'india'; return 'usa'; }\r\n\r\nfunction setOriginLatLng(lat,lng,label='My Location'){\r\n  if(originMarker) map.removeLayer(originMarker);\r\n  originMarker = L.marker([lat,lng]).addTo(map); \/\/ no popup\r\n  $('originLabel').textContent = label;\r\n  map.setView([lat,lng],6);\r\n\r\n  \/\/ Update panel\r\n  setPanelHeader('Start Location', label, 0);\r\n  setPanelBadges({duration:labelDuration($('duration').value), distance:'\u2014'});\r\n  setPanelRoutes([]);\r\n  setPanelPlan($('duration').value);\r\n  setPanelNotes('This is your selected starting point.');\r\n}\r\n\r\nfunction setOriginFromCoords(lat,lng){\r\n  const cc=guessOriginCountry(lat,lng);\r\n  currentOrigin = {lat,lng,label:`${lat.toFixed(3)}, ${lng.toFixed(3)}`, country:cc};\r\n  setOriginLatLng(lat,lng,currentOrigin.label);\r\n  if(tripType.value==='national'){\r\n    destCountry.innerHTML = `<option value=\"${cc}\">${DB[cc].label}<\/option>`;\r\n    destCountry.disabled=true; $('destCountryValue').textContent=DB[cc].label+' \u25be';\r\n    fillStates(cc,destState);\r\n  }\r\n}\r\n\r\n\/* Trip Type logic (same) *\/\r\ntripType.addEventListener('change', ()=>{\r\n  if(tripType.value==='national' && currentOrigin.country){\r\n    destCountry.innerHTML = `<option value=\"${currentOrigin.country}\">${DB[currentOrigin.country].label}<\/option>`;\r\n    destCountry.disabled=true; $('destCountryValue').textContent=DB[currentOrigin.country].label+' \u25be'; fillStates(currentOrigin.country, destState);\r\n  }else{\r\n    destCountry.disabled=false; fillCountries(destCountry);\r\n    $('destCountryValue').textContent='All \u25be'; destState.innerHTML='<option value=\"\">State<\/option>'; destCity.innerHTML='<option value=\"\">City<\/option>';\r\n    $('destStateValue').textContent='All \u25be'; $('destCityValue').textContent='All \u25be';\r\n  }\r\n});\r\n\r\n\/* Country\/State\/City changes *\/\r\ndestCountry.addEventListener('change', e=>{\r\n  fillStates(e.target.value, destState); destCity.innerHTML='<option value=\"\">City<\/option>';\r\n  $('destCountryValue').textContent=(e.target.options[e.target.selectedIndex]?.text||'All')+' \u25be';\r\n  $('destStateValue').textContent='All \u25be'; $('destCityValue').textContent='All \u25be';\r\n});\r\ndestState.addEventListener('change', e=>{\r\n  fillCities(destCountry.value, e.target.value, destCity);\r\n  $('destStateValue').textContent=(e.target.options[e.target.selectedIndex]?.text||'All')+' \u25be';\r\n  $('destCityValue').textContent='All \u25be';\r\n});\r\ndestCity.addEventListener('change', ()=>{\r\n  const c=destCountry.value,s=destState.value,ct=destCity.value; const obj=cityObj(c,s,ct); if(!obj) return;\r\n\r\n  if(destMarker) map.removeLayer(destMarker);\r\n  destMarker = L.marker([obj.lat,obj.lon]).addTo(map); \/\/ no popup\r\n  drawRouteTo(obj.lat,obj.lon);\r\n\r\n  \/\/ Build routes list (simple one-destination example; extend with your DB)\r\n  const dist = originMarker ? Math.round(km(originMarker.getLatLng(), {lat:obj.lat,lng:obj.lon})) : '\u2014';\r\n  const routes = [{ city: DB[c].states[s].cities[ct].label, code: ct.toUpperCase(), km: dist, lat: obj.lat, lng: obj.lon, tags: ['direct'] }];\r\n\r\n  setPanelHeader(DB[c].states[s].cities[ct].label, prettyCity(c,s,ct), routes.length);\r\n  setPanelBadges({duration:labelDuration($('duration').value), distance: `${dist} km`});\r\n  setPanelRoutes(routes);\r\n  setPanelPlan($('duration').value);\r\n  setPanelNotes(obj.info || '');\r\n  $('destCityValue').textContent=(destCity.options[destCity.selectedIndex]?.text||'All')+' \u25be';\r\n});\r\n\r\n\/* Duration updates *\/\r\n$('duration').addEventListener('change', ()=>{\r\n  $('durationValue').textContent=( $('duration').selectedOptions[0]?.text || 'All')+' \u25be';\r\n  setPanelBadges({duration:labelDuration($('duration').value), distance: $('fc-distance').textContent.replace('Distance: ','')});\r\n  setPanelPlan($('duration').value);\r\n});\r\n\r\n\/* Reset *\/\r\n$('resetBtn').addEventListener('click', ()=>{\r\n  if(routeLine) map.removeLayer(routeLine); if(destMarker) map.removeLayer(destMarker);\r\n  destMarker=null; destCountry.disabled=false; fillCountries(destCountry);\r\n  destState.innerHTML='<option value=\"\">State<\/option>'; destCity.innerHTML='<option value=\"\">City<\/option>';\r\n  $('destCountryValue').textContent='All \u25be'; $('destStateValue').textContent='All \u25be'; $('destCityValue').textContent='All \u25be';\r\n  $('duration').value=''; $('durationValue').textContent='All \u25be';\r\n  setPanelHeader('Start Location', $('originLabel').textContent, 0);\r\n  setPanelBadges({duration:'\u2014', distance:'\u2014'}); setPanelRoutes([]); $('fc-plan').innerHTML=''; setPanelNotes('Pick a destination to see details.');\r\n});\r\n\r\n\/* Full map toggle: hide panel on mobile\/desktop *\/\r\n$('fullMap').addEventListener('change', (e)=>{\r\n  if (window.matchMedia('(max-width:1024px)').matches) {\r\n    document.getElementById('fc-panel').classList.toggle('open', !e.target.checked);\r\n  } else {\r\n    document.getElementById('fc-panel').style.display = e.target.checked ? 'none' : 'block';\r\n  }\r\n});\r\n\r\n\/* Geolocation + manual origin *\/\r\nfunction requestGeo(){\r\n  if(!('geolocation' in navigator)){ alert('Geolocation not available'); return; }\r\n  navigator.geolocation.getCurrentPosition(\r\n    pos=> setOriginFromCoords(pos.coords.latitude, pos.coords.longitude),\r\n    _=> { alert('Location blocked. Use \"Change start\".'); $('originPicker').style.display='block'; },\r\n    {enableHighAccuracy:true, timeout:8000, maximumAge:0}\r\n  );\r\n}\r\n$('btnLocate').addEventListener('click', requestGeo);\r\n$('btnToggleOrigin').addEventListener('click', ()=>{ const el=$('originPicker'); el.style.display = (el.style.display==='none'||!el.style.display)?'block':'none'; });\r\n\r\nfillCountries($('oCountry'));\r\n$('oCountry')?.addEventListener('change',e=>{ fillStates(e.target.value,$('oState')); $('oCity').innerHTML='<option value=\"\">City<\/option>'; });\r\n$('oState')?.addEventListener('change',e=>{ fillCities($('oCountry').value,e.target.value,$('oCity')); });\r\n$('applyOrigin')?.addEventListener('click', ()=>{\r\n  const c=$('oCountry').value,s=$('oState').value,ct=$('oCity').value; if(!c||!s||!ct) return alert('Select full origin');\r\n  const obj=cityObj(c,s,ct);\r\n  currentOrigin = {lat:obj.lat,lng:obj.lon,label:prettyCity(c,s,ct),country:c};\r\n  setOriginLatLng(obj.lat,obj.lon,currentOrigin.label);\r\n  if(tripType.value==='national'){\r\n    destCountry.innerHTML = `<option value=\"${c}\">${DB[c].label}<\/option>`;\r\n    destCountry.disabled=true; $('destCountryValue').textContent=DB[c].label+' \u25be'; fillStates(c,destState);\r\n  }\r\n  $('originPicker').style.display='none';\r\n});\r\n\r\n\/* Mobile drawer toggle *\/\r\nconst panel = $('fc-panel'), toggle = $('fc-toggle');\r\nif (window.matchMedia('(max-width:1024px)').matches){\r\n  toggle.style.display='inline-block';\r\n  toggle.onclick=()=> panel.classList.toggle('open');\r\n}\r\n\r\n\/* Init: ask for location *\/\r\nrequestGeo();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udccd Use my location Change start Origin Detecting\u2026 Trip typeSelect\u25be Trip TypeNationalInternational CountryAll\u25be StateAll\u25be State CityAll\u25be City DurationAll\u25be Duration1\u20132 days3\u20135 days6+ days Reset \u21ba Full Map \u2630 Details Start Location \u2014 0 routes Duration: \u2014 Distance: \u2014 Suggested Plan Pick a destination to see details. Pick a different start location CountrySelect\u25be StateSelect\u25beState CitySelect\u25beCity Set as [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":14,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":587,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/587"}],"wp:attachment":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}