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)

WebContent/OSRM.Localization.js

@@ -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"
 };

WebContent/OSRM.Markers.js

@@ -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);

WebContent/OSRM.Route.js

@@ -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();

WebContent/geocoder.js

@@ -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]);
+		onclickGeocoderResult(marker_id, coord[0], coord[1], true);
-//		updateReverseGeocoder(marker_id);
 		return;
 	}
 	
@@ -57,14 +56,19 @@ 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();	
@@ -123,72 +127,60 @@ function showGeocoderResults_Timeout() {
 }
 
 
-// - [upcoming feature: reverse geocoding] -
+// - [upcoming feature: reverse geocoding (untested) ] -
-//OSRM.REVERSE_GEOCODE_POST = 'http://nominatim.openstreetmap.org/reverse?format=json';
+OSRM.REVERSE_GEOCODE_POST = 'http://nominatim.openstreetmap.org/reverse?format=json';
-//
+
-//function updateReverseGeocoder(marker_id) {
+//update reverse geocoder informatiopn in input boxes
-//	if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
+function updateReverseGeocoder(marker_id) {
-//		document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
+	if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty == true ) {
-//		callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
+		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) {
+		callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
-//		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);
+	} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty == true) {
-//		callReverseGeocoder("target", my_markers.route[my_markers.route.length-1].getPosition().lat, my_markers.route[my_markers.route.length-1].getPosition().lng);
+		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);
+//prepare request and call reverse geocoder
-//		callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
+function callReverseGeocoder(marker_id, lat, lon) {
-//		//OSRM.debug.log("[call1] reverse geocoder");
+	//build request
-//	}
+	if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
-//	
+		var src= OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
-//	if( my_markers.route[my_markers.route.length-1] && my_markers.route[ my_markers.route.length-1 ].label == OSRM.TARGET_MARKER_LABEL) {
+		OSRM.JSONP.call( src, showReverseGeocoderResults_Source, showReverseGeocoderResults_Timeout, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_source" );
-//		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);
+	} else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
-//		callReverseGeocoder("target", my_markers.route[my_markers.route.length-1].getPosition().lat, my_markers.route[my_markers.route.length-1].getPosition().lng);
+		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
-//function timeout_ReverseGeocoder() {
+//(with wrapper functions for source/target jsonp)
-//	//OSRM.debug.log("[timeout] reverse geocoder");
+function showReverseGeocoderResults_Timeout() {}
-//}
+function showReverseGeocoderResults_Source(response) {	showReverseGeocoderResults(OSRM.SOURCE_MARKER_LABEL, response); }
-//
+function showReverseGeocoderResults_Target(response) {	showReverseGeocoderResults(OSRM.TARGET_MARKER_LABEL, response); }
-////prepare request and call reverse geocoder
+function showReverseGeocoderResults(marker_id, response) {
-//function callReverseGeocoder(marker_id, lat, lon) {
+	//OSRM.debug.log("[inner] reverse geocoder");
-//	//build request
+	if(response){
-//	if (marker_id == OSRM.SOURCE_MARKER_LABEL) {
+		if(response.address == undefined)
-//		var src= OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
+			return;
-//		OSRM.JSONP.call( src, showReverseGeocoderResults_Source, timeout_ReverseGeocoder, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_source" );
+
-//		//OSRM.debug.log("[call2] reverse geocoder");
+		var address = "";
-//	} else if (marker_id == OSRM.TARGET_MARKER_LABEL) {
+		if( response.address.road)
-//		var src = OSRM.REVERSE_GEOCODE_POST + "&lat=" + lat + "&lon=" + lon;
+			address += response.address.road;	
-//		OSRM.JSONP.call( src, showReverseGeocoderResults_Target, timeout_ReverseGeocoder, OSRM.DEFAULTS.JSONP_TIMEOUT, "reverse_geocoder_target" );
+		if( response.address.city) {
-//	}
+			if( response.address.road)
-//}
+				address += ", ";
-////processing JSONP response of reverse geocoder
+			address += response.address.city;
-////(with wrapper functions for source/target jsonp)
+		}
-//function showReverseGeocoderResults_Source(response) {	showReverseGeocoderResults(OSRM.SOURCE_MARKER_LABEL, response); }
+		if( address == "" )
-//function showReverseGeocoderResults_Target(response) {	showReverseGeocoderResults(OSRM.TARGET_MARKER_LABEL, response); }
+			return;
-//function showReverseGeocoderResults(marker_id, response) {
+		
-//	//OSRM.debug.log("[inner] reverse geocoder");
+		if(marker_id == OSRM.SOURCE_MARKER_LABEL) {
-//	if(response){
+			document.getElementById("input-source-name").value = address;
-//		if(response.address == undefined)
+			my_markers.route[0].dirty = false;
-//			return;
+		} else if(marker_id == OSRM.TARGET_MARKER_LABEL) {
-//
+			document.getElementById("input-target-name").value = address;
-//		var address = "";
+			my_markers.route[my_markers.route.length-1].dirty = false;
-//		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;
-//	}
-//}

WebContent/main.css

@@ -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;

WebContent/main.js

@@ -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");
 		}		
 	} );
 }

WebContent/routing.js

@@ -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-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-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" 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,12 +161,20 @@ 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]+')">'
+		route_desc += '<span class="result-item" onclick="onClickRouteDescription('+response.route_instructions[i][3]+')">';
-						+ response.route_instructions[i][0] + ' on ';
+		route_desc += response.route_instructions[i][0];
-		if( response.route_instructions[i][2] > 0 )
+		if( i == 0 )
-			route_desc += response.route_instructions[i][1] + ' for '
+			route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] );		
-						+ getDistanceWithUnit(response.route_instructions[i][2])
+		if( response.route_instructions[i][1] != "" ) {
-						+ '</span>';
+			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>";
@@ -174,14 +183,14 @@ function showRouteDescription(response) {
 	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();
 	

WebContent/utils.js

@@ -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 + '&nbsp' + 'h' + ' ' + minutes + ' ' + 'min';
    }
 }
 
 // human readable distance
 function getDistanceWithUnit(distance){
 	distance = parseInt(distance);
-	if(distance >= 1000){ return (parseInt(distance/1000))+' km'; }
+	if(distance >= 1000){ return (parseInt(distance/1000))+' ' + 'km'; }
-	else{ return distance+' m'; }
+	else{ return distance+' ' + 'm'; }
 }
 
 // ------------------------------------------------------