made route reset more robust by clearing *really* everything,
improved route description (added distances to the right, bold street names, orientation in first instruction and non-breaking spaces for units), route link now displays the shortened link name, content of input boxes is only overwritten if the respective node is set or dragged, experimental support for reverse geocoding (when setting a new node by text box or clicking on map)
This commit is contained in:
DennisSchiefer
parent
aa952df541
commit
700206099b
@ -65,7 +65,16 @@ OSRM.Localization["de"] = {
|
||||
"DISTANCE": "Distanz",
|
||||
"DURATION": "Dauer",
|
||||
"YOUR_ROUTE_IS_BEING_COMPUTED": "Ihre Route wird berechnet",
|
||||
"NO_ROUTE_FOUND": "Keine Route hierher möglich"
|
||||
"NO_ROUTE_FOUND": "Keine Route hierher möglich",
|
||||
// directions
|
||||
"N": "Norden",
|
||||
"O": "Ost",
|
||||
"S": "Süden",
|
||||
"W": "Westen",
|
||||
"NO": "Nordost",
|
||||
"SO": "Südost",
|
||||
"SW": "Südwest",
|
||||
"NW": "Nordwest"
|
||||
};
|
||||
|
||||
|
||||
@ -98,5 +107,14 @@ OSRM.Localization["en"] = {
|
||||
"DISTANCE": "Distance",
|
||||
"DURATION": "Duration",
|
||||
"YOUR_ROUTE_IS_BEING_COMPUTED": "Your route is being computed",
|
||||
"NO_ROUTE_FOUND": "No route possible"
|
||||
"NO_ROUTE_FOUND": "No route possible",
|
||||
// directions
|
||||
"N": "north",
|
||||
"E": "east",
|
||||
"S": "south",
|
||||
"W": "west",
|
||||
"NE": "northeast",
|
||||
"SE": "southeast",
|
||||
"SW": "southwest",
|
||||
"NW": "northwest"
|
||||
};
|
||||
@ -26,6 +26,7 @@ OSRM.Marker = function( label, style, position ) {
|
||||
|
||||
this.marker = new L.MouseMarker( this.position, style );
|
||||
this.marker.parent = this;
|
||||
this.dirty = true;
|
||||
|
||||
this.shown = false;
|
||||
this.hint = undefined;
|
||||
@ -106,6 +107,7 @@ onClick: function(e) {
|
||||
my_markers.highlight.hide();
|
||||
},
|
||||
onDrag: function(e) {
|
||||
this.parent.dirty = true;
|
||||
this.parent.setPosition( e.target.getLatLng() );
|
||||
if(OSRM.dragging == true) // TODO: hack that deals with drag events after dragend event
|
||||
getRoute(OSRM.NO_DESCRIPTION);
|
||||
|
||||
@ -135,6 +135,12 @@ OSRM.extend( OSRM.Route,{
|
||||
this._current_route.hide();
|
||||
this._unnamed_route.hide();
|
||||
},
|
||||
hideAll: function() {
|
||||
this._current_route.hide();
|
||||
this._unnamed_route.hide();
|
||||
this._old_route.hide();
|
||||
this._noroute = OSRM.Route.ROUTE;
|
||||
},
|
||||
|
||||
showUnnamedRoute: function(positions) {
|
||||
this._unnamed_route.clearRoutes();
|
||||
|
||||
@ -27,9 +27,9 @@ OSRM.TARGET_MARKER_LABEL = "target";
|
||||
|
||||
// update geo coordinates in input boxes
|
||||
function updateLocation(marker_id) {
|
||||
if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
|
||||
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty == true ) {
|
||||
document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
|
||||
} else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
|
||||
} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty == true) {
|
||||
document.getElementById("input-target-name").value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6) + ", " + my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);
|
||||
}
|
||||
}
|
||||
@ -40,8 +40,7 @@ function callGeocoder(marker_id, query) {
|
||||
//geo coordinates given -> go directly to drawing results
|
||||
if(query.match(/^\s*[-+]?[0-9]*\.?[0-9]+\s*[,;]\s*[-+]?[0-9]*\.?[0-9]+\s*$/)){
|
||||
var coord = query.split(/[,;]/);
|
||||
onclickGeocoderResult(marker_id, coord[0], coord[1]);
|
||||
// updateReverseGeocoder(marker_id);
|
||||
onclickGeocoderResult(marker_id, coord[0], coord[1], true);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -57,15 +56,20 @@ function callGeocoder(marker_id, query) {
|
||||
|
||||
|
||||
// helper function for clicks on geocoder search results
|
||||
function onclickGeocoderResult(marker_id, lat, lon) {
|
||||
function onclickGeocoderResult(marker_id, lat, lon, do_reverse_geocode ) {
|
||||
var index;
|
||||
if( marker_id == OSRM.SOURCE_MARKER_LABEL )
|
||||
index = my_markers.setSource( new L.LatLng(lat, lon) );
|
||||
else if( marker_id == OSRM.TARGET_MARKER_LABEL )
|
||||
index = my_markers.setTarget( new L.LatLng(lat, lon) );
|
||||
else
|
||||
index = -1; // search via positions not yet implemented
|
||||
index = -1; // via nodes not yet implemented
|
||||
|
||||
if( do_reverse_geocode == true )
|
||||
updateReverseGeocoder(marker_id);
|
||||
else
|
||||
my_markers.route[index].dirty = false;
|
||||
|
||||
my_markers.route[index].show();
|
||||
my_markers.route[index].centerView();
|
||||
getRoute(OSRM.FULL_DESCRIPTION);
|
||||
@ -81,7 +85,7 @@ function showGeocoderResults(marker_id, response) {
|
||||
showGeocoderResults_Empty(marker_id);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var html = "";
|
||||
html += '<table class="results-table">';
|
||||
for(var i=0; i < response.length; i++){
|
||||
@ -123,72 +127,60 @@ function showGeocoderResults_Timeout() {
|
||||
}
|
||||
|
||||
|
||||
// - [upcoming feature: reverse geocoding] -
|
||||
//OSRM.REVERSE_GEOCODE_POST = 'http://nominatim.openstreetmap.org/reverse?format=json';
|
||||
//
|
||||
//function updateReverseGeocoder(marker_id) {
|
||||
// if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
|
||||
// document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
|
||||
// callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
|
||||
// } else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
|
||||
// document.getElementById("input-target-name").value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6) + ", " + my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);
|
||||
// callReverseGeocoder("target", my_markers.route[my_markers.route.length-1].getPosition().lat, my_markers.route[my_markers.route.length-1].getPosition().lng);
|
||||
// }
|
||||
//}
|
||||
//function updateLocations() {
|
||||
// if( my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL) {
|
||||
// document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
|
||||
// callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
|
||||
// //OSRM.debug.log("[call1] reverse geocoder");
|
||||
// }
|
||||
//
|
||||
// if( my_markers.route[my_markers.route.length-1] && my_markers.route[ my_markers.route.length-1 ].label == OSRM.TARGET_MARKER_LABEL) {
|
||||
// document.getElementById("input-target-name").value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6) + ", " + my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);
|
||||
// callReverseGeocoder("target", my_markers.route[my_markers.route.length-1].getPosition().lat, my_markers.route[my_markers.route.length-1].getPosition().lng);
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//
|
||||
//function timeout_ReverseGeocoder() {
|
||||
// //OSRM.debug.log("[timeout] reverse geocoder");
|
||||
//}
|
||||
//
|
||||
////prepare request and call reverse geocoder
|
||||
//function callReverseGeocoder(marker_id, lat, lon) {
|
||||
// //build request
|
||||
// if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
|
||||
// var src= OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
|
||||
// OSRM.JSONP.call( src, showReverseGeocoderResults_Source, timeout_ReverseGeocoder, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_source" );
|
||||
// //OSRM.debug.log("[call2] reverse geocoder");
|
||||
// } else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
|
||||
// var src = OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
|
||||
// OSRM.JSONP.call( src, showReverseGeocoderResults_Target, timeout_ReverseGeocoder, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_target" );
|
||||
// }
|
||||
//}
|
||||
////processing JSONP response of reverse geocoder
|
||||
////(with wrapper functions for source/target jsonp)
|
||||
//function showReverseGeocoderResults_Source(response) { showReverseGeocoderResults(OSRM.SOURCE_MARKER_LABEL, response); }
|
||||
//function showReverseGeocoderResults_Target(response) { showReverseGeocoderResults(OSRM.TARGET_MARKER_LABEL, response); }
|
||||
//function showReverseGeocoderResults(marker_id, response) {
|
||||
// //OSRM.debug.log("[inner] reverse geocoder");
|
||||
// if(response){
|
||||
// if(response.address == undefined)
|
||||
// return;
|
||||
//
|
||||
// var address = "";
|
||||
// if( response.address.road)
|
||||
// address += response.address.road;
|
||||
// if( response.address.city) {
|
||||
// if( response.address.road)
|
||||
// address += ", ";
|
||||
// address += response.address.city;
|
||||
// }
|
||||
// if( address == "" )
|
||||
// return;
|
||||
//
|
||||
// if(marker_id == OSRM.SOURCE_MARKER_LABEL)
|
||||
// document.getElementById("input-source-name").value = address;
|
||||
// else if(marker_id == OSRM.TARGET_MARKER_LABEL)
|
||||
// document.getElementById("input-target-name").value = address;
|
||||
// }
|
||||
//}
|
||||
// - [upcoming feature: reverse geocoding (untested) ] -
|
||||
OSRM.REVERSE_GEOCODE_POST = 'http://nominatim.openstreetmap.org/reverse?format=json';
|
||||
|
||||
//update reverse geocoder informatiopn in input boxes
|
||||
function updateReverseGeocoder(marker_id) {
|
||||
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty == true ) {
|
||||
document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
|
||||
callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
|
||||
} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty == true) {
|
||||
document.getElementById("input-target-name").value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6) + ", " + my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);
|
||||
callReverseGeocoder("target", my_markers.route[my_markers.route.length-1].getPosition().lat, my_markers.route[my_markers.route.length-1].getPosition().lng);
|
||||
}
|
||||
}
|
||||
|
||||
//prepare request and call reverse geocoder
|
||||
function callReverseGeocoder(marker_id, lat, lon) {
|
||||
//build request
|
||||
if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
|
||||
var src= OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
|
||||
OSRM.JSONP.call( src, showReverseGeocoderResults_Source, showReverseGeocoderResults_Timeout, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_source" );
|
||||
} else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
|
||||
var src = OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
|
||||
OSRM.JSONP.call( src, showReverseGeocoderResults_Target, showReverseGeocoderResults_Timeout, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_target" );
|
||||
}
|
||||
}
|
||||
//processing JSONP response of reverse geocoder
|
||||
//(with wrapper functions for source/target jsonp)
|
||||
function showReverseGeocoderResults_Timeout() {}
|
||||
function showReverseGeocoderResults_Source(response) { showReverseGeocoderResults(OSRM.SOURCE_MARKER_LABEL, response); }
|
||||
function showReverseGeocoderResults_Target(response) { showReverseGeocoderResults(OSRM.TARGET_MARKER_LABEL, response); }
|
||||
function showReverseGeocoderResults(marker_id, response) {
|
||||
//OSRM.debug.log("[inner] reverse geocoder");
|
||||
if(response){
|
||||
if(response.address == undefined)
|
||||
return;
|
||||
|
||||
var address = "";
|
||||
if( response.address.road)
|
||||
address += response.address.road;
|
||||
if( response.address.city) {
|
||||
if( response.address.road)
|
||||
address += ", ";
|
||||
address += response.address.city;
|
||||
}
|
||||
if( address == "" )
|
||||
return;
|
||||
|
||||
if(marker_id == OSRM.SOURCE_MARKER_LABEL) {
|
||||
document.getElementById("input-source-name").value = address;
|
||||
my_markers.route[0].dirty = false;
|
||||
} else if(marker_id == OSRM.TARGET_MARKER_LABEL) {
|
||||
document.getElementById("input-target-name").value = address;
|
||||
my_markers.route[my_markers.route.length-1].dirty = false;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -260,6 +260,16 @@ html, body, #map {
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
.result-distance
|
||||
{
|
||||
text-align:right;
|
||||
vertical-align: middle;
|
||||
width:30px;
|
||||
padding-left:1px;
|
||||
padding-right:1px;
|
||||
padding-top:1px;
|
||||
padding-bottom:1px;
|
||||
}
|
||||
.result-item
|
||||
{
|
||||
cursor:pointer;
|
||||
|
||||
@ -157,7 +157,7 @@ function initMap() {
|
||||
my_markers.route[index].centerView(false);
|
||||
getRoute(OSRM.FULL_DESCRIPTION);
|
||||
updateLocation("source");
|
||||
// updateReverseGeocoder("source");
|
||||
updateReverseGeocoder("source");
|
||||
}
|
||||
else if( !my_markers.route[my_markers.route.length-1] || my_markers.route[ my_markers.route.length-1 ].label != OSRM.TARGET_MARKER_LABEL) {
|
||||
index = my_markers.setTarget( e.latlng );
|
||||
@ -165,7 +165,7 @@ function initMap() {
|
||||
my_markers.route[index].centerView(false);
|
||||
getRoute(OSRM.FULL_DESCRIPTION);
|
||||
updateLocation("target");
|
||||
// updateReverseGeocoder("target");
|
||||
updateReverseGeocoder("target");
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
@ -126,10 +126,11 @@ function onClickCreateShortcut(src){
|
||||
OSRM.JSONP.call(OSRM.DEFAULTS.HOST_SHORTENER_URL+src+'&jsonp=showRouteLink', showRouteLink, showRouteLink_TimeOut, 2000, 'shortener');
|
||||
}
|
||||
function showRouteLink(response){
|
||||
document.getElementById('route-link').innerHTML = '[<a id="gpx-link" href="' +response.ShortURL+ '">'+OSRM.loc("LINK_TO_ROUTE")+'</a>]';
|
||||
document.getElementById('route-prelink').innerHTML = '[<a id="gpx-link" class = "text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]';
|
||||
//document.getElementById('route-prelink').innerHTML = '[<a id="gpx-link" href="' +response.ShortURL+ '">'+OSRM.loc("LINK_TO_ROUTE")+'</a>]';
|
||||
}
|
||||
function showRouteLink_TimeOut(){
|
||||
document.getElementById('route-link').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';
|
||||
document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']';
|
||||
}
|
||||
function showRouteDescription(response) {
|
||||
// compute query string
|
||||
@ -138,8 +139,8 @@ function showRouteDescription(response) {
|
||||
query_string += '&loc=' + my_markers.route[i].getLat() + ',' + my_markers.route[i].getLng();
|
||||
|
||||
// create link to the route
|
||||
var route_link ='<span class="route-summary" id="route-link">[<a id="gpx-link" onclick="onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK")+'</a>]</span>';
|
||||
//var route_link ='<span class="route-summary" id="route-link">[<a id="gpx-link" href="#" onclick="onClickCreateShortcut(\'' + document.URL + query_string + '\')">'+OSRM.loc("GET_LINK")+'</a>]</span>';
|
||||
var route_link ='<span class="route-summary" id="route-prelink">[<a id="gpx-link" onclick="onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK")+'</a>]</span>';
|
||||
//var route_link ='<span class="route-summary" id="route-prelink">[<a id="gpx-link" href="#" onclick="onClickCreateShortcut(\'' + document.URL + query_string + '\')">'+OSRM.loc("GET_LINK")+'</a>]</span>';
|
||||
|
||||
// create GPX link
|
||||
var gpx_link = '<span class="route-summary">[<a id="gpx-link" onClick="javascript: document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]</span>';
|
||||
@ -160,28 +161,36 @@ function showRouteDescription(response) {
|
||||
route_desc += "</td>";
|
||||
|
||||
route_desc += '<td class="result-items">';
|
||||
route_desc += '<span class="result-item" onclick="onClickRouteDescription('+response.route_instructions[i][3]+')">'
|
||||
+ response.route_instructions[i][0] + ' on ';
|
||||
if( response.route_instructions[i][2] > 0 )
|
||||
route_desc += response.route_instructions[i][1] + ' for '
|
||||
+ getDistanceWithUnit(response.route_instructions[i][2])
|
||||
+ '</span>';
|
||||
route_desc += '<span class="result-item" onclick="onClickRouteDescription('+response.route_instructions[i][3]+')">';
|
||||
route_desc += response.route_instructions[i][0];
|
||||
if( i == 0 )
|
||||
route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] );
|
||||
if( response.route_instructions[i][1] != "" ) {
|
||||
route_desc += ' on ';
|
||||
route_desc += '<b>' + response.route_instructions[i][1] + '</b>';
|
||||
}
|
||||
//route_desc += ' for ';
|
||||
route_desc += '</span>';
|
||||
route_desc += "</td>";
|
||||
|
||||
route_desc += '<td class="result-distance">';
|
||||
route_desc += '<b>'+getDistanceWithUnit(response.route_instructions[i][2])+'</b>';
|
||||
route_desc += "</td>";
|
||||
|
||||
route_desc += "</tr>";
|
||||
}
|
||||
}
|
||||
|
||||
route_desc += '</table>';
|
||||
headline = "";
|
||||
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
|
||||
headline += '<div style="float:left;width:70%">';
|
||||
headline += '<div style="float:left;width:50%">';
|
||||
headline += "<span class='route-summary'>"
|
||||
+ OSRM.loc("DISTANCE")+": " + getDistanceWithUnit(response.route_summary.total_distance)
|
||||
+ " - "
|
||||
+ OSRM.loc("DURATION")+": " + secondsToTime(response.route_summary.total_time)
|
||||
+ "</span>";
|
||||
headline += '</div>';
|
||||
headline += '<div style="float:left;text-align:right;width:30%;">'+route_link+'<br>'+gpx_link+'</div>';
|
||||
headline += '<div style="float:left;text-align:right;width:50%;">'+route_link+'<br>'+gpx_link+'</div>';
|
||||
|
||||
var output = "";
|
||||
output += route_desc;
|
||||
@ -408,7 +417,7 @@ function getDirectionIcon(name) {
|
||||
|
||||
// click: button "route"
|
||||
function startRouting() {
|
||||
my_route.hideRoute();
|
||||
my_route.hideAll();
|
||||
my_markers.removeAll();
|
||||
my_markers.highlight.hide();
|
||||
|
||||
@ -426,7 +435,7 @@ function resetRouting() {
|
||||
document.getElementById('input-source-name').value = "";
|
||||
document.getElementById('input-target-name').value = "";
|
||||
|
||||
my_route.hideRoute();
|
||||
my_route.hideAll();
|
||||
my_markers.removeAll();
|
||||
my_markers.highlight.hide();
|
||||
|
||||
|
||||
@ -36,18 +36,18 @@ function secondsToTime(seconds){
|
||||
hours = parseInt(minutes/60);
|
||||
minutes = minutes%60;
|
||||
if(hours==0){
|
||||
return minutes+' min';
|
||||
return minutes + ' ' + 'min';
|
||||
}
|
||||
else{
|
||||
return hours+' h '+minutes+' min';
|
||||
return hours + ' ' + 'h' + ' ' + minutes + ' ' + 'min';
|
||||
}
|
||||
}
|
||||
|
||||
// human readable distance
|
||||
function getDistanceWithUnit(distance){
|
||||
distance = parseInt(distance);
|
||||
if(distance >= 1000){ return (parseInt(distance/1000))+' km'; }
|
||||
else{ return distance+' m'; }
|
||||
if(distance >= 1000){ return (parseInt(distance/1000))+' ' + 'km'; }
|
||||
else{ return distance+' ' + 'm'; }
|
||||
}
|
||||
|
||||
// ------------------------------------------------------
|
||||
|
||||
Loading…
Reference in New Issue
Block a user