Skip to content

Commit 5e2609c

Browse files
bsu-axelorbsu-axelor
committed
Feature RM#75723: [TOUR] Display an itinerary
1 parent d229f1e commit 5e2609c

File tree

2 files changed

+153
-78
lines changed

2 files changed

+153
-78
lines changed

‎src/main/webapp/map/directions.html

+84-51
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
<!-- <script type="text/javascript"
3131
src="https://maps.googleapis.com/maps/api/js?sensor=false&region=FR">
3232
</script> -->
33-
<script src="../lib/jquery.ui/js/jquery.js" type="text/javascript"></script>
3433
<script type="text/javascript" src="js/apphome.js"></script>
3534
<script type="text/javascript">
3635

@@ -72,59 +71,93 @@
7271

7372
function translateResult(element, status) {
7473
var url = getAppHome() + "/ws/map/translation/" + "MapRest." + status;
75-
$.get(url)
76-
.done(function(data) {
77-
element.innerHTML = data.translation;
78-
})
79-
.fail(function (jqXHR, textStatus, errorThrown) {
80-
console.log(jqXHR);
81-
console.log(textStatus);
82-
console.log(errorThrown );
83-
element.innerHTML = status;
84-
});
74+
fetch(url)
75+
.then(function(response) {
76+
return response.json();
77+
})
78+
.then(function(data) {
79+
element.innerHTML = data.translation;
80+
});
8581
}
8682

8783
function initialize() {
88-
var directionsDisplay;
89-
var directionsService = new google.maps.DirectionsService();
90-
var map;
91-
var dx = getQueryVariable("dx");
92-
var dy = getQueryVariable("dy");
93-
var ax = getQueryVariable("ax");
94-
var ay = getQueryVariable("ay");
95-
96-
var rendererOptions = {
97-
draggable: true
98-
};
99-
100-
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
101-
var start = new google.maps.LatLng(dx, dy);
102-
var end = new google.maps.LatLng(ax, ay);
103-
var request = {
104-
origin:start,
105-
destination:end,
106-
travelMode: google.maps.DirectionsTravelMode.DRIVING
107-
};
108-
directionsService.route(request, function(response, status) {
109-
if (status == google.maps.DirectionsStatus.OK) {
110-
directionsDisplay.setDirections(response);
111-
} else {
112-
translateResult(document.getElementById('directionsPanel') , status);
113-
}
114-
});
115-
var mapOptions = {
116-
zoom:7,
117-
mapTypeId: google.maps.MapTypeId.ROADMAP,
118-
center: start
119-
}
120-
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
121-
directionsDisplay.setMap(map);
122-
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
123-
124-
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
125-
computeTotalDistance(directionsDisplay.directions);
126-
});
127-
84+
var url = getAppHome() + "/ws/map/" + getQueryVariable("object");
85+
var id = getQueryVariable("id");
86+
if (id) {
87+
url += "/" + id;
88+
}
89+
fetch(url, {
90+
method: 'GET',
91+
headers: {
92+
'Content-Type': 'application/json'
93+
}
94+
})
95+
.then(function (response) {
96+
return response.json();
97+
})
98+
.then(function (result) {
99+
if (result.status == 0) {
100+
var directionsDisplay;
101+
var directionsService = new google.maps.DirectionsService();
102+
var map;
103+
var locations = [];
104+
var errors = [];
105+
for (var i = 0; i < result.data.length; i++) {
106+
var { latit, longit ,address, errorMsg} = result.data[i];
107+
if (errorMsg){
108+
errors.push("\u2022 " +errorMsg);
109+
continue;
110+
}
111+
locations.push(new google.maps.LatLng(latit, longit));
112+
}
113+
if (errors.length > 0) {
114+
alert(errors.join("\n"));
115+
}
116+
var waypoints = locations.slice(1, -1).map(function (location) {
117+
return {
118+
location: location,
119+
stopover: true
120+
};
121+
});
122+
123+
var rendererOptions = {
124+
draggable: true
125+
};
126+
127+
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
128+
var start = locations[0];
129+
var end = locations[locations.length - 1];
130+
var request = {
131+
origin: start,
132+
destination: end,
133+
waypoints: waypoints,
134+
optimizeWaypoints: false,
135+
travelMode: google.maps.DirectionsTravelMode.DRIVING
136+
};
137+
directionsService.route(request, function(response, status) {
138+
if (status == google.maps.DirectionsStatus.OK) {
139+
directionsDisplay.setDirections(response);
140+
} else {
141+
translateResult(document.getElementById('directionsPanel'), status);
142+
}
143+
});
144+
var mapOptions = {
145+
zoom: 7,
146+
mapTypeId: google.maps.MapTypeId.ROADMAP,
147+
center: start
148+
}
149+
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
150+
directionsDisplay.setMap(map);
151+
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
152+
153+
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
154+
computeTotalDistance(directionsDisplay.directions);
155+
});
156+
}
157+
})
158+
.catch(function (error) {
159+
alert('Request failed: ' + error.message);
160+
});
128161
}
129162

