Skip to content

Commit

Permalink
Feature RM#75723: [TOUR] Display an itinerary
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsu-axelor
bsu-axelor committed Apr 5, 2024
1 parent d229f1e commit ba8f519
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 78 deletions.
129 changes: 78 additions & 51 deletions src/main/webapp/map/directions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@
<!-- <script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&region=FR">
</script> -->
<script src="../lib/jquery.ui/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/apphome.js"></script>
<script type="text/javascript">

Expand Down Expand Up @@ -72,59 +71,87 @@

function translateResult(element, status) {
var url = getAppHome() + "/ws/map/translation/" + "MapRest." + status;
$.get(url)
.done(function(data) {
element.innerHTML = data.translation;
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown );
element.innerHTML = status;
});
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(data) {
element.innerHTML = data.translation;
});
}

function initialize() {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var dx = getQueryVariable("dx");
var dy = getQueryVariable("dy");
var ax = getQueryVariable("ax");
var ay = getQueryVariable("ay");

var rendererOptions = {
draggable: true
};

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var start = new google.maps.LatLng(dx, dy);
var end = new google.maps.LatLng(ax, ay);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
translateResult(document.getElementById('directionsPanel') , status);
}
});
var mapOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: start
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});

var url = getAppHome() + "/ws/map/" + getQueryVariable("object");
var id = getQueryVariable("id");
if (id) {
url += "/" + id;
}
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(function (response) {
return response.json();
})
.then(function (result) {
if (result.status == 0) {
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var locations = [];
for (var i = 0; i < result.data.length; i++) {
var { latit, longit ,address} = result.data[i];

if (!latit || !longit) continue;
locations.push(new google.maps.LatLng(latit, longit));
}
var waypoints = locations.slice(1, -1).map(function (location) {
return {
location: location,
stopover: true
};
});

var rendererOptions = {
draggable: true
};

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var start = locations[0];
var end = locations[locations.length - 1];
var request = {
origin: start,
destination: end,
waypoints: waypoints,
optimizeWaypoints: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
translateResult(document.getElementById('directionsPanel'), status);
}
});
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: start
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));

google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.directions);
});
}
})
.catch(function (error) {
alert('Request failed: ' + error.message);
});
}

window.onload = function() {
Expand Down
91 changes: 64 additions & 27 deletions src/main/webapp/map/osm-directions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,16 @@
href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet"
href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />

<style>
.leaflet-marker-icon{
width:0 !important;
height:0 !important;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%; position: absolute;"></div>
<script type="text/javascript" src="js/apphome.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script
src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
Expand All @@ -31,35 +37,66 @@
</script>

<script>
var map = L.map('map').setView([44.907852, 7.673789],16);
var dx = getQueryVariable("dx");
var dy = getQueryVariable("dy");
var ax = getQueryVariable("ax");
var ay = getQueryVariable("ay");

var bounds = new L.LatLngBounds();
var marker1 = new L.marker(dx, dy);
var marker2 = new L.marker(ax, ay);
bounds.extend(marker1.getLatLng());
bounds.extend(marker2.getLatLng());
var map = L.map('map').setView([44.907852, 7.673789], 16);
var url = getAppHome() + "/ws/map/" + getQueryVariable("object");
var id = getQueryVariable("id");
if (id) {
url += "/" + id;
}
fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(function (response) {
return response.json();
})
.then(function (result) {
var waypoints = [];
if (result.status == 0) {
for (var i = 0; i < result.data.length; i++) {
var { latit, longit, address} = result.data[i];

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
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>'
}).addTo(map);
if (!latit || !longit) continue;
waypoints.push(L.Routing.waypoint(L.latLng(latit, longit),address));
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
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>'
}).addTo(map);


L.Routing.control({
waypoints : [ L.latLng(dx, dy), L.latLng(ax, ay) ],
routeWhileDragging: true,
geocoder: L.Control.Geocoder.nominatim()
}).on('routingerror', function(e) {
alert('Route not Found !');
})
.addTo(map);

map.fitBounds(bounds);
L.Routing.control({
waypoints: waypoints,
routeWhileDragging: true,
addWaypoints: false,
geocoder: L.Control.Geocoder.nominatim(),
createMarker: function(i, waypoint, n) {
var popup = L.popup({
offset: [0, -30]
});
var marker = L.marker(waypoint.latLng ,{
draggable: true,
icon: L.divIcon({
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>'
})
}).addTo(map)
.on('click', function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent(waypoint.name)
.openOn(map);
});
return marker;
}

}).on('routingerror', function (e) {
alert('Route not Found !');
}).addTo(map);
}
})
.catch(error => alert("Request failed: " + error));
</script>
</body>
</html>

0 comments on commit ba8f519

Please sign in to comment.