<!-- ===================================================== TRAVEL DIFFERENTLY - INTERACTIVE MAP V2.0 ===================================================== BRAND COLORS: - Black: #001427 (primary dark) - Orange: #e98a15 (accent) - Beige: #e7e0da (light background) - Light Gray: #f4f4f4 (cards) - Blue: #2a9d8f (secondary accent) LOGOS: - White: https://cdn.prod.website-files.com/60e9f6409ef83c351ec69258/6658337c7f4f2da6003a1416_Logo.svg - Dark: https://cdn.prod.website-files.com/60e9f6409ef83c351ec69258/6658337c1fb6585e5fcdd9a9_Logo_dark.svg INTEGRATION MAKE.COM: Replace these placeholders with variables: - → Florian - → Armenia - → ```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ``` - → ```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ``` - → Generated by ChatGPT from itinerary --> <div id=\"td-map-v2\" style=\"font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;max-width:700px;margin:20px auto;\"> <!-- Header with Brand Colors --> <div style=\"background:#001427;border-radius:12px 12px 0 0;padding:18px 24px;\"> <div style=\"display:flex;justify-content:space-between;align-items:center;\"> <div> <h2 id=\"map-title\" style=\"margin:0;font-family:'Poppins','Inter',sans-serif;font-size:17px;font-weight:600;color:white;letter-spacing:-0.3px;\"> Florian's Journey Through Armenia </h2> <p id=\"map-subtitle\" style=\"margin:6px 0 0;font-size:12px;color:rgba(255,255,255,0.7);font-weight:400;\"> March 2026 • 14 Days • 5 Travelers </p> </div> <div> <img src=\"https://cdn.prod.website-files.com/60e9f6409ef83c351ec69258/6658337c7f4f2da6003a1416_Logo.svg\" alt=\"Travel Differently\" style=\"height:28px;\"> </div> </div> </div> <!-- Map Container --> <div id=\"map\" style=\"width:100%;height:380px;\"></div> <!-- Timeline Navigation --> <div id=\"timeline\" style=\"background:#f4f4f4;border-radius:0 0 12px 12px;padding:14px 20px;border-top:3px solid #e98a15;\"> <div style=\"display:flex;justify-content:space-between;align-items:center;gap:8px;\"> <!-- Timeline items will be generated by JavaScript --> </div> </div> <!-- Legend --> <div style=\"display:flex;justify-content:center;gap:24px;margin-top:14px;font-size:11px;color:#001427;font-weight:500;\"> <span style=\"display:flex;align-items:center;gap:6px;\"><span style=\"width:10px;height:10px;background:#e98a15;border-radius:50%;\"></span> Destination</span> <span style=\"display:flex;align-items:center;gap:6px;\"><span style=\"width:20px;height:2px;background:#e98a15;border-radius:1px;border-style:dashed;\"></span> Route</span> <span style=\"display:flex;align-items:center;gap:6px;\">📷 Click for details</span> </div> </div> <!-- Leaflet CSS & JS --> <link rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.css\" /> <script src=\"https://unpkg.com/leaflet@1.9.4/dist/leaflet.js\"></script> <style> #td-map-v2 * { box-sizing: border-box; } /* Premium popup styling */ #td-map-v2 .leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); overflow: hidden; } #td-map-v2 .leaflet-popup-content { margin: 0; width: 260px !important; } #td-map-v2 .leaflet-popup-tip { display: none; } /* Popup content */ .td-popup-v2 .popup-img { width: 100%; height: 120px; object-fit: cover; } .td-popup-v2 .popup-body { padding: 14px; } .td-popup-v2 .popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .td-popup-v2 .day-badge { background: #e98a15; color: white; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; } .td-popup-v2 h4 { margin: 0; font-family: 'Poppins', Arial, sans-serif; font-size: 15px; color: #001427; } .td-popup-v2 .popup-desc { font-size: 12px; color: #555; line-height: 1.5; margin-bottom: 10px; } .td-popup-v2 .popup-meta { display: flex; gap: 12px; font-size: 11px; color: #888; padding-top: 10px; border-top: 1px solid #eee; } .td-popup-v2 .popup-meta span { display: flex; align-items: center; gap: 4px; } .td-popup-v2 .highlights-list { background: #f5f5f5; padding: 10px; border-radius: 8px; margin-top: 10px; } .td-popup-v2 .highlights-list strong { font-size: 10px; color: #e98a15; text-transform: uppercase; } .td-popup-v2 .highlights-list ul { margin: 5px 0 0 15px; padding: 0; font-size: 11px; color: #666; } /* Timeline styling */ .timeline-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: all 0.2s; min-width: 70px; } .timeline-item:hover { background: #e98a15; color: white; } .timeline-item:hover .tl-day { color: white; } .timeline-item .tl-day { font-size: 10px; color: #999; margin-bottom: 2px; } .timeline-item .tl-name { font-size: 11px; font-weight: 600; color: #001427; white-space: nowrap; } .timeline-item:hover .tl-name { color: white; } .timeline-item.active { background: #e98a15; } .timeline-item.active .tl-day, .timeline-item.active .tl-name { color: white; } </style> <script> (function () { // =========================================== // ⚙️ CONFIGURATION - REPLACE WITH MAKE.COM VARIABLES // =========================================== // Traveler info (from lead cleaner) const travelerName = \"Florian\"; // Florian const destination = \"Armenia\"; // Armenia const travelPeriod = \"```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ```\"; // ```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ``` const tripDuration = \"```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ``` weeks\"; // ```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ``` weeks const totalTravelers = \"```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ```\"; // ```json { "clean_lead": { "full_name": "Florian", "destination": "Armenia", "nb_adults": 5, "nb_teens": 0, "nb_children": 0, "nb_babies": 0, "total_travelers": 5, "group_type": "friends", "is_family_trip": false, "departure_date": "", "return_date": "", "preferred_departure_period": "march-2026", "trip_duration_weeks": 2, "budget_pp": 2000, "accompanied": "With a driver-guide", "preferences": "I’m starting to plan, With friends, With a driver-guide", "accommodation_types_selected": [ "Luxury Hotels", "Guesthouses", "Eco Lodges" ], "traveling_with": "With friends", "initial_thoughts": "Enjoy and see some church" }, "summary": "Florian is planning a trip to Armenia in March 2026 with 5 adults, traveling with friends. The group prefers to stay in luxury hotels, guesthouses, and eco lodges. They would like to be accompanied by a driver-guide and have a budget of 2000 euros per person. The trip is expected to last 2 weeks. Florian is just starting to plan and would like to enjoy and see some churches. No children or teens are included in this group.", "missing": [] } ``` // Waypoints with photos (generated by ChatGPT from itinerary + Pixabay) const data_json = {"summary":{"title":"Exploring Armenia with Friends","dates":"March 2026","travelers":"5 Travelers"},"weather":{"desc":"Cool spring weather","temp":"15-20°C"},"security":{"status":"Low Risk","tip":"Country is very safe. Standard caution in crowds."},"budget":{"total":"€1,200","items":[{"label":"Hotels","val":"€600"},{"label":"Logistics","val":"€300"},{"label":"Activities","val":"€300"}]},"map":{"waypoints":[{"name":"Yerevan","lat":40.1792,"lon":44.4991,"days":"1-4","desc":"The capital city known for its rich history and vibrant culture.","photo":"https://source.unsplash.com/600x400/?Yerevan","highlights":["Republic Square","Cascade Complex"]},{"name":"Lake Sevan","lat":40.5704,"lon":45.278,"days":"5-6","desc":"A beautiful high-altitude lake, perfect for relaxation and scenic views.","photo":"https://source.unsplash.com/600x400/?LakeSevan","highlights":["Sevanavank Monastery","Beach Activities"]},{"name":"Dilijan","lat":40.588,"lon":44.9742,"days":"7-9","desc":"Known as the 'Switzerland of Armenia', famous for its lush forests.","photo":"https://source.unsplash.com/600x400/?Dilijan","highlights":["Dilijan National Park","Hiking Trails"]},{"name":"Goris","lat":39.5702,"lon":46.0667,"days":"10-12","desc":"A picturesque town with unique rock formations and historical sites.","photo":"https://source.unsplash.com/600x400/?Goris","highlights":["Tatev Monastery","Old Goris"]},{"name":"Etchmiadzin","lat":40.164,"lon":44.063,"days":"13-14","desc":"The spiritual center of the Armenian Apostolic Church, rich in history.","photo":"https://source.unsplash.com/600x400/?Etchmiadzin","highlights":["Etchmiadzin Cathedral","Museum of History"]}],"route":[0,1,2,3,4]}}; const waypoints = data_json.map.waypoints; // Route order const routeOrder = data_json.map.route; // =========================================== // UPDATE HEADER // =========================================== document.getElementById('map-title').textContent = `${travelerName}'s Journey Through ${destination}`; document.getElementById('map-subtitle').textContent = `${travelPeriod} • ${tripDuration} • ${totalTravelers}`; // =========================================== // INITIALIZE MAP // =========================================== const map = L.map('map', { scrollWheelZoom: false, zoomControl: true }).setView([40.1, 44.8], 7); // Premium map style (CartoDB Voyager - free & beautiful) L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { attribution: '© <a href=\"https://carto.com/\">CARTO</a> | <a href=\"https://traveldifferently.org\">Travel Differently</a>', maxZoom: 18 }).addTo(map); // =========================================== // CUSTOM MARKER ICON // =========================================== const createIcon = (number) => L.divIcon({ className: '', html: `<div style=\" background: linear-gradient(135deg, #e98a15 0%, #d47710 100%); color: white; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', Arial, sans-serif; font-weight: 700; font-size: 14px; box-shadow: 0 4px 15px rgba(233,138,21,0.5); border: 3px solid white; cursor: pointer; \">${number}</div>`, iconSize: [34, 34], iconAnchor: [17, 17], popupAnchor: [0, -20] }); // =========================================== // ADD MARKERS WITH RICH POPUPS // =========================================== const markers = []; waypoints.forEach((wp, index) => { const popupContent = ` <div class=\"td-popup-v2\"> <img src=\"${wp.photo}\" alt=\"${wp.name}\" class=\"popup-img\" onerror=\"this.style.display='none'\"> <div class=\"popup-body\"> <div class=\"popup-header\"> <span class=\"day-badge\">Days ${wp.days}</span> <h4>${wp.name}</h4> </div> <p class=\"popup-desc\">${wp.desc}</p> ${wp.nextStop ? ` <div class=\"popup-meta\"> <span>🚗 ${wp.nextStop.distance}</span> <span>⏱️ ${wp.nextStop.time} to ${wp.nextStop.name}</span> </div>` : ''} <div class=\"highlights-list\"> <strong>✨ Highlights</strong> <ul> ${wp.highlights.map(h => `<li>${h}</li>`).join('')} </ul> </div> </div> </div> `; const marker = L.marker([wp.lat, wp.lon], { icon: createIcon(index + 1) }) .bindPopup(popupContent, { maxWidth: 280, closeButton: true }) .addTo(map); markers.push(marker); }); // =========================================== // DRAW ANIMATED ROUTE // =========================================== const routeCoords = routeOrder.map(i => [waypoints[i].lat, waypoints[i].lon]); const routeLine = L.polyline(routeCoords, { color: '#e98a15', weight: 3, opacity: 0.7, dashArray: '10, 8', lineCap: 'round' }).addTo(map); // =========================================== // BUILD TIMELINE // =========================================== const timeline = document.getElementById('timeline').querySelector('div'); waypoints.forEach((wp, index) => { const item = document.createElement('div'); item.className = 'timeline-item'; item.innerHTML = ` <span class=\"tl-day\">Day ${wp.days.split('-')[0]}</span> <span class=\"tl-name\">${wp.name}</span> `; item.onclick = () => { map.setView([wp.lat, wp.lon], 10, { animate: true, duration: 0.5 }); markers[index].openPopup(); // Update active state document.querySelectorAll('.timeline-item').forEach(el => el.classList.remove('active')); item.classList.add('active'); }; timeline.appendChild(item); }); // =========================================== // FIT MAP TO BOUNDS // =========================================== const bounds = L.latLngBounds(waypoints.map(wp => [wp.lat, wp.lon])); map.fitBounds(bounds.pad(0.15)); })(); </script>