130163
window.onload = function() {

‎src/main/webapp/map/osm-directions.html

+69-27
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,16 @@
77
href="https://unpkg.com/[email protected]/dist/leaflet.css" />
88
<link rel="stylesheet"
99
href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
10-
10+
<style>
11+
.leaflet-marker-icon{
12+
width:0 !important;
13+
height:0 !important;
14+
}
15+
</style>
1116
</head>
1217
<body>
1318
<div id="map" style="width: 100%; height: 100%; position: absolute;"></div>
19+
<script type="text/javascript" src="js/apphome.js"></script>
1420
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
1521
<script
1622
src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
@@ -31,35 +37,71 @@
3137
</script>
3238

3339
<script>
34-
var map = L.map('map').setView([44.907852, 7.673789],16);
35-
var dx = getQueryVariable("dx");
36-
var dy = getQueryVariable("dy");
37-
var ax = getQueryVariable("ax");
38-
var ay = getQueryVariable("ay");
39-
40-
var bounds = new L.LatLngBounds();
41-
var marker1 = new L.marker(dx, dy);
42-
var marker2 = new L.marker(ax, ay);
43-
bounds.extend(marker1.getLatLng());
44-
bounds.extend(marker2.getLatLng());
40+
var map = L.map('map').setView([44.907852, 7.673789], 16);
41+
var url = getAppHome() + "/ws/map/" + getQueryVariable("object");
42+
var id = getQueryVariable("id");
43+
if (id) {
44+
url += "/" + id;
45+
}
46+
fetch(url, {
47+
method: 'GET',
48+
headers: {
49+
'Content-Type': 'application/json'
50+
}
51+
})
52+
.then(function (response) {
53+
return response.json();
54+
})
55+
.then(function (result) {
56+
var waypoints = [];
57+
var errors = [];
58+
if (result.status == 0) {
59+
for (var i = 0; i < result.data.length; i++) {
60+
var { latit, longit, address, errorMsg} = result.data[i];
61+
if (errorMsg){
62+
errors.push("\u2022 " +errorMsg);
63+
continue;
64+
}
65+
waypoints.push(L.Routing.waypoint(L.latLng(latit, longit),address));
66+
}
67+
if (errors.length > 0) {
68+
alert(errors.join("\n"));
69+
}
70+
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
71+
maxZoom: 18,
72+
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
73+
}).addTo(map);
4574

46-
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
47-
maxZoom: 18,
48-
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
49-
}).addTo(map);
75+
L.Routing.control({
76+
waypoints: waypoints,
77+
routeWhileDragging: true,
78+
addWaypoints: false,
79+
geocoder: L.Control.Geocoder.nominatim(),
80+
createMarker: function(i, waypoint, n) {
81+
var popup = L.popup({
82+
offset: [0, -30]
83+
});
84+
var marker = L.marker(waypoint.latLng ,{
85+
draggable: true,
86+
icon: L.divIcon({
87+
html: '<div style="position: relative; display: inline-block; top:-35px; left:-6px;"><img src="../leaflet/images/marker-icon.png"><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: bold; color: white;">' + String.fromCharCode(65 + i) + '</div></div>'
88+
})
89+
}).addTo(map)
90+
.on('click', function onMapClick(e) {
91+
popup
92+
.setLatLng(e.latlng)
93+
.setContent(waypoint.name)
94+
.openOn(map);
95+
});
96+
return marker;
97+
}
5098

51-
52-
L.Routing.control({
53-
waypoints : [ L.latLng(dx, dy), L.latLng(ax, ay) ],
54-
routeWhileDragging: true,
55-
geocoder: L.Control.Geocoder.nominatim()
56-
}).on('routingerror', function(e) {
57-
alert('Route not Found !');
99+
}).on('routingerror', function (e) {
100+
alert('Route not Found !');
101+
}).addTo(map);
102+
}
58103
})
59-
.addTo(map);
60-
61-
map.fitBounds(bounds);
62-
104+
.catch(error => alert("Request failed: " + error));
63105
</script>
64106
</body>
65107
</html>

0 commit comments

Comments
 (0)