- version bump to v0.1.1

- restructured buttons (route is gone, search is show) - added prefetching gui hide/show buttons - increased timeout to 5000ms - click highlight marker to hide it - boundary box on Europe when querying geocoder - added "reached your destination" display in route instructions - improved visual for route summary - when loading a stored route, source and target are named and the route is zoomed correctly - improved display results of reverse geocoder (ues village/country tags) - more consistent behaviour when displaying reverse geocoder results or geocoordinates - reverse geocoder now works at dragend - more consistent behaviour when leaving an input box - reversing a route when only one marker is set empties the result box
2012-03-16 15:06:43 +01:00 · 2012-03-16 15:06:43 +01:00 · 204189c326
commit 204189c326
parent acdfa546a8
10 changed files with 84 additions and 84 deletions
--- a/WebContent/OSRM.Localization.js
+++ b/WebContent/OSRM.Localization.js
@ -42,14 +42,13 @@ OSRM.Localization["de"] = {
 "GUI_START": "Start",
 "GUI_END": "Ziel",
 "GUI_RESET": "Reset",
-"GUI_SEARCH": "Suchen",
-"GUI_ROUTE": "Route",
+"GUI_SEARCH": "Zeigen",
 "GUI_REVERSE": "Umdrehen",
 "GUI_OPTIONS": "Optionen",
 "GUI_HIGHLIGHT_UNNAMED_ROADS": "Unbenannte Straßen hervorheben",
 "GUI_START_TOOLTIP": "Startposition eingeben",
 "GUI_END_TOOLTIP": "Zielposition eingeben",
-"GUI_LEGAL_NOTICE": "GUI2 v0.1 120313 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a>",
+"GUI_LEGAL_NOTICE": "GUI2 v0.1.1 120316 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a>",
 // geocoder
 "SEARCH_RESULTS": "Suchergebnisse",
 "TIMED_OUT": "Zeitüberschreitung",
@ -82,15 +81,14 @@ OSRM.Localization["en"] = {
 //gui
 "GUI_START": "Start",
 "GUI_END": "End",
-"GUI_RESET": "Reset",
-"GUI_SEARCH": "Search",
-"GUI_ROUTE": "Route",
+"GUI_RESET": "&nbsp;&nbsp;Reset&nbsp;&nbsp;",
+"GUI_SEARCH": "&nbsp;&nbsp;Show&nbsp;&nbsp;",
 "GUI_REVERSE": "Reverse",
 "GUI_OPTIONS": "Options",
 "GUI_HIGHLIGHT_UNNAMED_ROADS": "Highlight unnamed streets",
 "GUI_START_TOOLTIP": "Enter start",
 "GUI_END_TOOLTIP": "Enter destination",
-"GUI_LEGAL_NOTICE": "GUI2 v0.1 120313 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a>",
+"GUI_LEGAL_NOTICE": "GUI2 v0.1.1 120316 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a>",
 // geocoder
 "SEARCH_RESULTS": "Search Results",
 "TIMED_OUT": "Timed Out",
--- a/WebContent/OSRM.Markers.js
+++ b/WebContent/OSRM.Markers.js
@ -75,11 +75,16 @@ toString: function() {
 OSRM.HighlightMarker = function( label, style, position) {
 	OSRM.HighlightMarker.prototype.base.constructor.apply( this, arguments );
 	this.label = label ? label : "highlight_marker";
+	
+ 	this.marker.on( 'click', this.onClick );	
 };
 OSRM.inheritFrom( OSRM.HighlightMarker, OSRM.Marker );
 OSRM.extend( OSRM.HighlightMarker, {
 toString: function() {
 	return "OSRM.HighlightMarker: \""+this.label+"\", "+this.position+")";
+},
+onClick: function(e) {
+	this.parent.hide();
 }
 });

@ -143,6 +148,12 @@ onDragEnd: function(e) {
 	OSRM.dragging = false;
 	
 	updateLocation( this.parent.label );
+	if(my_route.isShown()==false) {
+		if(this.parent.label == "source")
+			updateReverseGeocoder("source");
+		else if(this.parent.label == "target")
+			updateReverseGeocoder("target");
+	}
 },
 toString: function() {
 	return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")";
--- a/WebContent/OSRM.base.js
+++ b/WebContent/OSRM.base.js
@ -19,7 +19,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 // [has to loaded before all other OSRM classes]

 OSRM = {};
-OSRM.VERSION = '0.1';
+OSRM.VERSION = '0.1.1';


 // inheritance helper function (convenience function)
--- a/WebContent/OSRM.config.js
+++ b/WebContent/OSRM.config.js
@ -22,7 +22,7 @@ OSRM.DEFAULTS = {
 	HOST_ROUTING_URL: 'http://router.project-osrm.org/viaroute',
 	HOST_SHORTENER_URL: 'http://map.project-osrm.org/shorten/',
 	WEBSITE_URL: document.URL.replace(/#*\?.*/i,""),
-	JSONP_TIMEOUT: 2000,
+	JSONP_TIMEOUT: 5000,
 	ZOOM_LEVEL: 14,
 	ONLOAD_LATITUDE: 48.84,
 	ONLOAD_LONGITUDE: 10.10,
--- a/WebContent/geocoder.js
+++ b/WebContent/geocoder.js
@ -20,7 +20,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 // [TODO: better separation of GUI and geocoding routines, reverse geocoding]

 // some constants
-OSRM.GEOCODE_POST = 'http://nominatim.openstreetmap.org/search?format=json';
+OSRM.GEOCODE_POST = 'http://nominatim.openstreetmap.org/search?format=json&bounded=1&viewbox=-27.0,72.0,46.0,36.0';
 OSRM.SOURCE_MARKER_LABEL = "source";
 OSRM.TARGET_MARKER_LABEL = "target";

@ -40,7 +40,9 @@ function callGeocoder(marker_id, query) {
 	if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty_move == false && my_markers.route[0].dirty_type == false)
 		return;
 	if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty_move == false && my_markers.route[my_markers.route.length-1].dirty_type == false)
-		return;	
+		return;
+	if(query=="")
+		return;
 	
 	//geo coordinates given -> go directly to drawing results
 	if(query.match(/^\s*[-+]?[0-9]*\.?[0-9]+\s*[,;]\s*[-+]?[0-9]*\.?[0-9]+\s*$/)){
@ -137,15 +139,15 @@ function showGeocoderResults_Timeout() {


 // - [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&bounded=1&viewbox=-27.0,72.0,46.0,36.0';

 //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);
+	if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.hasSource()==true) { //&& 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);
+	} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.hasTarget()==true) { //&& 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);
 	}
 }
@ -175,20 +177,28 @@ function showReverseGeocoderResults(marker_id, response) {
 		var address = "";
 		if( response.address.road)
 			address += response.address.road;	
-		if( response.address.city) {
-			if( response.address.road)
+		if( response.address.city ) {
+			if( address != "" )
 				address += ", ";
 			address += response.address.city;
+		} else if( response.address.village ) {
+			if( address != "" )
+				address += ", ";
+			address += response.address.village;
 		}
+		if( address == "" && response.address.country )
+			address += response.address.country;
 		if( address == "" )
 			return;
 		
 		if(marker_id == OSRM.SOURCE_MARKER_LABEL) {
 			document.getElementById("input-source-name").value = address;
-			//my_markers.route[0].dirty = false;
+			my_markers.route[0].dirty_move = false;
+			my_markers.route[0].dirty_type = 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;
+			my_markers.route[my_markers.route.length-1].dirty_move = false;
+			my_markers.route[my_markers.route.length-1].dirty_type = false;
 		}
 		
 	}
--- a/WebContent/images/markers.pdf
+++ b/WebContent/images/markers.pdf
--- a/WebContent/images/target.png
+++ b/WebContent/images/target.png
--- a/WebContent/main.html
+++ b/WebContent/main.html
@ -89,17 +89,13 @@ or see http://www.gnu.org/licenses/agpl.txt.
    <tr>
    <td id="gui-search-source-label">Start:</td>
    <td><input id="input-source-name" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" onchange="if( my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL) my_markers.route[0].dirty_type = true;" onblur="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);}" /></td>
-    <!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
-    <!-- <td class="right"><a class="button not-selectable" id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</a></td> -->
-    <td class="right"><a class="button not-selectable" id="gui-search-source" onclick="centerMarker('source')">Suchen</a></td>
+    <td class="right"><a class="button not-selectable" id="gui-search-source" onclick="centerMarker('source')">Zeigen</a></td>
    </tr>
    
    <tr>
    <td id="gui-search-target-label">Ende:</td>
    <td><input id="input-target-name" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" onchange="if( my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL) my_markers.route[my_markers.route.length-1].dirty_type = true;" onblur="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);}" /></td>
-    <!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
-	<!-- <td class="right"><a class="button not-selectable" id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);">Suchen</a></td> -->
-	<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="centerMarker('target');">Suchen</a></td>	
+	<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="centerMarker('target');">Zeigen</a></td>	
    </tr>
    </table>
    
