Qui ho caricato la mappa e parte delle note del viaggio (grazie Chatgpt!!)
Potrebbe volerci un po per caricare i percorsi e distanze
Diciamo che devo aggiungere ancora molti dettagli, soprattutto su cosa visitare nelle città
https://giorgioanastasi-1324c.web.app/
Questo il codice, se può essere utile a qualcuno:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Mappa Itinerario West Coast USA con Death Valley e Note</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
<style>
#map { height: 600px; width: 100%; }
.note { padding: 10px; font-size: 14px; }
.note h3 { margin-bottom: 5px; }
.distance-label {
font-weight: bold;
background-color: white;
padding: 2px;
border-radius: 3px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="note">
<h3>Note di Viaggio, periodo Luglio 2026 (2 adulti + 2 figli 20 e 17): Roma - San Francisco - Los Angeles - Las Vegas - Albuquerque - New York - Roma</h3>
<ul>
<li><strong>1° Giorno : Arrivo a San Francisco</strong> - Noleggio auto - Sistemazione in albergo - Serata .....</li>
<li><strong>2° Giorno : San Francisco</strong> - Visita (da programmare cosa)</li>
<li><strong>3° Giorno : San Francisco</strong> - Visita (da programmare cosa)</li>
<li><strong>4° Giorno : Yosemite National Park</strong> - Partenza da San Francisco la mattina presto e viaggio di circa 300km (3h), visita al parco - Pernotto in motel a Fresno (1.5h)</li>
<li><strong>5° Giorno : Los Angeles</strong> Viaggio verso Los Angeles (4h) - Sistemazione in albergo</li>
<li><strong>6° Giorno : Los Angeles</strong> Malibù + Visita........</li>
<li><strong>7° Giorno : Los Angeles</strong> Visita........</li>
<li><strong>8° Giorno : Death Valley</strong> - Partenza da Los Angeles, viaggio di circa 400km (3.5-4h), Visita al parco nel secondo pomeriggio - Hotel interno alla valle</li>
<li><strong>9° Giorno : Las Vegas</strong> - Mattina presto ancora visita alla Death Valley. partenza dopo pranzo e viaggio di circa 200km (2h) Sistemazione in albergo - Serata a Las Vegas</li>
<li><strong>10° Giorno : Las Vegas</strong> Visita a Las Vegas</li>
<li><strong>11° Giorno : Seligman - Grand Canyon</strong> - Viaggio verso il Grand Canyon - Tappa a Seligman circa 300km (3h) e poi altri 150km (2h) - Pernotto Hotel interno al Grand Canyon</li>
<li><strong>12° Giorno : Grand Canyon</strong> - Visita del parco - Viaggio di circa 200km (2.5h) verso Horseshoe Bend - Pernotto a Page</li>
<li><strong>13° Giorno : Horseshoe Bend e Antelope Canyon</strong> - Visita dei parchi - Viaggio di circa 200km (2.5h) verso Monument Valley - Visitare la Monument Valley il pomeriggio. - Pernotto nel The View Hotel</li>
<li><strong>14° Giorno : Monument Valley</strong> Sveglia presto e nuova visita alla Monument, poi viaggio di circa 550km (6h) per Albuquerque - Pernotto</li>
<li><strong>15° Giorno : Albuquerque</strong> Visita e poi la sera volo per New York</li>
</ul>
<h3>Parchi da visitare : (da capire i tempi per ciascuna visita e gli orari in cui farle)</h3>
<ul>
<li><strong>Yosemite National : </strong> Costo per auto 35€...</li>
<li><strong>Death Valley : </strong> Costo per auto 30€...</li>
<li><strong>Grand Canyon : </strong> Costo per auto 35€ | Le Havasupai : Havasu Falls, Money Falls, Beaver Falls, Havasu Creek </li>
<li><strong>Horseshoe Bend : </strong> Costo per auto 10€ | Da vedere al tramonto, l'escursione al belvedere è un percorso andata e ritorno di 1,5 miglia da un parcheggio</li>
<li><strong>Antelope Canyon : </strong> Upper (1.5h) 130€ a persona (x4) | Lower (1.5h) 80€ a persona | (attenzione al fuso orario) </li>
<li><strong>Monument Valley : </strong> Valley 8€ a persona (o escursione con i Navajo) + Forrest Gump point</li>
</ul>
<h3>Pernotti: 4550€</h3>
<ul>
<li><strong>Giorno 1-2-3 : </strong> San Francisco: 1000€</li>
<li><strong>Giorno 4 : </strong> Fresno: 200€</li>
<li><strong>Giorno 5-6-7 : </strong> Los Angeles: 900€</li>
<li><strong>Giorno 8 : </strong> Death Valley: 300€ (interno valle) | The Ranch at Death Valley https://www.oasisatdeathvalley.com/offers/ | STOVEPIPE WELLS VILLAGE https:/www.stovepipedeathvalley.com/</li>
<li><strong>Giorno 9-10 : </strong> Las Vegas: 900€ | Caesars Palace</li>
<li><strong>Giorno 11 : </strong> Grand Canyon: 400€ (interno parco) | The Grand Hotel https://www.grandcanyongrandhotel.com/</li>
<li><strong>Giorno 12 : </strong> Page: 150€</li>
<li><strong>Giorno 13 : </strong> Monument Valley: 500€ (interno parco) | The View Hotel, è gestito dal popolo Navajo, si paga un pedaggio di 8$ ad auto per 24h https://monumentvalleyview.com/premium-cabins/</li>
<li><strong>Giorno 14 : </strong> Albuquerque: 300€ </li>
</ul>
<h3>Altre Spese: 9200€</h3>
<ul>
<li><strong>Biglietti aerei : </strong> 4000€</li>
<li><strong>Noleggio auto : </strong> 800€</li>
<li><strong>Carburante : </strong> 400€ x 3000 km</li>
<li><strong>Parchi : </strong> 1000€</li>
<li><strong>Cibo : </strong> 3000€</li>
</ul>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
<script>
var map = L.map('map').setView([36.7783, -119.4179], 6);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
var punti = [
[37.7749, -122.4194, "San Francisco"],
[37.8651, -119.5383, "Yosemite National Park"],
[36.7299, -119.7749, "Fresno"],
//[34.0259, -118.7798, "Malibu"],
[34.0522, -118.2437, "Los Angeles"],
[36.5323, -116.9325, "Death Valley"],
[36.1699, -115.1398, "Las Vegas"],
[35.3256, -112.8774, "Seligman"],
[36.1070, -112.1130, "Grand Canyon"],
[36.8791, -111.5109, "Horseshoe Bend"],
[36.8619, -111.3743, "Antelope Canyon"],
[36.9980, -110.0985, "Monument Valley"],
[35.0520, -106.6198, "Albuquerque"]
];
punti.forEach(function(punto){
L.marker([punto[0], punto[1]]).addTo(map)
.bindPopup(punto[2], {autoClose:false, closeOnClick:false}).openPopup();
});
var waypoints = punti.map(p => L.latLng(p[0], p[1]));
var routingControl = L.Routing.control({
waypoints: waypoints,
routeWhileDragging: false,
lineOptions: {
styles: [{color: 'blue', opacity: 0.7, weight: 4}]
},
showAlternatives: false,
createMarker: function() { return null; },
fitSelectedRoutes: true,
addWaypoints: false
}).addTo(map);
routingControl.on('routesfound', function(e) {
var route = e.routes[0];
var totalDistance = 0;
route.waypointIndices.forEach(function(wpIndex, index){
if(index < route.waypointIndices.length - 1){
var nextWpIndex = route.waypointIndices[index + 1];
var segmentCoords = route.coordinates.slice(wpIndex, nextWpIndex + 1);
var segmentDistance = 0;
for(var i = 0; i < segmentCoords.length - 1; i++){
segmentDistance += segmentCoords[i].distanceTo(segmentCoords[i + 1]);
}
segmentDistance = (segmentDistance / 1000).toFixed(1);
totalDistance += parseFloat(segmentDistance);
var midpoint = segmentCoords[Math.floor(segmentCoords.length / 2)];
L.marker(midpoint, {
icon: L.divIcon({
className: 'distance-label',
html: segmentDistance + ' km',
iconSize: [60, 20]
})
}).addTo(map);
}
});
var distanceDiv = L.control({position: 'bottomleft'});
distanceDiv.onAdd = function() {
var div = L.DomUtil.create('div', 'distance-label');
div.innerHTML = '<strong>Distanza Totale:</strong> ' + totalDistance.toFixed(1) + ' km';
return div;
};
distanceDiv.addTo(map);
});
</script>
</body>
</html>