From 700206099b78035f320a1dee52945641f146c9d6 Mon Sep 17 00:00:00 2001 From: DennisSchiefer Date: Thu, 15 Mar 2012 13:29:28 +0100 Subject: [PATCH] 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 | 22 ++++- WebContent/OSRM.Markers.js | 2 + WebContent/OSRM.Route.js | 6 ++ WebContent/geocoder.js | 144 +++++++++++++++----------------- WebContent/main.css | 10 +++ WebContent/main.js | 4 +- WebContent/routing.js | 39 +++++---- WebContent/utils.js | 8 +- 8 files changed, 136 insertions(+), 99 deletions(-) diff --git a/WebContent/OSRM.Localization.js b/WebContent/OSRM.Localization.js index 2e08c1c76..8d95896a8 100644 --- a/WebContent/OSRM.Localization.js +++ b/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" }; \ No newline at end of file diff --git a/WebContent/OSRM.Markers.js b/WebContent/OSRM.Markers.js index 500284eee..96bb97f3d 100644 --- a/WebContent/OSRM.Markers.js +++ b/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); diff --git a/WebContent/OSRM.Route.js b/WebContent/OSRM.Route.js index 587b8379b..6c7db4395 100644 --- a/WebContent/OSRM.Route.js +++ b/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(); diff --git a/WebContent/geocoder.js b/WebContent/geocoder.js index 6b08907b5..835b4ba67 100644 --- a/WebContent/geocoder.js +++ b/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]); -// 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 += ''; 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; + } + + } +} diff --git a/WebContent/main.css b/WebContent/main.css index eaf6fba2a..dfb7a8d72 100644 --- a/WebContent/main.css +++ b/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; diff --git a/WebContent/main.js b/WebContent/main.js index 8ecc709d1..127641c5d 100644 --- a/WebContent/main.js +++ b/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"); } } ); } diff --git a/WebContent/routing.js b/WebContent/routing.js index e7c1f9727..cd430a8bd 100644 --- a/WebContent/routing.js +++ b/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 = '['+OSRM.loc("LINK_TO_ROUTE")+']'; + document.getElementById('route-prelink').innerHTML = '['+response.ShortURL+']'; + //document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE")+']'; } 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 ='['+OSRM.loc("GET_LINK")+']'; - //var route_link ='['+OSRM.loc("GET_LINK")+']'; + var route_link ='['+OSRM.loc("GET_LINK")+']'; + //var route_link ='['+OSRM.loc("GET_LINK")+']'; // create GPX link var gpx_link = '['+OSRM.loc("GPX_FILE")+']'; @@ -160,28 +161,36 @@ function showRouteDescription(response) { route_desc += ""; route_desc += '"; + + route_desc += '"; route_desc += ""; - } + } route_desc += '
'; - route_desc += '' - + 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]) - + ''; + route_desc += ''; + 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 += '' + response.route_instructions[i][1] + ''; + } + //route_desc += ' for '; + route_desc += ''; + route_desc += "'; + route_desc += ''+getDistanceWithUnit(response.route_instructions[i][2])+''; route_desc += "
'; headline = ""; headline += OSRM.loc("ROUTE_DESCRIPTION")+":
"; - headline += '
'; + headline += '
'; headline += "" + OSRM.loc("DISTANCE")+": " + getDistanceWithUnit(response.route_summary.total_distance) + " - " + OSRM.loc("DURATION")+": " + secondsToTime(response.route_summary.total_time) + ""; headline += '
'; - headline += '
'+route_link+'
'+gpx_link+'
'; + headline += '
'+route_link+'
'+gpx_link+'
'; 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(); diff --git a/WebContent/utils.js b/WebContent/utils.js index b45f9be62..405cb1377 100644 --- a/WebContent/utils.js +++ b/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 + ' ' + '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'; } } // ------------------------------------------------------