From 13f0a3fb6bf643fa5bf71da23fdc73d4747ab3c9 Mon Sep 17 00:00:00 2001 From: shiin Date: Sun, 8 Apr 2012 12:02:36 +0200 Subject: [PATCH] redid html and css, switched to sans-serif font --- WebContent/OSRM.Geocoder.js | 24 +- WebContent/OSRM.JSONP.js | 10 +- WebContent/OSRM.Localization.js | 122 ----- WebContent/OSRM.Markers.js | 4 +- WebContent/localization/OSRM.Localization.js | 4 +- WebContent/main.css | 426 ++++++++++-------- WebContent/main.html | 106 +++-- WebContent/printing/OSRM.Printing.js | 4 +- WebContent/routing/OSRM.RoutingDescription.js | 101 +++-- WebContent/routing/OSRM.RoutingGUI.js | 4 +- 10 files changed, 375 insertions(+), 430 deletions(-) delete mode 100644 WebContent/OSRM.Localization.js diff --git a/WebContent/OSRM.Geocoder.js b/WebContent/OSRM.Geocoder.js index 6896d702c..76378f43f 100644 --- a/WebContent/OSRM.Geocoder.js +++ b/WebContent/OSRM.Geocoder.js @@ -78,7 +78,7 @@ _showResults: function(response, parameters) { // show possible results for input var html = ""; - html += ''; + html += '
'; for(var i=0; i < response.length; i++){ var result = response[i]; @@ -91,29 +91,35 @@ _showResults: function(response, parameters) { html += '"; } html += '
'; if(result.display_name){ - html += '
'+result.display_name+'
'; + html += '
'+result.display_name+'
'; } 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")+"
"; }, 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..ad649bc7c 100644 --- a/WebContent/OSRM.Markers.js +++ b/WebContent/OSRM.Markers.js @@ -218,14 +218,14 @@ removeMarker: function(id) { this.removeVias(); document.getElementById('input-source-name').value = ""; document.getElementById('information-box').innerHTML = ""; - document.getElementById('information-box-headline').innerHTML = ""; + document.getElementById('information-box-header').innerHTML = ""; document.getElementById('delete-source-marker').style.visibility = "hidden"; } else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL ) { this.removeVias(); id = this.route.length-1; document.getElementById('input-target-name').value = ""; document.getElementById('information-box').innerHTML = ""; - document.getElementById('information-box-headline').innerHTML = ""; + document.getElementById('information-box-header').innerHTML = ""; document.getElementById('delete-target-marker').style.visibility = "hidden"; } diff --git a/WebContent/localization/OSRM.Localization.js b/WebContent/localization/OSRM.Localization.js index 2e5ce7415..fe9ad8215 100644 --- a/WebContent/localization/OSRM.Localization.js +++ b/WebContent/localization/OSRM.Localization.js @@ -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 ); diff --git a/WebContent/main.css b/WebContent/main.css index bbd4e86f8..d6f287df5 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,73 +91,69 @@ 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; } +#input-mask-options +{ + margin:3px; +} + + +/* styles for main-input input-mask-header */ +#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 */ #options-toggle { cursor:pointer; @@ -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"); +} + +#printer +{ + background-image:url("images/printer.png"); +} +#printer:hover +{ + background-image:url("images/printer_hover.png"); +} +#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..4a69533ec 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/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 5d236fb4e..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,7 @@ show: function(response) { route_desc += ""; route_desc += '"; route_desc += '"; } - - route_desc += '
'; - route_desc += ''; + route_desc += '
'; // // build route description // if( i == 0 ) @@ -88,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 += "		'; @@ -99,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..cd47d1e35 100644 --- a/WebContent/routing/OSRM.RoutingGUI.js +++ b/WebContent/routing/OSRM.RoutingGUI.js @@ -31,7 +31,7 @@ resetRouting: function() { 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(); }, @@ -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 = ""; } },