diff --git a/WebContent/OSRM.GUI.js b/WebContent/OSRM.GUI.js index f6ffe6203..797b482eb 100644 --- a/WebContent/OSRM.GUI.js +++ b/WebContent/OSRM.GUI.js @@ -30,8 +30,36 @@ init: function() { OSRM.GUI.visible = true; OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth; - document.getElementById('input-source-name').value = OSRM.DEFAULTS.ONLOAD_SOURCE; - document.getElementById('input-target-name').value = OSRM.DEFAULTS.ONLOAD_TARGET; + // init events + // [TODO: switch to new event model] + document.getElementById("gui-toggle-in").onclick = OSRM.GUI.toggleMain; + document.getElementById("gui-toggle-out").onclick = OSRM.GUI.toggleMain; + document.getElementById("gui-printer").onclick = OSRM.Printing.print; + + document.getElementById("gui-input-source").onchange = function() {OSRM.RoutingGUI.inputChanged(OSRM.C.SOURCE_LABEL);}; + document.getElementById("gui-input-source").onkeyup = function(e) {OSRM.RoutingGUI.keyUp(e,OSRM.C.SOURCE_LABEL);}; + document.getElementById("gui-delete-source").onclick = function() {OSRM.RoutingGUI.deleteMarker(OSRM.C.SOURCE_LABEL);}; + document.getElementById("gui-search-source").onclick = function() {OSRM.RoutingGUI.showMarker(OSRM.C.SOURCE_LABEL);}; + + document.getElementById("gui-input-target").onchange = function() {OSRM.RoutingGUI.inputChanged(OSRM.C.TARGET_LABEL);}; + document.getElementById("gui-input-target").onkeyup = function(e) {OSRM.RoutingGUI.keyUp(e,OSRM.C.TARGET_LABEL);}; + document.getElementById("gui-delete-target").onclick = function() {OSRM.RoutingGUI.deleteMarker(OSRM.C.TARGET_LABEL);}; + document.getElementById("gui-search-target").onclick = function() {OSRM.RoutingGUI.showMarker(OSRM.C.TARGET_LABEL);}; + + document.getElementById("gui-reset").onclick = OSRM.RoutingGUI.resetRouting; + document.getElementById("gui-reverse").onclick = OSRM.RoutingGUI.reverseRouting; + document.getElementById("gui-options-toggle").onclick = OSRM.GUI.toggleOptions; + document.getElementById("open-josm").onclick = OSRM.RoutingGUI.openJOSM; + document.getElementById("open-osmbugs").onclick = OSRM.RoutingGUI.openOSMBugs; + document.getElementById("option-highlight-nonames").onclick = OSRM.Routing.getRoute; + + // gui after transition events + if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) { + document.getElementById('main-wrapper').addEventListener("transitionend", OSRM.GUI.onMainTransitionEnd, false); + document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false); + document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false); + document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false); + } }, // set language dependent labels @@ -41,14 +69,17 @@ setLanguage: function() { 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"); - document.getElementById("options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS"); + document.getElementById("gui-options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS"); document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH"); document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH"); document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":"; document.getElementById("gui-search-target-label").innerHTML = OSRM.loc("GUI_END")+":"; - document.getElementById("input-source-name").title = OSRM.loc("GUI_START_TOOLTIP"); - document.getElementById("input-target-name").title = OSRM.loc("GUI_END_TOOLTIP"); + document.getElementById("gui-input-source").title = OSRM.loc("GUI_START_TOOLTIP"); + document.getElementById("gui-input-target").title = OSRM.loc("GUI_END_TOOLTIP"); document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE"); + + document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE; + document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET; }, // show/hide main-gui @@ -68,15 +99,9 @@ toggleMain: function() { document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px"; } - // execute after animation - if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) { - document.getElementById('main-wrapper').addEventListener("transitionend", OSRM.GUI.onMainTransitionEnd, false); - document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false); - document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false); - document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false); - } else { + // execute after animation (old browser support) + if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 ) OSRM.GUI.onMainTransitionEnd(); - } }, // do stuff after main-gui animation finished @@ -102,4 +127,4 @@ toggleOptions: function() { } } -}; \ No newline at end of file +}; diff --git a/WebContent/OSRM.Geocoder.js b/WebContent/OSRM.Geocoder.js index 6896d702c..4331b3e9a 100644 --- a/WebContent/OSRM.Geocoder.js +++ b/WebContent/OSRM.Geocoder.js @@ -60,7 +60,8 @@ _onclickResult: function(marker_id, lat, lon) { OSRM.G.markers.route[index].show(); OSRM.G.markers.route[index].centerView(); - OSRM.Routing.getRoute(); + if( OSRM.G.markers.route.length > 1 ) + OSRM.Routing.getRoute(); }, @@ -76,9 +77,14 @@ _showResults: function(response, parameters) { return; } + // show first result + OSRM.Geocoder._onclickResult(parameters.marker_id, response[0].lat, response[0].lon); + if( OSRM.G.markers.route.length > 1 ) + return; + // show possible results for input var html = ""; - html += ''; + html += '
'; for(var i=0; i < response.length; i++){ var result = response[i]; @@ -97,23 +103,27 @@ _showResults: function(response, parameters) { } html += '
'; - document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":"; + document.getElementById('information-box-header').innerHTML = + "
"+OSRM.loc("SEARCH_RESULTS")+"
" + + "
(found "+response.length+" results)"+"
"; document.getElementById('information-box').innerHTML = html; - - OSRM.Geocoder._onclickResult(parameters.marker_id, response[0].lat, response[0].lon); }, _showResults_Empty: function(parameters) { - document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":"; + document.getElementById('information-box-header').innerHTML = + "
"+OSRM.loc("SEARCH_RESULTS")+"
" + + "
(found 0 results)"+"
"; if(parameters.marker_id == OSRM.C.SOURCE_LABEL) - document.getElementById('information-box').innerHTML = "

"+OSRM.loc("NO_RESULTS_FOUND_SOURCE")+": "+parameters.query +".

"; + document.getElementById('information-box').innerHTML = "

"+OSRM.loc("NO_RESULTS_FOUND_SOURCE")+": "+parameters.query +"
"; else if(parameters.marker_id == OSRM.C.TARGET_LABEL) - document.getElementById('information-box').innerHTML = "

"+OSRM.loc("NO_RESULTS_FOUND_TARGET")+": "+parameters.query +".

"; + document.getElementById('information-box').innerHTML = "

"+OSRM.loc("NO_RESULTS_FOUND_TARGET")+": "+parameters.query +"
"; else - document.getElementById('information-box').innerHTML = "

"+OSRM.loc("NO_RESULTS_FOUND")+": "+parameters.query +".

"; + document.getElementById('information-box').innerHTML = "

"+OSRM.loc("NO_RESULTS_FOUND")+": "+parameters.query +"
"; }, _showResults_Timeout: function() { - document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":"; - document.getElementById('information-box').innerHTML = "

"+OSRM.loc("TIMED_OUT")+".

"; + document.getElementById('information-box-header').innerHTML = + "

"+OSRM.loc("SEARCH_RESULTS")+"
" + + "
(found 0 results)"+"
"; + document.getElementById('information-box').innerHTML = "
"+OSRM.loc("TIMED_OUT")+"
"; }, @@ -122,9 +132,9 @@ _showResults_Timeout: function() { //update geo coordinates in input boxes updateLocation: function(marker_id) { if (marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource()) { - document.getElementById("input-source-name").value = OSRM.G.markers.route[0].getLat().toFixed(6) + ", " + OSRM.G.markers.route[0].getLng().toFixed(6); + document.getElementById("gui-input-source").value = OSRM.G.markers.route[0].getLat().toFixed(6) + ", " + OSRM.G.markers.route[0].getLng().toFixed(6); } else if (marker_id == OSRM.C.TARGET_LABEL && OSRM.G.markers.hasTarget()) { - document.getElementById("input-target-name").value = OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLat().toFixed(6) + ", " + OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLng().toFixed(6); + document.getElementById("gui-input-target").value = OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLat().toFixed(6) + ", " + OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLng().toFixed(6); } }, @@ -192,9 +202,9 @@ _showReverseResults: function(response, parameters) { // add result to DOM if(parameters.marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource() ) - document.getElementById("input-source-name").value = address; + document.getElementById("gui-input-source").value = address; else if(parameters.marker_id == OSRM.C.TARGET_LABEL && OSRM.G.markers.hasTarget() ) - document.getElementById("input-target-name").value = address; + document.getElementById("gui-input-target").value = address; }, _showReverseResults_Timeout: function(response, parameters) { if(!parameters.do_fallback) diff --git a/WebContent/OSRM.JSONP.js b/WebContent/OSRM.JSONP.js index f62ed470d..c29e634e6 100644 --- a/WebContent/OSRM.JSONP.js +++ b/WebContent/OSRM.JSONP.js @@ -66,8 +66,8 @@ OSRM.JSONP = { OSRM.JSONP.fences[id] = undefined; // clean fence } - OSRM.JSONP.sum[id] += new Number( new Date() - OSRM.JSONP.durations[id] ); - OSRM.debug.log("[jsonp] response handling: "+id+" "+ (OSRM.JSONP.sum[id]/OSRM.JSONP.counter[id]).toFixed(2) ); +// OSRM.JSONP.sum[id] += new Number( new Date() - OSRM.JSONP.durations[id] ); +// OSRM.debug.log("[jsonp] response handling: "+id+" "+ (OSRM.JSONP.sum[id]/OSRM.JSONP.counter[id]).toFixed(2) ); }; // clean DOM (unfortunately, script elements cannot be reused by all browsers) @@ -85,9 +85,9 @@ OSRM.JSONP = { // start timeout timer OSRM.JSONP.timers[id] = setTimeout(OSRM.JSONP.timeouts[id], timeout); - if(!OSRM.JSONP.durations) { OSRM.JSONP.durations = {}; OSRM.JSONP.counter = {}; OSRM.JSONP.sum = {}; } - if(OSRM.JSONP.counter[id]) OSRM.JSONP.counter[id]++; else {OSRM.JSONP.counter[id] = 1;OSRM.JSONP.sum[id] = 0;} - OSRM.JSONP.durations[id] = new Date(); +// if(!OSRM.JSONP.durations) { OSRM.JSONP.durations = {}; OSRM.JSONP.counter = {}; OSRM.JSONP.sum = {}; } +// if(OSRM.JSONP.counter[id]) OSRM.JSONP.counter[id]++; else {OSRM.JSONP.counter[id] = 1;OSRM.JSONP.sum[id] = 0;} +// OSRM.JSONP.durations[id] = new Date(); // OSRM.debug.log("[jsonp] init: "+id); return true; diff --git a/WebContent/OSRM.Localization.js b/WebContent/OSRM.Localization.js deleted file mode 100644 index ffe7ec9ec..000000000 --- a/WebContent/OSRM.Localization.js +++ /dev/null @@ -1,122 +0,0 @@ -/* -This program is free software; you can redistribute it and/or modify -it under the terms of the GNU AFFERO General Public License as published by -the Free Software Foundation; either version 3 of the License, or -any later version. - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU General Public License for more details. - -You should have received a copy of the GNU Affero General Public License -along with this program; if not, write to the Free Software -Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA -or see http://www.gnu.org/licenses/agpl.txt. -*/ - -// OSRM localization -// [basic localization options] - - -OSRM.Localization = { - -// if existing, return localized string -> English string -> input string -translate: function(text) { - if( OSRM.Localization[OSRM.DEFAULTS.LANGUAGE][text] ) - return OSRM.Localization[OSRM.DEFAULTS.LANGUAGE][text]; - else if( OSRM.Localization["en"][text] ) - return OSRM.Localization["en"][text]; - else - return text; -} -}; - -// shorter call to translate function -OSRM.loc = OSRM.Localization.translate; - - -// German language support -OSRM.Localization["de"] = { -//gui -"OPEN_JOSM": "JOSM", -"OPEN_OSMBUGS": "OSM Bugs", -"GUI_START": "Start", -"GUI_END": "Ziel", -"GUI_RESET": "Reset", -"GUI_SEARCH": "Zeigen", -"GUI_REVERSE": "Umdrehen", -"GUI_OPTIONS": "Kartenwerkzeuge", -"GUI_HIGHLIGHT_UNNAMED_ROADS": "Unbenannte Straßen hervorheben", -"GUI_START_TOOLTIP": "Startposition eingeben", -"GUI_END_TOOLTIP": "Zielposition eingeben", -"GUI_LEGAL_NOTICE": "GUI2 v"+OSRM.VERSION+" "+OSRM.DATE+" - OSRM hosting by KIT - Geocoder by OSM", -// geocoder -"SEARCH_RESULTS": "Suchergebnisse", -"TIMED_OUT": "Zeitüberschreitung", -"NO_RESULTS_FOUND": "Keine Ergebnisse gefunden", -"NO_RESULTS_FOUND_SOURCE": "Keine Ergebnisse gefunden für Start", -"NO_RESULTS_FOUND_TARGET": "Keine Ergebnisse gefunden für Ziel", -// routing -"ROUTE_DESCRIPTION": "Routenbeschreibung", -"GET_LINK_TO_ROUTE": "Generiere Link", -"GENERATE_LINK_TO_ROUTE": "Warte auf Antwort", -"LINK_TO_ROUTE_TIMEOUT": "nicht möglich", -"GPX_FILE": "GPX Datei", -"DISTANCE": "Distanz", -"DURATION": "Dauer", -"YOUR_ROUTE_IS_BEING_COMPUTED": "Ihre Route wird berechnet", -"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" -}; - - -// English language support -OSRM.Localization["en"] = { -//gui -"OPEN_JOSM": "JOSM", -"OPEN_OSMBUGS": "OSM Bugs", -"GUI_START": "Start", -"GUI_END": "End", -"GUI_RESET": "  Reset  ", -"GUI_SEARCH": "  Show  ", -"GUI_REVERSE": "Reverse", -"GUI_OPTIONS": "Mapping Tools", -"GUI_HIGHLIGHT_UNNAMED_ROADS": "Highlight unnamed streets", -"GUI_START_TOOLTIP": "Enter start", -"GUI_END_TOOLTIP": "Enter destination", -"GUI_LEGAL_NOTICE": "GUI2 v"+OSRM.VERSION+" "+OSRM.DATE+" - OSRM hosting by KIT - Geocoder by OSM", -// geocoder -"SEARCH_RESULTS": "Search Results", -"TIMED_OUT": "Timed Out", -"NO_RESULTS_FOUND": "No results found", -"NO_RESULTS_FOUND_SOURCE": "No results found for start", -"NO_RESULTS_FOUND_TARGET": "No results found for end", -//routing -"ROUTE_DESCRIPTION": "Route Description", -"GET_LINK_TO_ROUTE": "Generate Link", -"GENERATE_LINK_TO_ROUTE": "waiting for link", -"LINK_TO_ROUTE_TIMEOUT": "not available", -"GPX_FILE": "GPX File", -"DISTANCE": "Distance", -"DURATION": "Duration", -"YOUR_ROUTE_IS_BEING_COMPUTED": "Your route is being computed", -"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 bc8ff1bd8..a86e4853f 100644 --- a/WebContent/OSRM.Markers.js +++ b/WebContent/OSRM.Markers.js @@ -118,14 +118,15 @@ onDragEnd: function(e) { this.switchIcon(this.options.baseicon); this.parent.setPosition( e.target.getLatLng() ); - OSRM.Routing.getRoute(); if (OSRM.G.route.isShown()) { + OSRM.Routing.getRoute(); OSRM.G.route.hideOldRoute(); OSRM.G.route.hideUnnamedRoute(); - } - - if(OSRM.G.route.isShown()==false) + } else { OSRM.Geocoder.updateAddress(this.parent.label); + document.getElementById('information-box').innerHTML = ""; // do we want this? + document.getElementById('information-box-header').innerHTML = ""; + } }, toString: function() { return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")"; @@ -174,8 +175,8 @@ removeAll: function() { for(var i=0; i%s]", +"DIRECTION_2":"Rechts abbiegen[ auf %s]", +"DIRECTION_3":"Umkehren[ auf %s]", +"DIRECTION_4":"Fahren Sie Richtung %s", +"DIRECTION_5":"Weiterfahren[ auf %s]", +"DIRECTION_6":"Leicht links abbiegen[ auf %s]", +"DIRECTION_7":"Leicht rechts abbiegen[ auf %s]", +"DIRECTION_8":"Scharf links abbiegen[ auf %s]", +"DIRECTION_9":"Scharf rechts abbiegen[ auf %s]", +"DIRECTION_10":"In den Kreisverkehr einfahren und bei erster Möglichkeit verlassen[ auf %s]", +"DIRECTION_11":"In den Kreisverkehr einfahren und bei zweiter Möglichkeit verlassen[ auf %s]", +"DIRECTION_12":"In den Kreisverkehr einfahren und bei dritter Möglichkeit verlassen[ auf %s]", +"DIRECTION_13":"In den Kreisverkehr einfahren und bei vierter Möglichkeit verlassen[ auf %s]", +"DIRECTION_14":"In den Kreisverkehr einfahren und bei f�nfter Möglichkeit verlassen[ auf %s]", +"DIRECTION_15":"In den Kreisverkehr einfahren und bei sechster Möglichkeit verlassen[ auf %s]", +"DIRECTION_16":"In den Kreisverkehr einfahren und bei siebter Möglichkeit verlassen[ auf %s]", +"DIRECTION_17":"In den Kreisverkehr einfahren und bei achter Möglichkeit verlassen[ auf %s]", +"DIRECTION_18":"In den Kreisverkehr einfahren und bei neunter Möglichkeit verlassen[ auf %s]", +"DIRECTION_19":"In den Kreisverkehr einfahren und bei zehnter Möglichkeit verlassen[ auf %s]", +"DIRECTION_20":"In den Kreisverkehr einfahren und bei einer der vielen Möglichkeiten verlassen[ auf %s]", +"DIRECTION_21":"Sie haben Ihr Ziel erreicht" }; // set GUI language on load -OSRM.GUI.setLanguage(); \ No newline at end of file +OSRM.Localization.change("de"); \ No newline at end of file diff --git a/WebContent/localization/OSRM.Locale.en.js b/WebContent/localization/OSRM.Locale.en.js index 686eb30bb..a063d9fa5 100644 --- a/WebContent/localization/OSRM.Locale.en.js +++ b/WebContent/localization/OSRM.Locale.en.js @@ -57,8 +57,30 @@ OSRM.Localization["en"] = { "NE": "northeast", "SE": "southeast", "SW": "southwest", -"NW": "northwest" +"NW": "northwest", +// driving directions +"DIRECTION_1":"Turn left[ on %s]", +"DIRECTION_2":"Turn right[ on %s]", +"DIRECTION_3":"U-Turn[ on %s]", +"DIRECTION_4":"Head %s", +"DIRECTION_5":"Continue[ on %s]", +"DIRECTION_6":"Turn slight left[ on %s]", +"DIRECTION_7":"Turn slight right[ on %s]", +"DIRECTION_8":"Turn sharp left[ on %s]", +"DIRECTION_9":"Turn sharp right[ on %s]", +"DIRECTION_10":"Enter roundabout and leave at first exit[ on %s]", +"DIRECTION_11":"Enter roundabout and leave at second exit[ on %s]", +"DIRECTION_12":"Enter roundabout and leave at third exit[ on %s]", +"DIRECTION_13":"Enter roundabout and leave at fourth exit[ on %s]", +"DIRECTION_14":"Enter roundabout and leave at fifth exit[ on %s]", +"DIRECTION_15":"Enter roundabout and leave at sixth exit[ on %s]", +"DIRECTION_16":"Enter roundabout and leave at seventh exit[ on %s]", +"DIRECTION_17":"Enter roundabout and leave at eighth exit[ on %s]", +"DIRECTION_18":"Enter roundabout and leave at nineth exit[ on %s]", +"DIRECTION_19":"Enter roundabout and leave at tenth exit[ on %s]", +"DIRECTION_20":"Enter roundabout and leave at one of the too many exits[ on %s]", +"DIRECTION_21":"You have reached your destination" }; //set GUI language on load -OSRM.GUI.setLanguage(); \ No newline at end of file +OSRM.Localization.change("en"); \ No newline at end of file diff --git a/WebContent/localization/OSRM.Localization.js b/WebContent/localization/OSRM.Localization.js index 597e939b0..ec3278771 100644 --- a/WebContent/localization/OSRM.Localization.js +++ b/WebContent/localization/OSRM.Localization.js @@ -27,7 +27,7 @@ supported_languages: ["en", "de"], init: function() { // create dropdown menu var select = document.createElement('select'); - select.id = "language-toggle"; + select.id = "gui-language-toggle"; select.onchange = function() { OSRM.Localization.change(this.value); }; // fill dropdown menu @@ -39,8 +39,8 @@ init: function() { } // add element to DOM - var main_input_header = document.getElementById('main-input-header'); - main_input_header.insertBefore(select,main_input_header.firstChild); + var input_mask_header = document.getElementById('input-mask-header'); + input_mask_header.insertBefore(select,input_mask_header.firstChild); // initialize default language OSRM.Localization.change( OSRM.DEFAULTS.LANGUAGE ); @@ -51,6 +51,8 @@ change: function(language) { OSRM.DEFAULTS.LANGUAGE = language; if( OSRM.Localization[language]) { OSRM.GUI.setLanguage(); + if( document.getElementById('information-box').innerHTML != "" ) + OSRM.RoutingDescription.show( OSRM.G.response ); } else { var script = document.createElement('script'); script.type = 'text/javascript'; diff --git a/WebContent/main.css b/WebContent/main.css index bbd4e86f8..3116951fe 100644 --- a/WebContent/main.css +++ b/WebContent/main.css @@ -18,25 +18,19 @@ or see http://www.gnu.org/licenses/agpl.txt. /* OSRM CSS styles */ -/* map -> fullscreen */ -body { +/* fullscreen map */ +html, body { padding: 0; margin: 0; -} -html, body, #map { height: 100%; } #map { + height: 100%; z-index: 0; } -/* styles for gui */ -.vquad -{ - height:10px; -} - +/* general styles for gui boxes */ .gui-wrapper { position:absolute; @@ -63,11 +57,13 @@ html, body, #map { padding:5px; } + +/* styles for specific gui boxes */ #main-wrapper { width:410px; - height:95%; top:5px; + bottom:25px; left:5px; } #main-input @@ -78,10 +74,9 @@ html, body, #map { #main-output { width:390px; - top:220px; + top:220px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */ bottom:0px; } - #blob-wrapper { left:-5px; @@ -96,79 +91,75 @@ html, body, #map { -webkit-border-bottom-left-radius:0px; visibility:hidden; } -#blob-input +#blob-content { - width:26px; - height:26px; + width:16px; + height:16px; border-top-left-radius:0px; border-bottom-left-radius:0px; -moz-border-radius-topleft:0px; -moz-border-radius-bottomleft:0px; -webkit-border-top-left-radius:0px; -webkit-border-bottom-left-radius:0px; - padding:0px; } -.main-toggle-out -{ - cursor:pointer; -/* position:absolute; - right:5px; - top:5px;*/ - width:16px; - height:16px; - background-image:url("images/cancel.png"); -} -.main-toggle-out:hover -{ - background-image:url("images/cancel_hover.png"); -} -.main-toggle-out:active -{ - background-image:url("images/cancel_active.png"); -} -.main-toggle-in -{ - cursor:pointer; - position:absolute; - right:5px; - top:5px; - width:16px; - height:16px; - background-image:url("images/restore.png"); -} -.main-toggle-in:hover -{ - background-image:url("images/restore_hover.png"); -} -.main-toggle-in:active -{ - background-image:url("images/restore_active.png"); -} -.main-options +/* styles for main-input areas */ +#input-mask-header { - position:relative; - font-size:10px; -} -.main-options-left-box -{ - position:absolute; - left:5px; + left:0px; + right:0px; top:0px; + height:50px; + background-repeat:no-repeat; + background-position:center; + background-image:url("images/osrm-logo.png"); } -.main-options-right-box +#input-mask { - position:absolute; - right:5px; - top:5px; + margin:3px; } -#options-toggle +#input-mask-options +{ + margin:3px; +} + + +/* styles for main-input input-mask-header */ +#gui-language-toggle +{ + border: 0px; + text-decoration:none; +} +.top-right-button +{ + float:right; +} + + +/* styles for main-input input-mask */ +.input-marker +{ + display:table-row; +} +.input-marker > div +{ + padding-bottom:4px; +} +.input-box +{ + width: 250px; + padding-right: 2px; +} + + +/* styles for main-input input-mask-options */ +#gui-options-toggle { cursor:pointer; color:#0000ff } -#options-toggle:hover +#gui-options-toggle:hover { color:#ff0000 } @@ -177,111 +168,92 @@ html, body, #map { visibility:hidden; } -#osrm-logo -{ - display: block; - margin-left: auto; - margin-right: auto; - width: 192px; - height: 50px; - text-align:center; - vertical-align: middle; -} -.input-box +/* styles for main-output areas */ +#information-box-header { - width: 250px; + margin:5px; + height:60px; } - - -.full -{ - width:100%; -} -.right -{ - text-align:right; -} -.center -{ - text-align:center; -} - #information-box { position:absolute; - bottom:15px; - top:60px; + bottom:20px; + top:65px; width:380px; - font-size:12px; overflow:auto; margin:5px; } - -.route-summary +#legal-notice { - font-size: 12px; + position:absolute; + right:0px; + bottom:0px; + margin:5px; } -#gpx-link + + +/* styles for information-box-header */ +.header-title +{ + font-weight:bold; + margin-bottom:10px; +} +.header-content +{ + font-weight:normal; +} +.result-link { color:#0000ff; text-decoration:none; cursor:pointer; } -#gpx-link:hover +.result-link:hover { color:#ff0000; } + + +/* style for information-box table (search results, driving directions) */ .results-table { border-spacing:0px; + width:100%; } .results-odd { - background-color: #FAF3E9; //#ffffff; + background-color: #FFFDE3; } .results-even { - background-color: #F2DE9C; //#ffffe0; + background-color: #FFF9BB; } .result-counter { text-align:right; - vertical-align: top; - width:30px; + vertical-align:top; font-weight:bold; - padding-left:5px; - padding-right:5px; - padding-top:1px; - padding-bottom:1px; + padding:1px 5px 1px 5px; } .result-items { text-align:left; vertical-align: middle; width:100%; - padding-left:1px; - padding-right:1px; - padding-top:1px; - padding-bottom:1px; + padding:1px; } -.result-direction +.result-directions { - width:30px; - padding-left:1px; - padding-right:1px; - padding-top:1px; - padding-bottom:1px; + text-align:left; + vertical-align: middle; + padding:1px 5px 1px 5px; } .result-distance { text-align:right; - vertical-align: middle; - width:30px; - padding-left:1px; - padding-right:1px; - padding-top:1px; - padding-bottom:1px; + vertical-align: middle; + padding:1px 1px 1px 5px; } .result-item { @@ -292,18 +264,135 @@ html, body, #map { { color:#ff0000 } - -#legal-notice +.no-results { - position:absolute; - right:0px; - bottom:0px; - padding:5px; - font-size:10px; + text-align:center; + margin:28px; +} + + +/* buttons */ +.button +{ + cursor:pointer; + padding:2px 10px 2px 10px; + border-radius:5px; + -moz-border-radius:5px; + -webkit-border-radius:5px; + background-color:#EEEEEE; + border:1px solid #999999; + color:#333333; + text-decoration:none; + font-size:9px; + outline-style:none; + vertical-align:1px; +} +.button:hover +{ + background-color:#F9F9F9; + color:#000000; +} +.button:active +{ + background-color:#F4F4F4; + color:#FF0000; +} + + +/* iconic buttons */ +.iconic-button +{ + cursor:pointer; + width:16px; + height:16px; + background-repeat:no-repeat; + background-position:center; +} + +#gui-toggle-out +{ + background-image:url("images/cancel.png"); +} +#gui-toggle-out:hover +{ + background-image:url("images/cancel_hover.png"); +} +#gui-toggle-out:active +{ + background-image:url("images/cancel_active.png"); +} + +#gui-toggle-in +{ + background-image:url("images/restore.png"); +} +#gui-toggle-in:hover +{ + background-image:url("images/restore_hover.png"); +} +#gui-toggle-in:active +{ + background-image:url("images/restore_active.png"); +} + +#gui-printer +{ + background-image:url("images/printer.png"); +} +#gui-printer:hover +{ + background-image:url("images/printer_hover.png"); +} +#gui-printer:active +{ + background-image:url("images/printer_active.png"); +} + +.delete-marker +{ + background-image:url("images/cancel.png"); + visibility:hidden; +} +.delete-marker:hover +{ + background-image:url("images/cancel_hover.png"); +} +.delete-marker:active +{ + background-image:url("images/cancel_active.png"); +} + + +/* fonts */ +.base-font { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 12px; + font-weight: normal; +} +.big-font { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 14px; + font-weight: bold; +} +.medium-font { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 10.5px; + font-weight: normal; +} +.small-font { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 9px; + font-weight: normal; } /* utility styles (defined above buttons, so that buttons retain cursor:pointer)*/ +.quad +{ + min-width:10px; + min-height:10px; +} + .not-selectable { cursor:default; @@ -322,72 +411,31 @@ html, body, #map { user-select: text; } -/* buttons */ -.button +.checkbox-label { - cursor:pointer; - padding:2px 10px 2px 10px; - border-radius:5px; - -moz-border-radius:5px; - background-color:#EEEEEE; - border:1px solid #999999; - color:#333333; - text-decoration:none; - font-size:11px; - outline-style:none; -} -.button:hover -{ - background-color:#F9F9F9; - color:#000000; -} -.button:active -{ - background-color:#F4F4F4; - color:#FF0000; + vertical-align:2px; } -/* delete marker */ -.delete-marker +.full { - cursor:pointer; - position:absolute; - right:5px; - top:3px; - width:16px; - height:16px; - background-image:url("images/cancel.png"); - visibility:hidden; + display:table; + width:100%; } -.delete-marker:hover +.left { - background-image:url("images/cancel_hover.png"); + display:table-cell; + text-align:left; + vertical-align:middle; } -.delete-marker:active +.right { - background-image:url("images/cancel_active.png"); + display:table-cell; + text-align:right; + vertical-align:middle; } - -/* printer button */ -.printer-inactive +.center { - cursor:pointer; - width:16px; - height:16px; - background-image:url("images/printer_inactive.png"); -} -.printer -{ - cursor:pointer; - width:16px; - height:16px; - background-image:url("images/printer.png"); -} -.printer:hover -{ - background-image:url("images/printer_hover.png"); -} -.printer:active -{ - background-image:url("images/printer_active.png"); + display:table-cell; + text-align:center; + vertical-align:middle; } \ No newline at end of file diff --git a/WebContent/main.html b/WebContent/main.html index a561bd4e0..171fc9da3 100644 --- a/WebContent/main.html +++ b/WebContent/main.html @@ -46,7 +46,7 @@ or see http://www.gnu.org/licenses/agpl.txt. - + @@ -71,15 +71,15 @@ or see http://www.gnu.org/licenses/agpl.txt. - +
-
-
+
+
@@ -87,63 +87,69 @@ or see http://www.gnu.org/licenses/agpl.txt.
-
-
-
-
-
+
+ +
+
+
+
- + +
- - - - - - - - - - - - - - -
Start:
- -
Zeigen
Ende:
- -
Zeigen
- +
+
+
Start:
+
+
+
Zeigen
+
+
+
Ende:
+
+
+
Zeigen
+
+
+ +
+ -
- - - - - -
Reset Umdrehen
- +
+
Reset
+
Umdrehen
+
+
+ +
+ - Kartenwerkzeuge -
- - Unbenannte Straßen hervorheben - - - JOSM - OSM Bugs - +
+ + + Kartenwerkzeuge + + +
+
+ + Unbenannte Straßen hervorheben +
+
+ JOSM + OSM Bugs +
+
-
-
+
+
- +
diff --git a/WebContent/main.js b/WebContent/main.js index 1dc16984d..a93203567 100644 --- a/WebContent/main.js +++ b/WebContent/main.js @@ -18,9 +18,6 @@ or see http://www.gnu.org/licenses/agpl.txt. // OSRM initialization // [initialization, image prefetching] -// will hold the Leaflet map object -OSRM.GLOBALS.map = null; - // onload initialization routine OSRM.init = function() { @@ -152,7 +149,7 @@ OSRM.checkURL = function(){ if( destination_name == null ) OSRM.Geocoder.updateAddress( OSRM.C.TARGET_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); else - document.getElementById("input-target-name").value = destination_name; + document.getElementById("gui-input-target").value = destination_name; OSRM.G.markers.route[index].show(); OSRM.G.markers.route[index].centerView(); return; @@ -185,4 +182,11 @@ OSRM.checkURL = function(){ // compute route OSRM.Routing.getRoute(); } -}; \ No newline at end of file +}; + + +// onload event +if(document.addEventListener) // FF, CH + document.addEventListener("DOMContentLoaded", OSRM.init, false); +else // old IE + document.onreadystatechange = function(){if(document.readyState == "interactive" || document.readyState == "complete") OSRM.init();}; diff --git a/WebContent/printing/OSRM.Printing.js b/WebContent/printing/OSRM.Printing.js index e1f19a8e9..11a692370 100644 --- a/WebContent/printing/OSRM.Printing.js +++ b/WebContent/printing/OSRM.Printing.js @@ -65,11 +65,11 @@ show: function(response) { route_desc += ''; headline = ""; - headline += OSRM.loc("ROUTE_DESCRIPTION")+":
"; + headline += OSRM.loc("ROUTE_DESCRIPTION")+":
"; headline += '
'; headline += "" + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) - + "
" + + "
" + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + ""; headline += '
'; diff --git a/WebContent/routing/OSRM.RoutingDescription.js b/WebContent/routing/OSRM.RoutingDescription.js index 19911efb1..1e4e6300e 100644 --- a/WebContent/routing/OSRM.RoutingDescription.js +++ b/WebContent/routing/OSRM.RoutingDescription.js @@ -30,16 +30,15 @@ onClickRouteDescription: function(geometry_index) { OSRM.G.markers.highlight.centerView(OSRM.DEFAULTS.HIGHLIGHT_ZOOM_LEVEL); }, onClickCreateShortcut: function(src){ - src += '&z='+ OSRM.G.map.getZoom() + '¢er=' + OSRM.G.map.getCenter().lat + ',' + OSRM.G.map.getCenter().lng; + src += '&z='+ OSRM.G.map.getZoom() + '¢er=' + OSRM.G.map.getCenter().lat.toFixed(6) + ',' + OSRM.G.map.getCenter().lng.toFixed(6); OSRM.JSONP.call(OSRM.DEFAULTS.HOST_SHORTENER_URL+src, OSRM.RoutingDescription.showRouteLink, OSRM.RoutingDescription.showRouteLink_TimeOut, OSRM.DEFAULTS.JSONP_TIMEOUT, 'shortener'); - document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("GENERATE_LINK_TO_ROUTE")+']'; + document.getElementById('route-link').innerHTML = '['+OSRM.loc("GENERATE_LINK_TO_ROUTE")+']'; }, showRouteLink: function(response){ - document.getElementById('route-prelink').innerHTML = '['+response.ShortURL+']'; -// document.getElementById('route-prelink').innerHTML = '[]'; + document.getElementById('route-link').innerHTML = '['+response.ShortURL+']'; }, showRouteLink_TimeOut: function(){ - document.getElementById('route-prelink').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']'; + document.getElementById('route-link').innerHTML = '['+OSRM.loc("LINK_TO_ROUTE_TIMEOUT")+']'; }, // handling of routing description @@ -47,17 +46,17 @@ show: function(response) { // compute query string var query_string = '?rebuild=1'; for(var i=0; i'+OSRM.loc("GET_LINK_TO_ROUTE")+']'; + var route_link ='['+OSRM.loc("GET_LINK_TO_ROUTE")+']'; // create GPX link - var gpx_link = '['+OSRM.loc("GPX_FILE")+']'; + var gpx_link = '['+OSRM.loc("GPX_FILE")+']'; // create route description var route_desc = ""; - route_desc += ''; + route_desc += '
'; for(var i=0; i < response.route_instructions.length; i++){ //odd or even ? @@ -71,7 +70,16 @@ show: function(response) { route_desc += ""; route_desc += '"; route_desc += '"; } - - route_desc += '
'; - route_desc += ''; + route_desc += '
'; + +// // build route description +// if( i == 0 ) +// route_desc += OSRM.loc("DIRECTION_"+response.route_instructions[i][0]).replace(/%s/, response.route_instructions[i][6]); +// else if( response.route_instructions[i][1] != "" ) +// route_desc += OSRM.loc("DIRECTION_"+response.route_instructions[i][0]).replace(/\[(.*)\]/,""); +// else +// route_desc += OSRM.loc("DIRECTION_"+response.route_instructions[i][0]).replace(/\[(.*)\]/,"$1").replace(/%s/, response.route_instructions[i][6]); + route_desc += response.route_instructions[i][0]; if( i == 0 ) route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] ); @@ -79,8 +87,7 @@ show: function(response) { route_desc += ' on '; route_desc += '' + response.route_instructions[i][1] + ''; } - //route_desc += ' for '; - route_desc += ''; + route_desc += '
'; route_desc += "		'; @@ -90,52 +97,61 @@ show: function(response) { route_desc += "
'; - headline = ""; - headline += OSRM.loc("ROUTE_DESCRIPTION")+":
"; - headline += '
'; - headline += "" - + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) - + "
" - + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) - + ""; - headline += '
'; - headline += '
'+route_link+'
'+gpx_link+'
'; + route_desc += ''; + + // create header + header = + '
' + OSRM.loc("ROUTE_DESCRIPTION") + '
' + + '
' + + '
' + + '
' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '
' + + '
' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '
' + + '
' + + '
' + + '
' + route_link + '
' + + '
' + gpx_link + '
' + + '
' + + '
'; - var output = ""; - output += route_desc; - - document.getElementById('information-box-headline').innerHTML = headline; - document.getElementById('information-box').innerHTML = output; + // update DOM + document.getElementById('information-box-header').innerHTML = header; + document.getElementById('information-box').innerHTML = route_desc; }, // simple description showSimple: function(response) { - headline = OSRM.loc("ROUTE_DESCRIPTION")+":
"; - headline += "" - + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) - + "
" - + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) - + ""; - headline += '

'; + header = + '
' + OSRM.loc("ROUTE_DESCRIPTION") + '
' + + '
' + + '
' + + '
' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '
' + + '
' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '
' + + '
' + + '
' + + '
' + + '
'; - document.getElementById('information-box-headline').innerHTML = headline; - document.getElementById('information-box').innerHTML = "

"+OSRM.loc("YOUR_ROUTE_IS_BEING_COMPUTED")+".

"; + // update DOM + document.getElementById('information-box-header').innerHTML = header; + document.getElementById('information-box').innerHTML = "

"+OSRM.loc("YOUR_ROUTE_IS_BEING_COMPUTED")+"
"; }, // no description showNA: function( display_text ) { - headline = OSRM.loc("ROUTE_DESCRIPTION")+":
"; - headline += "" - + OSRM.loc("DISTANCE")+": N/A" - + "
" - + OSRM.loc("DURATION")+": N/A" - + ""; - headline += '

'; + header = + '
' + OSRM.loc("ROUTE_DESCRIPTION") + '
' + + '
' + + '
' + + '
' + OSRM.loc("DISTANCE")+": N/A" + '
' + + '
' + OSRM.loc("DURATION")+": N/A" + '
' + + '
' + + '
' + + '
' + + '
'; - document.getElementById('information-box-headline').innerHTML = headline; - document.getElementById('information-box').innerHTML = "

"+display_text+".

"; + // update DOM + document.getElementById('information-box-header').innerHTML = header; + document.getElementById('information-box').innerHTML = "

"+display_text+"
"; }, // map driving instructions to icons diff --git a/WebContent/routing/OSRM.RoutingGUI.js b/WebContent/routing/OSRM.RoutingGUI.js index da0f20289..e549b1a0a 100644 --- a/WebContent/routing/OSRM.RoutingGUI.js +++ b/WebContent/routing/OSRM.RoutingGUI.js @@ -23,15 +23,15 @@ OSRM.RoutingGUI = { // click: button "reset" resetRouting: function() { - document.getElementById('input-source-name').value = ""; - document.getElementById('input-target-name').value = ""; + document.getElementById('gui-input-source').value = ""; + document.getElementById('gui-input-target').value = ""; OSRM.G.route.hideAll(); OSRM.G.markers.removeAll(); OSRM.G.markers.highlight.hide(); document.getElementById('information-box').innerHTML = ""; - document.getElementById('information-box-headline').innerHTML = ""; + document.getElementById('information-box-header').innerHTML = ""; OSRM.JSONP.reset(); }, @@ -39,9 +39,9 @@ resetRouting: function() { // click: button "reverse" reverseRouting: function() { // invert input boxes - var tmp = document.getElementById("input-source-name").value; - document.getElementById("input-source-name").value = document.getElementById("input-target-name").value; - document.getElementById("input-target-name").value = tmp; + var tmp = document.getElementById("gui-input-source").value; + document.getElementById("gui-input-source").value = document.getElementById("gui-input-target").value; + document.getElementById("gui-input-target").value = tmp; // invert route OSRM.G.markers.route.reverse(); @@ -67,7 +67,7 @@ reverseRouting: function() { OSRM.G.markers.highlight.hide(); } else { document.getElementById('information-box').innerHTML = ""; - document.getElementById('information-box-headline').innerHTML = ""; + document.getElementById('information-box-header').innerHTML = ""; } }, @@ -83,12 +83,21 @@ showMarker: function(marker_id) { }, -// changed: any inputbox (is called when return is pressed [after] or focus is lost [before]) +// keyup: force geocoder when enter is pressed +// (change event can be triggered, too; second call to geocoder gets fenced by JSONP) +// (alternative: track changes manually and only permit keyup event, if there was no change) +// do we want this? +keyUp: function(e, marker_id) { + if(e.keyCode==13) + OSRM.RoutingGUI.inputChanged(marker_id); +}, + +// changed: any inputbox (is called when enter is pressed [after] or focus is lost [before]) inputChanged: function(marker_id) { if( marker_id == OSRM.C.SOURCE_LABEL) - OSRM.Geocoder.call(OSRM.C.SOURCE_LABEL, document.getElementById('input-source-name').value); + OSRM.Geocoder.call(OSRM.C.SOURCE_LABEL, document.getElementById('gui-input-source').value); else if( marker_id == OSRM.C.TARGET_LABEL) - OSRM.Geocoder.call(OSRM.C.TARGET_LABEL, document.getElementById('input-target-name').value); + OSRM.Geocoder.call(OSRM.C.TARGET_LABEL, document.getElementById('gui-input-target').value); }, // click: button "open JOSM"