{"id":6,"date":"2020-04-16T14:33:44","date_gmt":"2020-04-16T14:33:44","guid":{"rendered":"https:\/\/startersites.io\/blocksy\/travel\/?page_id=6"},"modified":"2025-10-09T10:45:04","modified_gmt":"2025-10-09T10:45:04","slug":"home","status":"publish","type":"page","link":"https:\/\/mytriplinks.com\/?page_id=6","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6\" class=\"elementor elementor-6\">\n\t\t\t\t<div class=\"elementor-element elementor-element-81f2a15 e-flex e-con-boxed e-con e-parent\" data-id=\"81f2a15\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b295fc6 elementor-widget__width-initial e-transform elementor-widget elementor-widget-html\" data-id=\"b295fc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_transform_scale_effect&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0.9,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0.8,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- \ud83c\udf0d Any Origin (Country or City) \u2192 Possible Trips Explorer (full-width, now with Geolocation FIRST) -->\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<div class=\"mytrip-fullbleed\">\r\n<style>\r\n  \/* Full-bleed wrapper *\/\r\n  .mytrip-fullbleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);overflow-x:hidden}\r\n\r\n  :root{--chip-bg:#fff;--chip-br:#e57eb;--chip-t:#111;--muted:#6b7280;--shadow:0 1px 2px rgba(0,0,0,.06)}\r\n  .tp-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}\r\n\r\n  .chipbar{display:flex;gap:8px;flex-wrap:wrap;overflow:auto;padding:10px;background:#fff;border:1px solid var(--chip-br);border-radius:12px;margin-bottom:10px}\r\n  .chip{position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:6px 10px;border:1px solid var(--chip-br);border-radius:12px;background:#fff;color:var(--chip-t);box-shadow:var(--shadow);white-space:nowrap}\r\n  .chip .title{font-size:12px;color:var(--muted)} .chip .value{font-size:13px;font-weight:600} .chip .caret{margin-left:4px;font-size:12px;color:var(--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(--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\r\n  .layout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:12px}\r\n  #map{height:calc(100vh - 260px);min-height:540px;border-radius:12px}\r\n\r\n  #panel{background:#fff;border:1px solid var(--chip-br);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);overflow:hidden}\r\n  .p-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid #f1f2f4}\r\n  .p-title{font-weight:700} .p-sub{color:#6b7280;font-size:12px}\r\n  .p-body{padding:12px;max-height:calc(100vh - 300px);overflow:auto}\r\n  .badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 12px}\r\n  .badges span{font-size:12px;padding:2px 8px;border:1px solid var(--chip-br);border-radius:999px;background:#f3f4f6}\r\n  .list{display:flex;flex-direction:column;gap:8px;margin:8px 0}\r\n  .dest{display:flex;justify-content:space-between;gap:12px;border:1px solid #eef0f3;border-radius:10px;padding:8px 10px;cursor:pointer}\r\n  .dest:hover{background:#f9fafb}\r\n  .d1{font-weight:700} .d2{font-size:12px;color:#6b7280}\r\n  .tags{display:flex;gap:6px} .tag{font-size:11px;border:1px solid var(--chip-br);border-radius:999px;padding:2px 6px;background:#fff}\r\n  .leaflet-popup,.leaflet-popup-pane{display:none!important}\r\n  .rec-line.active{stroke:#0ea5e9 !important;stroke-width:5 !important}\r\n\r\n  \/* Pulsing dot for current location *\/\r\n  .pulse{\r\n    background:#3b82f6;border:2px solid #fff;width:10px;height:10px;border-radius:50%;\r\n    box-shadow:0 0 0 rgba(59,130,246,.4);animation:pulse 2s infinite;\r\n  }\r\n  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(59,130,246,.6)}70%{box-shadow:0 0 0 15px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}\r\n\r\n  @media (min-width:1440px){ .layout{grid-template-columns:minmax(0,1fr) 480px} }\r\n  @media (max-width:1024px){\r\n    .layout{grid-template-columns:1fr}\r\n    #panel{position:fixed;right:10px;top:90px;width:340px;max-height:75vh;display:none;z-index:1000}\r\n    #panel.open{display:block}\r\n    #togglePanel{position:fixed;right:10px;top:90px;z-index:1100}\r\n  }\r\n<\/style>\r\n\r\n<div class=\"tp-wrap\">\r\n  <!-- FILTER BAR -->\r\n  <div class=\"chipbar\" role=\"toolbar\" aria-label=\"Filters\">\r\n    <!-- \ud83d\udccd Geolocation FIRST -->\r\n    <button id=\"useMyLoc\" class=\"btn\" title=\"Use my current location\">\ud83d\udccd Use my location<\/button>\r\n\r\n    <!-- Origin pickers -->\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">Origin Country<\/div><div class=\"value\" id=\"oCountryLabel\">Select<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"oCountry\"><\/select>\r\n    <\/label>\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">Origin City<\/div><div class=\"value\" id=\"oCityLabel\">Any<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"oCity\"><option value=\"\">Any<\/option><\/select>\r\n    <\/label>\r\n    <button id=\"applyOrigin\" class=\"btn btn-primary\">Set Origin<\/button>\r\n\r\n    <!-- Trip filters -->\r\n    <label class=\"chip\">\r\n      <div><div class=\"title\">Trip type<\/div><div class=\"value\" id=\"tripTypeLabel\">All<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"tripType\">\r\n        <option value=\"\">All<\/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\">Duration<\/div><div class=\"value\" id=\"durLabel\">All<span class=\"caret\">\u25be<\/span><\/div><\/div>\r\n      <select id=\"duration\">\r\n        <option value=\"\">All<\/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=\"btnShow\" class=\"btn\">Show trips<\/button>\r\n    <button id=\"resetBtn\" class=\"btn btn-danger\">Reset \u21ba<\/button>\r\n    <label class=\"switch\"><span class=\"p-sub\">Full Map<\/span><input id=\"fullMap\" type=\"checkbox\"\/><\/label>\r\n    <button id=\"togglePanel\" class=\"btn\" style=\"display:none\">\u2630 Details<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"layout\">\r\n    <div id=\"map\"><\/div>\r\n    <aside id=\"panel\" aria-label=\"Trip Details\">\r\n      <div class=\"p-head\">\r\n        <div>\r\n          <div class=\"p-title\" id=\"p-title\">Trips from: \u2014<\/div>\r\n          <div class=\"p-sub\" id=\"p-sub\">Pick an origin and filter<\/div>\r\n        <\/div>\r\n        <div class=\"p-sub\"><span id=\"p-count\">0<\/span> results<\/div>\r\n      <\/div>\r\n      <div class=\"p-body\">\r\n        <div class=\"badges\"><span id=\"p-duration\">Duration: \u2014<\/span><span id=\"p-distance\">Distance: \u2014<\/span><span id=\"p-best\">Best time: \u2014<\/span><\/div>\r\n        <div id=\"p-list\" class=\"list\"><\/div>\r\n        <hr>\r\n        <h4 style=\"margin:8px 0\">Suggested Plan<\/h4>\r\n        <ul id=\"p-plan\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n        <div id=\"p-notes\" class=\"p-sub\"><\/div>\r\n        <h4 style=\"margin:12px 0 6px\">How to get there<\/h4>\r\n        <ul id=\"p-ways\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n        <h4 style=\"margin:12px 0 6px\">Top Sights<\/h4>\r\n        <ul id=\"p-sights\" style=\"margin:0 0 10px 18px\"><\/ul>\r\n      <\/div>\r\n    <\/aside>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ---------------- Origins you allow customers to pick (country or city) ---------------- *\/\r\nconst ORIGIN_DB = {\r\n  IN: { name:'India', centroid:[22.0,79.0], cities:[\r\n    {city:'Delhi',   code:'DEL', lat:28.5562, lng:77.1000},\r\n    {city:'Mumbai',  code:'BOM', lat:19.0896, lng:72.8656},\r\n    {city:'Jaipur',  code:'JAI', lat:26.9124, lng:75.7873},\r\n    {city:'Bengaluru',code:'BLR',lat:13.1989, lng:77.7063},\r\n    {city:'Kochi',   code:'COK', lat:10.1520, lng:76.4019}\r\n  ]},\r\n  US: { name:'United States', centroid:[39.8,-98.6], cities:[\r\n    {city:'New York', code:'JFK', lat:40.6413, lng:-73.7781},\r\n    {city:'Los Angeles', code:'LAX', lat:33.9416, lng:-118.4085},\r\n    {city:'San Francisco', code:'SFO', lat:37.6213, lng:-122.3790},\r\n    {city:'Chicago', code:'ORD', lat:41.9742, lng:-87.9073}\r\n  ]},\r\n  AE: { name:'United Arab Emirates', centroid:[24.5,54.4], cities:[{city:'Dubai', code:'DXB', lat:25.2532, lng:55.3657}]},\r\n  NP: { name:'Nepal', centroid:[28.4,84.1], cities:[{city:'Kathmandu', code:'KTM', lat:27.7172, lng:85.3240}]},\r\n  TH: { name:'Thailand', centroid:[15.87,100.99], cities:[{city:'Bangkok', code:'BKK', lat:13.7563, lng:100.5018}]},\r\n  LK: { name:'Sri Lanka', centroid:[7.87,80.77], cities:[{city:'Colombo', code:'CMB', lat:6.9271, lng:79.8612}]},\r\n  SG: { name:'Singapore', centroid:[1.29,103.85], cities:[{city:'Singapore', code:'SIN', lat:1.3521, lng:103.8198}]}\r\n};\r\n\r\n\/* ---------------- Destination catalog (add more anytime) ---------------- *\/\r\nconst DESTS = [\r\n  \/\/ India\r\n  {city:'Jaipur', iata:'JAI', country:'India', cc:'IN', lat:26.9124, lng:75.7873, best:'Oct\u2013Mar', days_min:2, days_max:5, overview:'Pink City forts & bazaars.',\r\n   ways:{flight:'~55m',train:'~4h30m',road_km:280}, plan:['City Palace & Hawa Mahal','Amber Fort & stepwells','Jaigarh\/Nahargarh\/Chokhi Dhani'], sights:['Amber Fort','Hawa Mahal','Jantar Mantar'], tags:['heritage','family']},\r\n  {city:'Agra', iata:'AGR', country:'India', cc:'IN', lat:27.1767, lng:78.0081, best:'Oct\u2013Mar', days_min:2, days_max:5, overview:'Taj Mahal + Mughal heritage.',\r\n   ways:{train:'Gatimaan ~1h40m',road_km:230}, plan:['Sunrise Taj','Agra Fort & Mehtab','Fatehpur Sikri'], sights:['Taj Mahal','Agra Fort','Mehtab Bagh'], tags:['iconic','heritage']},\r\n  {city:'Rishikesh', iata:'', country:'India', cc:'IN', lat:30.0869, lng:78.2676, best:'Oct\u2013Apr', days_min:3, days_max:5, overview:'Yoga, rafting & aarti.',\r\n   ways:{train:'to Haridwar + 1h road',road_km:240}, plan:['Ganga aarti','Rafting \/ yoga','Neelkanth \/ waterfalls'], sights:['Triveni','Lakshman Jhula','Beatles Ashram'], tags:['spiritual','adventure']},\r\n  {city:'Shimla', iata:'', country:'India', cc:'IN', lat:31.1048, lng:77.1734, best:'Oct\u2013Apr', days_min:3, days_max:5, overview:'Hills & toy train.',\r\n   ways:{train:'Kalka\u2013Shimla',road_km:350}, plan:['Mall Road & Ridge','Kufri \/ Jakhoo','Mashobra \/ Chail'], sights:['The Ridge','Jakhoo','Kufri'], tags:['mountains']},\r\n  {city:'Udaipur', iata:'UDR', country:'India', cc:'IN', lat:24.5854, lng:73.7125, best:'Oct\u2013Mar', days_min:3, days_max:5, overview:'Lakes & palaces.',\r\n   ways:{flight:'~1h20m',road_km:660}, plan:['City Palace & Pichola','Boat + Bagore','Kumbhalgarh\/Chittor'], sights:['City Palace','Pichola','Bagore'], tags:['romantic','heritage']},\r\n  {city:'Amritsar', iata:'ATQ', country:'India', cc:'IN', lat:31.6340, lng:74.8723, best:'Oct\u2013Mar', days_min:3, days_max:5, overview:'Golden Temple & food.',\r\n   ways:{flight:'~1h10m',train:'Shatabdi ~6h',road_km:450}, plan:['Golden Temple','Wagah ceremony','Heritage & food'], sights:['Golden Temple','Wagah','Bazaar'], tags:['spiritual','food']},\r\n  {city:'Varanasi', iata:'VNS', country:'India', cc:'IN', lat:25.3176, lng:82.9739, best:'Oct\u2013Mar', days_min:3, days_max:5, overview:'Ghats, temples & silk.',\r\n   ways:{flight:'~1h30m',train:'overnight'}, plan:['Sunrise boat + ghats','Kashi Vishwanath','Sarnath + markets'], sights:['Ghats','Kashi','Sarnath'], tags:['spiritual','culture']},\r\n  {city:'Goa (Panaji)', iata:'GOI', country:'India', cc:'IN', lat:15.4909, lng:73.8278, best:'Nov\u2013Feb', days_min:3, days_max:7, overview:'Beaches & caf\u00e9s.',\r\n   ways:{flight:'~2h30m',road_km:1850}, plan:['North beaches','Old Goa','South beaches'], sights:['Baga','Basilica','Palolem'], tags:['beach','party']},\r\n  {city:'Mumbai', iata:'BOM', country:'India', cc:'IN', lat:19.0896, lng:72.8656, best:'Nov\u2013Feb', days_min:3, days_max:5, overview:'Movies & marine drive.',\r\n   ways:{flight:'~2h',train:'overnight'}, plan:['Gateway & Colaba','Bandra & caf\u00e9s','Elephanta \/ markets'], sights:['Gateway','Marine Drive','Bandra'], tags:['city','food']},\r\n\r\n  \/\/ International (near India)\r\n  {city:'Dubai', iata:'DXB', country:'UAE', cc:'AE', lat:25.2532, lng:55.3657, best:'Nov\u2013Mar', days_min:3, days_max:5, overview:'City + desert + Abu Dhabi day-trip.',\r\n   ways:{flight:'non-stop ~3h30m'}, plan:['Downtown & Burj','Desert safari','Old Dubai \/ Marina'], sights:['Burj','Desert','Marina'], tags:['international','shopping','desert']},\r\n  {city:'Kathmandu', iata:'KTM', country:'Nepal', cc:'NP', lat:27.7172, lng:85.3240, best:'Oct\u2013Apr', days_min:3, days_max:5, overview:'Temples & valleys.',\r\n   ways:{flight:'non-stop ~1h30m'}, plan:['Durbar Squares','Pashupatinath & Boudha','Bhaktapur\/Nagarkot'], sights:['Pashupatinath','Boudha','Bhaktapur'], tags:['international','culture']},\r\n  {city:'Bangkok', iata:'BKK', country:'Thailand', cc:'TH', lat:13.7563, lng:100.5018, best:'Nov\u2013Feb', days_min:4, days_max:5, overview:'Temples, food & markets.',\r\n   ways:{flight:'non-stop ~4h30m'}, plan:['Grand Palace\/Wat Pho','Markets & boat','Ayutthaya\/Pattaya option'], sights:['Grand Palace','Wat Pho','Chatuchak'], tags:['international','food']},\r\n  {city:'Colombo', iata:'CMB', country:'Sri Lanka', cc:'LK', lat:6.9271, lng:79.8612, best:'Nov\u2013Apr', days_min:4, days_max:5, overview:'City + beach day-trips.',\r\n   ways:{flight:'non-stop ~3h30m'}, plan:['City highlights','Galle day-trip','Negombo\/Beaches'], sights:['Galle Fort','Gangaramaya','Mount Lavinia'], tags:['international','beach']},\r\n  {city:'Singapore', iata:'SIN', country:'Singapore', cc:'SG', lat:1.3521, lng:103.8198, best:'Nov\u2013Mar', days_min:4, days_max:5, overview:'Clean, green & attractions.',\r\n   ways:{flight:'non-stop ~5h30m'}, plan:['Marina Bay','Sentosa','Gardens\/Chinatown\/Little India'], sights:['Marina Bay','GBTB','Sentosa'], tags:['international','family']},\r\n\r\n  \/\/ USA domestic (for US origins)\r\n  {city:'San Francisco', iata:'SFO', country:'United States', cc:'US', lat:37.6213, lng:-122.3790, best:'Apr\u2013Oct', days_min:3, days_max:5, overview:'Bridges & bays.',\r\n   ways:{flight:'\u2014'}, plan:['Golden Gate & Piers','Alcatraz','Muir Woods \/ Napa'], sights:['GG Bridge','Pier 39','Alcatraz'], tags:['city','coast']},\r\n  {city:'Las Vegas', iata:'LAS', country:'United States', cc:'US', lat:36.0840, lng:-115.1537, best:'Oct\u2013Apr', days_min:3, days_max:5, overview:'Entertainment & desert.',\r\n   ways:{flight:'\u2014'}, plan:['The Strip','Shows','Red Rock \/ Hoover'], sights:['Strip','Bellagio','Red Rock'], tags:['nightlife','desert']},\r\n  {city:'Chicago', iata:'ORD', country:'United States', cc:'US', lat:41.9742, lng:-87.9073, best:'May\u2013Sep', days_min:3, days_max:5, overview:'Architecture & lakeshore.',\r\n   ways:{flight:'\u2014'}, plan:['Architecture tour','Art Institute','Navy Pier'], sights:['Millennium Park','Riverwalk','Pier'], tags:['city','architecture']}\r\n];\r\n\r\n\/* ---------------- Map + helpers ---------------- *\/\r\nconst map = L.map('map',{worldCopyJump:true}).setView([22,79], 5);\r\nL.tileLayer('https:\/\/{s}.tile.openstreetmap.org\/{z}\/{x}\/{y}.png',{attribution:'\u00a9 OpenStreetMap'}).addTo(map);\r\nlet origin = null, originMarker = null, lines = [], myLocMarker = null, myLocCircle = null;\r\n\r\nconst $ = id => document.getElementById(id);\r\nconst km = (a,b)=>{ const R=6371,toRad=x=>x*Math.PI\/180,dLat=toRad(b[0]-a[0]),dLng=toRad(b[1]-a[1]);\r\n  const s=Math.sin(dLat\/2)**2 + Math.cos(toRad(a[0]))*Math.cos(toRad(b[0]))*Math.sin(dLng\/2)**2; return 2*R*Math.asin(Math.sqrt(s)); };\r\n\r\n\/* Find nearest known origin city from ORIGIN_DB *\/\r\nfunction nearestOriginCity(lat,lng){\r\n  let best=null;\r\n  Object.entries(ORIGIN_DB).forEach(([cc,obj])=>{\r\n    obj.cities.forEach(c=>{\r\n      const d = km([lat,lng],[c.lat,c.lng]);\r\n      if(!best || d<best.d){ best={cc, city:c, d}; }\r\n    });\r\n  });\r\n  return best; \/\/ {cc, city{city,code,lat,lng}, d}\r\n}\r\n\r\nfunction setOrigin(lat,lng,label,cc){\r\n  origin = {lat,lng,label,cc};\r\n  if(originMarker) map.removeLayer(originMarker);\r\n  originMarker = L.marker([lat,lng]).addTo(map).bindTooltip(label);\r\n  map.setView([lat,lng], 6);\r\n  $('p-title').textContent = `Trips from: ${label}`;\r\n  $('p-sub').textContent = 'Choose a filter or click a destination line';\r\n}\r\n\r\nfunction fillCountries(){\r\n  const sel = $('oCountry'); sel.innerHTML = '<option value=\"\">Country<\/option>';\r\n  Object.entries(ORIGIN_DB).forEach(([cc, obj])=>{\r\n    sel.insertAdjacentHTML('beforeend', `<option value=\"${cc}\">${obj.name}<\/option>`);\r\n  });\r\n}\r\nfunction fillOriginCities(cc){\r\n  const sel = $('oCity'); sel.innerHTML = '<option value=\"\">Any<\/option>';\r\n  if(!cc || !ORIGIN_DB[cc]) return;\r\n  ORIGIN_DB[cc].cities.forEach(c=>{\r\n    sel.insertAdjacentHTML('beforeend', `<option value=\"${c.code}\" data-lat=\"${c.lat}\" data-lng=\"${c.lng}\">${c.city} (${c.code})<\/option>`);\r\n  });\r\n}\r\n\r\nfunction durationMatch(d, bucket){\r\n  if(!bucket) return true;\r\n  if(bucket==='short')  return d.days_min <= 2;\r\n  if(bucket==='medium') return d.days_min <= 5 && d.days_max >= 3;\r\n  if(bucket==='long')   return d.days_max >= 6;\r\n  return true;\r\n}\r\nfunction scopeMatch(d, tripType, originCC){\r\n  if(!tripType) return true;\r\n  return tripType==='national' ? d.cc === originCC : d.cc !== originCC;\r\n}\r\nfunction clearRoutes(){\r\n  lines.forEach(l=>map.removeLayer(l)); lines=[]; $('p-list').innerHTML='';\r\n  $('p-count').textContent='0'; $('p-distance').textContent='Distance: \u2014'; $('p-best').textContent='Best time: \u2014';\r\n  $('p-plan').innerHTML=''; $('p-ways').innerHTML=''; $('p-sights').innerHTML=''; $('p-notes').textContent='';\r\n}\r\n\r\nfunction renderTrips(){\r\n  if(!origin){ alert('Please set an origin first.'); return; }\r\n  clearRoutes();\r\n  const tripType = $('tripType').value; $('tripTypeLabel').innerHTML = (tripType||'All')+'<span class=\"caret\">\u25be<\/span>';\r\n  const dur = $('duration').value; $('durLabel').innerHTML = (dur? (dur==='short'?'1\u20132 days':dur==='medium'?'3\u20135 days':'6+ days') : 'All') + '<span class=\"caret\">\u25be<\/span>';\r\n  $('p-duration').textContent = `Duration: ${dur? (dur==='short'?'1\u20132 days':dur==='medium'?'3\u20135 days':'6+ days') : '\u2014'}`;\r\n\r\n  const results = DESTS.filter(d => scopeMatch(d, tripType, origin.cc))\r\n                       .filter(d => durationMatch(d, dur));\r\n  $('p-count').textContent = results.length;\r\n\r\n  results.forEach(d=>{\r\n    const A=[origin.lat,origin.lng], B=[d.lat,d.lng];\r\n    const dist = Math.round(km(A,B));\r\n    const line = L.polyline([A,B], {weight:4, opacity:.85, className:'rec-line'}).addTo(map);\r\n    lines.push(line);\r\n\r\n    const onSelect = ()=>{\r\n      lines.forEach(l=>l.setStyle({weight:4, opacity:.5}));\r\n      line.setStyle({weight:5, opacity:1}).bringToFront();\r\n      $('p-sub').textContent = `${d.city}, ${d.country}`;\r\n      $('p-distance').textContent = `Distance: ${dist} km`;\r\n      $('p-best').textContent = `Best time: ${d.best || '\u2014'}`;\r\n      $('p-plan').innerHTML = (d.plan||[]).map(x=>`<li>${x}<\/li>`).join('');\r\n      $('p-notes').textContent = d.overview || '';\r\n      $('p-ways').innerHTML = [\r\n        d.ways?.flight ? `<li>\u2708\ufe0f ${d.ways.flight}<\/li>` : '',\r\n        d.ways?.train  ? `<li>\ud83d\ude86 ${d.ways.train}<\/li>`  : '',\r\n        d.ways?.road_km? `<li>\ud83d\ude97 ${d.ways.road_km} km<\/li>` : ''\r\n      ].join('');\r\n      $('p-sights').innerHTML = (d.sights||[]).map(x=>`<li>${x}<\/li>`).join('');\r\n      map.fitBounds(line.getBounds(), {padding:[30,30]});\r\n    };\r\n    line.on('click', onSelect);\r\n\r\n    const div = document.createElement('div');\r\n    div.className = 'dest';\r\n    div.innerHTML = `\r\n      <div>\r\n        <div class=\"d1\">${d.city} <span class=\"d2\">${d.country}${d.iata?` \u00b7 ${d.iata}`:''}<\/span><\/div>\r\n        <div class=\"d2\">${d.best || ''} \u00b7 ${dist} km<\/div>\r\n      <\/div>\r\n      <div class=\"tags\">${(d.tags||[]).map(t=>`<span class=\"tag\">${t}<\/span>`).join('')}<\/div>`;\r\n    div.onclick = onSelect;\r\n    $('p-list').appendChild(div);\r\n  });\r\n\r\n  if(results.length){\r\n    const g = L.featureGroup(lines); map.fitBounds(g.getBounds(), {padding:[40,40]});\r\n  }\r\n}\r\n\r\n\/* ---------------- UI wiring ---------------- *\/\r\nfillCountries();\r\n$('oCountry').addEventListener('change', e=>{\r\n  const cc = e.target.value; $('oCountryLabel').innerHTML = (ORIGIN_DB[cc]?.name || 'Select')+'<span class=\"caret\">\u25be<\/span>';\r\n  fillOriginCities(cc); $('oCityLabel').innerHTML = 'Any<span class=\"caret\">\u25be<\/span>';\r\n});\r\n$('oCity').addEventListener('change', e=>{\r\n  const txt = e.target.value ? e.target.options[e.target.selectedIndex].text : 'Any';\r\n  $('oCityLabel').innerHTML = txt + '<span class=\"caret\">\u25be<\/span>';\r\n});\r\n\r\n$('applyOrigin').addEventListener('click', ()=>{\r\n  const cc = $('oCountry').value;\r\n  if(!cc){ alert('Pick an origin country'); return; }\r\n  const optCity = $('oCity').value;\r\n  if(optCity){\r\n    const opt = $('oCity').selectedOptions[0];\r\n    const lat = parseFloat(opt.getAttribute('data-lat')), lng = parseFloat(opt.getAttribute('data-lng'));\r\n    setOrigin(lat, lng, opt.text, cc);\r\n  }else{\r\n    const [lat,lng] = ORIGIN_DB[cc].centroid;\r\n    setOrigin(lat, lng, ORIGIN_DB[cc].name, cc);\r\n  }\r\n});\r\n\r\n$('btnShow').addEventListener('click', renderTrips);\r\n$('tripType').addEventListener('change', renderTrips);\r\n$('duration').addEventListener('change', renderTrips);\r\n\r\n$('resetBtn').addEventListener('click', ()=>{\r\n  $('oCountry').value=''; $('oCity').innerHTML='<option value=\"\">Any<\/option>';\r\n  $('oCountryLabel').innerHTML='Select<span class=\"caret\">\u25be<\/span>'; $('oCityLabel').innerHTML='Any<span class=\"caret\">\u25be<\/span>';\r\n  $('tripType').value=''; $('duration').value='';\r\n  $('tripTypeLabel').innerHTML='All<span class=\"caret\">\u25be<\/span>'; $('durLabel').innerHTML='All<span class=\"caret\">\u25be<\/span>';\r\n  if(originMarker){ map.removeLayer(originMarker); originMarker=null; origin=null; }\r\n  if(myLocMarker){ map.removeLayer(myLocMarker); myLocMarker=null; }\r\n  if(myLocCircle){ map.removeLayer(myLocCircle); myLocCircle=null; }\r\n  clearRoutes(); $('p-title').textContent='Trips from: \u2014'; $('p-sub').textContent='Pick an origin and filter';\r\n  map.setView([22,79], 5);\r\n});\r\n\r\n$('fullMap').addEventListener('change', (e)=>{\r\n  if (window.matchMedia('(max-width:1024px)').matches){\r\n    $('panel').classList.toggle('open', !e.target.checked);\r\n  } else {\r\n    $('panel').style.display = e.target.checked ? 'none' : 'block';\r\n  }\r\n});\r\nif (window.matchMedia('(max-width:1024px)').matches){\r\n  $('togglePanel').style.display='inline-block';\r\n  $('togglePanel').onclick=()=> $('panel').classList.toggle('open');\r\n}\r\n\r\n\/* ---------------- \ud83d\udccd Geolocation: Ask permission & set origin ---------------- *\/\r\nconst iconPulse = L.divIcon({className:'pulse', iconSize:[10,10]});\r\n\r\nfunction showMyLocationOnMap(lat,lng,accuracy){\r\n  if(myLocMarker) map.removeLayer(myLocMarker);\r\n  if(myLocCircle) map.removeLayer(myLocCircle);\r\n  myLocMarker = L.marker([lat,lng], {icon:iconPulse}).addTo(map).bindTooltip('You are here');\r\n  if(Number.isFinite(accuracy)){\r\n    myLocCircle = L.circle([lat,lng], {radius:accuracy, color:'#3b82f6', opacity:0.4, weight:1, fillOpacity:0.08}).addTo(map);\r\n  }\r\n}\r\n\r\nfunction nearestCountryByCentroid(lat,lng){\r\n  let nearest = null;\r\n  Object.entries(ORIGIN_DB).forEach(([k,v])=>{\r\n    const d = km([lat,lng], v.centroid);\r\n    if(!nearest || d<nearest.d) nearest={cc:k,d};\r\n  });\r\n  return nearest?.cc || '';\r\n}\r\n\r\nfunction useMyLocation(){\r\n  if(!('geolocation' in navigator)){\r\n    alert('Geolocation not supported by this browser.');\r\n    return;\r\n  }\r\n  navigator.geolocation.getCurrentPosition((pos)=>{\r\n    const {latitude:lat, longitude:lng, accuracy} = pos.coords;\r\n    showMyLocationOnMap(lat,lng,accuracy);\r\n\r\n    \/\/ Pick nearest known origin city from ORIGIN_DB\r\n    const best = nearestOriginCity(lat,lng);\r\n    let label = 'My location';\r\n    let cc = best?.cc || null;\r\n\r\n    \/\/ If we found a nearby city within ~250 km, adopt that exact city as origin label\r\n    if(best && best.d <= 250){\r\n      label = `${best.city.city} (${best.city.code}) \u00b7 My location`;\r\n      cc = best.cc;\r\n      \/\/ Update selectors to reflect detected origin\r\n      $('oCountry').value = cc;\r\n      $('oCountryLabel').innerHTML = (ORIGIN_DB[cc]?.name || 'Select')+'<span class=\"caret\">\u25be<\/span>';\r\n      fillOriginCities(cc);\r\n      \/\/ Select the matched city in dropdown\r\n      const citySel = $('oCity');\r\n      const option = Array.from(citySel.options).find(o=>o.value===best.city.code);\r\n      if(option){ citySel.value = best.city.code; $('oCityLabel').innerHTML = option.text + '<span class=\"caret\">\u25be<\/span>'; }\r\n    }else{\r\n      \/\/ fallback: set country to nearest centroid\r\n      if(!cc){ cc = nearestCountryByCentroid(lat,lng); }\r\n      $('oCountry').value = cc;\r\n      $('oCountryLabel').innerHTML = (ORIGIN_DB[cc]?.name || 'Select')+'<span class=\"caret\">\u25be<\/span>';\r\n      fillOriginCities(cc);\r\n      $('oCity').value = '';\r\n      $('oCityLabel').innerHTML = 'Any<span class=\"caret\">\u25be<\/span>';\r\n    }\r\n\r\n    setOrigin(lat, lng, label, cc);\r\n    renderTrips();\r\n  }, (err)=>{\r\n    let msg='Unable to access location.';\r\n    if(err.code===1) msg='Permission denied. Please allow location access in your browser\/site settings (requires HTTPS).';\r\n    if(err.code===2) msg='Position unavailable. Try again.';\r\n    if(err.code===3) msg='Location request timed out. Try again.';\r\n    alert(msg);\r\n  }, {enableHighAccuracy:true, timeout:10000, maximumAge:10000});\r\n}\r\n\r\n$('useMyLoc').addEventListener('click', useMyLocation);\r\n<\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-138829e e-flex e-con-boxed e-con e-parent\" data-id=\"138829e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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 Origin CountrySelect\u25be Origin CityAny\u25be Any Set Origin Trip typeAll\u25be AllNationalInternational DurationAll\u25be All1\u20132 days3\u20135 days6+ days Show trips Reset \u21ba Full Map \u2630 Details Trips from: \u2014 Pick an origin and filter 0 results Duration: \u2014Distance: \u2014Best time: \u2014 Suggested Plan How to get there Top Sights<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/6","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=6"}],"version-history":[{"count":161,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/mytriplinks.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/663"}],"wp:attachment":[{"href":"https:\/\/mytriplinks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}