/* Base styles matching your site */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #0a0a0a; color: #e0e0e0; line-height: 1.5; } .container { max-width: 1200px; margin: 0 auto; padding: 0.5rem; } /* Header (minimal) */ .site-header { margin-bottom: 0.5rem; } .title-area { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .site-title { font-size: 2.5rem; } .site-title a { color: #3498db; text-decoration: none; } .logo-img { height: 44px; width: 44px; object-fit: cover; border-radius: 50%; } /* Footer & Map */ .footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #2a2a2a; text-align: center; font-size: 0.75rem; color: #777; } #path-map { height: 300px; margin-bottom: 12px; border-radius: 12px; overflow: hidden; } .map-stats { background: #1a1a1a; padding: 6px 12px; border-radius: 8px; font-size: 12px; margin: 8px 0; text-align: center; } .no-map-message { background: #1a1a1a; padding: 20px; text-align: center; border-radius: 12px; color: #aaa; } 123.45 mi | 198.67 km Weed Beach California (Jun 30, 2025) | Sonati Beach Nicaragua (Jun 30, 2026) // Hardcoded geo points (sample – replace with your actual data) var points = [ { title: 'Weed Beach California', lat: 33.7667, lng: -118.1833, location_name: 'Weed Beach California', created_at: '2025-06-30 12:00:00' }, { title: 'Bulk: 5164', lat: 34.0522, lng: -118.2437, location_name: 'Los Angeles', created_at: '2025-07-01 08:30:00' }, { title: 'Passport', lat: 34.0522, lng: -118.2437, location_name: 'LAX', created_at: '2025-07-15 14:20:00' }, { title: 'Sonati Beach Nicaragua', lat: 11.9868, lng: -86.0929, location_name: 'Sonati Beach Nicaragua', created_at: '2026-06-30 13:00:00' } ]; // Sort by created_at ascending (oldest first for path) var sorted = points.slice().sort(function(a, b) { return new Date(a.created_at) - new Date(b.created_at); }); var latLngs = sorted.map(function(p) { return [p.lat, p.lng]; }); var map = L.map('path-map'); L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', { attribution: '© OSM © CartoDB', subdomains: 'abcd', maxZoom: 19, minZoom: 2 }).addTo(map); if (latLngs.length > 1) { map.fitBounds(L.latLngBounds(latLngs).pad(0.1)); L.polyline(latLngs, { color: '#3498db', weight: 4, opacity: 0.8 }).addTo(map); } else { map.setView(latLngs[0], 13); } // Add markers sorted.forEach(function(point, index) { var isStart = index === 0; var isEnd = index === sorted.length - 1; var popup = '' + escapeHtml(point.title) + '' + new Date(point.created_at).toLocaleDateString() + '' + escapeHtml(point.location_name || 'Unknown') + '' + '' + (index+1) + '/' + sorted.length + ''; var marker; if (isStart) { marker = L.circleMarker([point.lat, point.lng], { radius: 10, fillColor: '#2ecc71', color: '#fff', weight: 2, fillOpacity: 1 }).addTo(map); } else if (isEnd) { marker = L.circleMarker([point.lat, point.lng], { radius: 10, fillColor: '#e74c3c', color: '#fff', weight: 2, fillOpacity: 1 }).addTo(map); } else { marker = L.circleMarker([point.lat, point.lng], { radius: 6, fillColor: '#3498db', color: '#fff', weight: 2, fillOpacity: 0.8 }).addTo(map); } marker.bindPopup(popup); if (isStart) marker.openPopup(); }); function escapeHtml(s) { if (!s) return ''; return s.replace(/[&]/g, function(m) { return {'&':'&','':'>'}[m]; }); }