@ -108,8 +104,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
    <table style="width:100%">
    <tr>
    <td>				<a class="button not-selectable" id="gui-reset" onclick="resetRouting();">Reset</a></td>
-    <td class="center">	<a class="button not-selectable" id="gui-reverse" onclick="reverseRouting();">Reverse</a></td>
-    <td class="right">	<a class="button not-selectable" id="gui-route" onclick="centerRoute();">Route</a></td>
+	<td class="right">	<a class="button not-selectable" id="gui-reverse" onclick="reverseRouting();">Umdrehen</a></td>
    </tr>
    </table>
    
@ -125,7 +120,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
 <div class="gui-box not-selectable" id="main-output">
 	<div id="information-box-headline"></div>
 	<div id="information-box"></div>
-	<div id="legal-notice">GUI2 v0.1 120313 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a></div>
+	<div id="legal-notice">GUI2 v0.1.1 120316 - OSRM hosting by <a href='http://algo2.iti.kit.edu/'>KIT</a> - Geocoder by <a href='http://www.osm.org/'>OSM</a></div>
 </div>

 </div>
--- a/WebContent/main.js
+++ b/WebContent/main.js
@ -41,9 +41,15 @@ function prefetchImages() {
 	var images = [	'images/marker-source.png',
 	              	'images/marker-target.png',
 	              	'images/marker-via.png',
-	              	'images/marker-highlight.png'
+	              	'images/marker-highlight.png',
+	              	'images/cancel.png',
+	              	'images/cancel_active.png',
+	              	'images/cancel_hover.png',
+	              	'images/restore.png',
+	              	'images/restore_active.png',
+	              	'images/restore_hover.png'
 	              ];
-	
+
 	for(var i=0; i<images.length; i++) {
 		OSRM.images[i] = new Image();
 		OSRM.images[i].src = images[i];
@ -67,7 +73,6 @@ function prefetchIcons() {

 // init localization
 function initLocale() {
-//	document.getElementById("gui-route").innerHTML = OSRM.loc("GUI_ROUTE");
 	document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
 	document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
 	document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
@ -152,21 +157,9 @@ function initMap() {
 	// click on map to set source and target nodes
 	map.on('click', function(e) {
 		if( !my_markers.route[0] || my_markers.route[0].label != OSRM.SOURCE_MARKER_LABEL) {
-//			index = my_markers.setSource( e.latlng );
-//			my_markers.route[index].show();
-//			my_markers.route[index].centerView(false);	
-//			getRoute(OSRM.FULL_DESCRIPTION);
-//			updateLocation("source");
-//			updateReverseGeocoder("source");
 			onclickGeocoderResult("source", e.latlng.lat, e.latlng.lng, true, false );
 		}
 		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 );
-//			my_markers.route[index].show();
-//			my_markers.route[index].centerView(false);	
-//			getRoute(OSRM.FULL_DESCRIPTION);
-//			updateLocation("target");
-//			updateReverseGeocoder("target");
 			onclickGeocoderResult("target", e.latlng.lat, e.latlng.lng, true, false );
 		}		
 	} );
@ -221,20 +214,24 @@ function checkURL(){
 	// case 2: locations given
 	if( positions != []) {
 		// draw via points
-		if( positions.length > 0)
-			my_markers.setSource( positions[0] );
-		if(positions.length > 1)
-			my_markers.setTarget( positions[positions.length-1] );		
+		if( positions.length > 0) {
+			onclickGeocoderResult("source", positions[0].lat, positions[0].lng, true, false );
+			//my_markers.setSource( positions[0] );
+		}
+		if(positions.length > 1) {
+			onclickGeocoderResult("target", positions[positions.length-1].lat, positions[positions.length-1].lng, true, false );
+			//my_markers.setTarget( positions[positions.length-1] );			
+		}
 		for(var i=1; i<positions.length-1;i++)
 			my_markers.setVia( i-1, positions[i] );
 		for(var i=0; i<my_markers.route.length;i++)
 			my_markers.route[i].show();
+		
+		// center on route
+		var bounds = new L.LatLngBounds( positions );
+		map.fitBounds( bounds );		
 			
 		// compute route
 		getRoute(OSRM.FULL_DESCRIPTION);
-			
-		// center on route
-		var bounds = new L.LatLngBounds( positions );
-		map.fitBounds( bounds );
 	}
-}
+}
--- a/WebContent/routing.js
+++ b/WebContent/routing.js
@ -172,6 +172,7 @@ function showRouteDescription(response) {
 		route_desc += "</td>";
 		
 		route_desc += '<td class="result-distance">';
+		if( i != response.route_instructions.length-1 )
 		route_desc += '<b>'+getDistanceWithUnit(response.route_instructions[i][2])+'</b>';
 		route_desc += "</td>";
 		
@ -200,7 +201,7 @@ function showRouteDescriptionSimple(response) {
 	headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
 	headline += "<span class='route-summary'>"
 			+ OSRM.loc("DISTANCE")+": " + getDistanceWithUnit(response.route_summary.total_distance)
-			+ " - "
+			+ "<br>"
 			+ OSRM.loc("DURATION")+": " + secondsToTime(response.route_summary.total_time)
 			+ "</span>";
 	headline += '<br><br>';
@ -212,7 +213,7 @@ function showNoRouteDescription() {
 	headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
 	headline += "<span class='route-summary'>"
 			+ OSRM.loc("DISTANCE")+": N/A"
-			+ " - "
+			+ "<br>"
 			+ OSRM.loc("DURATION")+": N/A"
 			+ "</span>";
 	headline += '<br><br>';
@ -374,8 +375,13 @@ function snapRoute() {
 	for(var i=0; i<via_points.length; i++)
 		my_markers.route[i+1].setPosition( new L.LatLng(via_points[i][0], via_points[i][1]) );

- 	updateLocation( "source" );
- 	updateLocation( "target" );
+// 	updateLocation( "source" );
+// 	updateLocation( "target" );
+	
+	//if(OSRM.dragid == 0 && my_markers.hasSource()==true)
+		updateReverseGeocoder("source");
+	//else if(OSRM.dragid == my_markers.route.length-1 && my_markers.hasTarget()==true)
+		updateReverseGeocoder("target"); 	
 }

 // map driving instructions to icons
@ -401,7 +407,8 @@ function getDirectionIcon(name) {
 		"Enter roundabout and leave at eighth exit":"round-about.png",
 		"Enter roundabout and leave at nineth exit":"round-about.png",
 		"Enter roundabout and leave at tenth exit":"round-about.png",
-		"Enter roundabout and leave at one of the too many exit":"round-about.png"
+		"Enter roundabout and leave at one of the too many exit":"round-about.png",
+		"You have reached your destination":"target.png"
 	};
 	
 	if( directions[name] )
@ -413,21 +420,6 @@ function getDirectionIcon(name) {

 // -- gui functions --

-// click: button "route"
-function startRouting() {
-	my_route.hideAll();
-	my_markers.removeAll();
-	my_markers.highlight.hide();
-
-	document.getElementById('information-box').innerHTML = "";
-	document.getElementById('information-box-headline').innerHTML = "";	
-	
-	callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);
-	callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);
-	//getRoute(OSRM.FULL_DESCRIPTION);	
-	//TODO: center map on route
-}
-
 // click: button "reset"
 function resetRouting() {
 	document.getElementById('input-source-name').value = "";
@ -467,12 +459,16 @@ function reverseRouting() {
 	}
 	
 	// recompute route
-	getRoute(OSRM.FULL_DESCRIPTION);
-	my_markers.highlight.hide();
+	if( my_route.isShown() ) {
+		getRoute(OSRM.FULL_DESCRIPTION);
+		my_markers.highlight.hide();
+	} else {
+		document.getElementById('information-box').innerHTML = "";
+		document.getElementById('information-box-headline').innerHTML = "";		
+	}
 }

-
-// click: button "search"
+// click: button "show"
 function centerMarker(marker_id) {
 	if( marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL && !my_markers.route[0].dirty_type ) {
 		my_markers.route[0].centerView();
@ -480,10 +476,3 @@ function centerMarker(marker_id) {
 		my_markers.route[my_markers.route.length-1].centerView();
 	}
 }
-
-
-// click: button "route"
-function centerRoute() {
-	if( my_route.isShown() )
-		my_route.centerView();
-}