1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carte</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
<style>
#map {
height: 500px;
width: 100%;
}
#results {
height: 200px;
width: 300px;
overflow-y: auto;
}
</style>
</head>
<body>
<center><u><b>Trajet :</b></u></center><br /><br />
<form id="addressForm">
<label for="address1">Adresse de départ : </label>
<input type="text" id="address1" name="address1" oninput="autocompleteAddress('address1', 'results1')"><br /><br />
<div id="results1"></div>
<label for="address2">Adresse d'arrivée : </label>
<input type="text" id="address2" name="address2" oninput="autocompleteAddress('address2', 'results2')"><br /><br />
<div id="results2"></div>
<button type="button" onclick="updateMap()">Afficher sur la carte</button><br />
</form><br /><br />
<div id="distance">Distance: </div>
<div id="time">Temps: </div>
<div id="map"></div>
<script>
var waypoints = [{}, {}]; // Stocker les coordonnées des adresses
// Initialiser la carte et définir ses options
var map = L.map('map').setView([50.8504500, 4.3487800], 13); // Coordonnées pour Bruxelles
// Ajouter la couche OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Ajouter le contrôle de routage
var control = L.Routing.control({
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim(),
router: new L.Routing.osrmv1({
serviceUrl: 'https://router.project-osrm.org/route/v1'
}),
createMarker: function(i, wp) {
var color = i == 0 ? 'blue' : 'red';
var icon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-' + color + '.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
return L.marker(wp.latLng, {icon: icon}).bindPopup('Adresse ' + (i + 1));
},
lineOptions: {
styles: [{color: 'blue', opacity: 0.6, weight: 4}]
},
addWaypoints: false
}).addTo(map);
// Ajouter un gestionnaire d'événements pour l'événement 'routesfound'
control.on('routesfound', function(e) {
var routes = e.routes;
var summary = routes[0].summary;
// Afficher la distance (en kilomètres) et le temps (en minutes)
var distance = (summary.totalDistance / 1000).toFixed(2);
var time = (summary.totalTime / 60).toFixed(2);
document.getElementById('distance').innerHTML = 'Distance: ' + distance + ' km';
document.getElementById('time').innerHTML = 'Temps: ' + time + ' min';
var routeShape = routes[0].coordinates;
var line = L.Routing.line(routes[0]);
var marker = L.marker(routeShape[routeShape.length - 1]).bindPopup('Distance: ' + distance + ' km<br>Temps: ' + time + ' min');
line.addTo(map);
marker.addTo(map);
});
function updateMap() {
var lat1 = waypoints[0].lat || 50.8504500; // Coordonnées par défaut pour Bruxelles
var lon1 = waypoints[0].lon || 4.3487800;
map.setView([lat1, lon1], 13);
control.spliceWaypoints(0, 1, L.latLng(lat1, lon1));
L.marker([lat1, lon1], {icon: new L.Icon({iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]})}).addTo(map).bindPopup('Adresse de départ');
var lat2 = waypoints[1].lat || 50.8504500;
var lon2 = waypoints[1].lon || 4.3487800;
control.spliceWaypoints(control.getWaypoints().length - 1, 1, L.latLng(lat2, lon2));
L.marker([lat2, lon2], {icon: new L.Icon({iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]})}).addTo(map).bindPopup('Adresse d\'arrivée');
}
function autocompleteAddress(inputId, resultsId) {
var address = document.getElementById(inputId).value;
fetch(`https://nominatim.openstreetmap.org/search?format=json&viewbox=-31.268,28.626,39.659,81.008&q=${address}`)
.then(response => response.json())
.then(data => {
var resultsDiv = document.getElementById(resultsId);
resultsDiv.innerHTML = '';
data.forEach(item => {
var div = document.createElement('div');
div.textContent = item.display_name;
div.onclick = function() {
document.getElementById(inputId).value = item.display_name;
waypoints[inputId === 'address1' ? 0 : 1] = {lat: parseFloat(item.lat), lon: parseFloat(item.lon)};
resultsDiv.innerHTML = '';
};
resultsDiv.appendChild(div);
});
});
}
</script>
</body>
</html> |
Afficher l'itinéraire entre deux adresses
Répondre avec citation
Partager