Open-Harbor/osrm-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

redid html and css,

Browse Source 
switched to sans-serif font
This commit is contained in:
shiin 2012-04-08 12:02:36 +02:00
parent 3141d3ba48
commit 13f0a3fb6b
10 changed files with 375 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
WebContent/OSRM.Geocoder.js
View File

@ -78,7 +78,7 @@ _showResults: function(response, parameters) {
// show possible results for input
var html = "";
html += '<table class="results-table">';
html += '<table class="results-table medium-font">';
for(var i=0; i < response.length; i++){
var result = response[i];
@ -91,29 +91,35 @@ _showResults: function(response, parameters) {
html += '<td class="result-items">';
if(result.display_name){
html += '<div class="result-item" onclick="OSRM.Geocoder._onclickResult(\''+parameters.marker_id+'\', '+result.lat+', '+result.lon+');">'+result.display_name+'</div>';
html += '<div class="result-item" onclick="OSRM.Geocoder._onclickResult(\''+parameters.marker_id+'\', '+parseFloat(result.lat).toFixed(6)+', '+parseFloat(result.lon).toFixed(6)+');">'+result.display_name+'</div>';
}
html += "</td></tr>";
}
html += '</table>';
document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":";
document.getElementById('information-box-header').innerHTML =
"<div class='header-title'>"+OSRM.loc("SEARCH_RESULTS")+"</div>" +
"<div class='header-content'>(found "+response.length+" results)"+"</div>";
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 =
"<div class='header-title'>"+OSRM.loc("SEARCH_RESULTS")+"</div>" +
"<div class='header-content'>(found 0 results)"+"</div>";
if(parameters.marker_id == OSRM.C.SOURCE_LABEL)
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_RESULTS_FOUND_SOURCE")+": "+parameters.query +".<p>";
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("NO_RESULTS_FOUND_SOURCE")+": "+parameters.query +"</div>";
else if(parameters.marker_id == OSRM.C.TARGET_LABEL)
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_RESULTS_FOUND_TARGET")+": "+parameters.query +".<p>";
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("NO_RESULTS_FOUND_TARGET")+": "+parameters.query +"</div>";
else
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("NO_RESULTS_FOUND")+": "+parameters.query +".<p>";
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("NO_RESULTS_FOUND")+": "+parameters.query +"</div>";
},
_showResults_Timeout: function() {
document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":";
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("TIMED_OUT")+".<p>";
document.getElementById('information-box-header').innerHTML =
"<div class='header-title'>"+OSRM.loc("SEARCH_RESULTS")+"</div>" +
"<div class='header-content'>(found 0 results)"+"</div>";
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("TIMED_OUT")+"</div>";
},

10
WebContent/OSRM.JSONP.js
View File

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

122
WebContent/OSRM.Localization.js
View File

@ -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 <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",
"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": "&nbsp;&nbsp;Reset&nbsp;&nbsp;",
"GUI_SEARCH": "&nbsp;&nbsp;Show&nbsp;&nbsp;",
"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 <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",
"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"
};

4
WebContent/OSRM.Markers.js
View File

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

4
WebContent/localization/OSRM.Localization.js
View File

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

426
WebContent/main.css
View File

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

106
WebContent/main.html
View File

@ -46,7 +46,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<script src="OSRM.base.js" type="text/javascript"></script>
<script src="OSRM.config.js" type="text/javascript"></script>
<script defer="defer" src="OSRM.debug.js" type="text/javascript"></script>
<!-- <script defer="defer" src="OSRM.debug.js" type="text/javascript"></script> -->
<script src="main.js" type="text/javascript"></script>
<script src="OSRM.Markers.js" type="text/javascript"></script>
@ -71,15 +71,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- body -->
<body onload="OSRM.init();">
<body onload="OSRM.init();" class="base-font">
<!--map-->
<div id="map"></div>
<!-- show ui blob -->
<div id="blob-wrapper" class="gui-wrapper">
<div id="blob-input" class="gui-box">
<div class="main-toggle-in" onclick="OSRM.GUI.toggleMain();"></div>
<div id="blob-content" class="gui-box">
<div id="gui-toggle-in" class="iconic-button" onclick="OSRM.GUI.toggleMain();"></div>
</div>
</div>
@ -87,63 +87,69 @@ or see http://www.gnu.org/licenses/agpl.txt.
<div id="main-wrapper" class="gui-wrapper not-selectable">
<!-- input box -->
<div class="gui-box" id="main-input">
<div style="position:absolute;display:table;width:390px;" id="main-input-header">
<div style="display:table-cell;background-repeat:no-repeat;background-position:center;" id="printer" class="printer" onclick="OSRM.Printing.print();"></div>
<div style="display:table-cell;width:8px;background-repeat:no-repeat;background-position:center;"></div>
<div style="display:table-cell;background-repeat:no-repeat;background-position:center;" class="main-toggle-out" onclick="OSRM.GUI.toggleMain()"></div>
<div id="main-input" class="gui-box">
<!-- header -->
<div id="input-mask-header">
<div id="gui-toggle-out" class="iconic-button top-right-button" onclick="OSRM.GUI.toggleMain()"></div>
<div class="quad top-right-button"></div>
<div id="printer" class="iconic-button top-right-button" onclick="OSRM.Printing.print();"></div>
</div>
<!-- input mask -->
<div id="input-mask">
<img id="osrm-logo" alt="OSRM Logo" src="images/osrm-logo.png" />
<!-- source/target input -->
<table class="full">
<tr>
<td id="gui-search-source-label">Start:</td>
<td><div style="position:relative;">
<input id="input-source-name" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" onchange="OSRM.RoutingGUI.inputChanged(OSRM.C.SOURCE_LABEL);" />
<div id="delete-source-marker" class="delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('source')"></div></div></td>
<td class="right"><a class="button not-selectable" id="gui-search-source" onclick="OSRM.RoutingGUI.showMarker('source')">Zeigen</a></td>
</tr>
<tr>
<td id="gui-search-target-label">Ende:</td>
<td><div style="position:relative;">
<input id="input-target-name" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" onchange="OSRM.RoutingGUI.inputChanged(OSRM.C.TARGET_LABEL);" />
<div id="delete-target-marker" class="delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('target')"></div></div></td>
<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="OSRM.RoutingGUI.showMarker('target');">Zeigen</a></td>
</tr>
</table>
<div class="full">
<div id="input-source" class="input-marker">
<div class="left"><span id="gui-search-source-label">Start:</span></div>
<div class="center input-box"><input id="input-source-name" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" onchange="OSRM.RoutingGUI.inputChanged(OSRM.C.SOURCE_LABEL);" /></div>
<div class="center"><div id="delete-source-marker" class="iconic-button delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('source')"></div></div>
<div class="right"><a class="button" id="gui-search-source" onclick="OSRM.RoutingGUI.showMarker('source')">Zeigen</a></div>
</div>
<div id="input-target" class="input-marker">
<div class="left"><span id="gui-search-target-label">Ende:</span></div>
<div class="center input-box"><input id="input-target-name" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" onchange="OSRM.RoutingGUI.inputChanged(OSRM.C.TARGET_LABEL);" /></div>
<div class="center"><div id="delete-target-marker" class="iconic-button delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('target')"></div></div>
<div class="right"><a class="button" id="gui-search-target" onclick="OSRM.RoutingGUI.showMarker('target');">Zeigen</a></div>
</div>
</div>
<div class="quad"></div>
<!-- action buttons -->
<div class="vquad"></div>
<table style="width:100%">
<tr>
<td> <a class="button not-selectable" id="gui-reset" onclick="OSRM.RoutingGUI.resetRouting();">Reset</a></td>
<td class="right"> <a class="button not-selectable" id="gui-reverse" onclick="OSRM.RoutingGUI.reverseRouting();">Umdrehen</a></td>
</tr>
</table>
<div class="full">
<div class="left"><a class="button" id="gui-reset" onclick="OSRM.RoutingGUI.resetRouting();">Reset</a></div>
<div class="right"><a class="button" id="gui-reverse" onclick="OSRM.RoutingGUI.reverseRouting();">Umdrehen</a></div>
</div>
</div>
<div class="quad"></div>
<!-- options -->
<span class="main-options" id="options-toggle" onclick="OSRM.GUI.toggleOptions()">Kartenwerkzeuge</span>
<div class="main-options" id="options-box">
<span class="main-options-left-box">
<input type="checkbox" id="option-highlight-nonames" name="main-options" value="highlight-nonames" onclick="OSRM.Routing.getRoute();" /><span id="gui-option-highlight-nonames-label">Unbenannte Straßen hervorheben</span>
</span>
<span class="main-options-right-box">
<a class="button not-selectable" id="open-josm" onclick="OSRM.RoutingGUI.openJOSM();">JOSM</a>
<a class="button not-selectable" id="open-osmbugs" onclick="OSRM.RoutingGUI.openOSMBugs();">OSM Bugs</a>
</span>
<div id="input-mask-options">
<!-- option toggle -->
<span id="options-toggle" class="small-font" onclick="OSRM.GUI.toggleOptions()">Kartenwerkzeuge</span>
<!-- actual options -->
<div id="options-box" class="full">
<div class="left">
<input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" onclick="OSRM.Routing.getRoute();" />
<span id="gui-option-highlight-nonames-label" class="checkbox-label small-font">Unbenannte Straßen hervorheben</span>
</div>
<div class="right">
<a class="button" id="open-josm" onclick="OSRM.RoutingGUI.openJOSM();">JOSM</a>
<a class="button" id="open-osmbugs" onclick="OSRM.RoutingGUI.openOSMBugs();">OSM Bugs</a>
</div>
</div>
</div>
</div>
<!-- output box -->
<div class="gui-box not-selectable" id="main-output">
<div id="information-box-headline"></div>
<div id="main-output" class="gui-box">
<div id="information-box-header"></div>
<div id="information-box"></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 id="legal-notice" class="small-font">GUI2 v0.1.3 120402 - 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>

4
WebContent/printing/OSRM.Printing.js
View File

@ -65,11 +65,11 @@ show: function(response) {
route_desc += '</table>';
headline = "";
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br/>";
headline += '<div style="float:left;width:40%">';
headline += "<span class='route-summary'>"
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
+ "<br>"
+ "<br/>"
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
+ "</span>";
headline += '</div>';

101
WebContent/routing/OSRM.RoutingDescription.js
View File

@ -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() + '&center=' + OSRM.G.map.getCenter().lat + ',' + OSRM.G.map.getCenter().lng;
src += '&z='+ OSRM.G.map.getZoom() + '&center=' + 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 = '[<a id="gpx-link" class = "text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]';
// document.getElementById('route-prelink').innerHTML = '[<input class="text-selectable output-box" style="border:none" value="'+response.ShortURL+'" type="text" onfocus="this.select()" readonly="readonly"/>]';
document.getElementById('route-link').innerHTML = '[<a class="result-link text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]';
},
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.G.markers.route.length; i++)
query_string += '&loc=' + OSRM.G.markers.route[i].getLat() + ',' + OSRM.G.markers.route[i].getLng();
query_string += '&loc=' + OSRM.G.markers.route[i].getLat().toFixed(6) + ',' + OSRM.G.markers.route[i].getLng().toFixed(6);
// create link to the route
var route_link ='<span class="route-summary" id="route-prelink">[<a id="gpx-link" onclick="OSRM.RoutingDescription.onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK_TO_ROUTE")+'</a>]</span>';
var route_link ='[<a class="result-link" onclick="OSRM.RoutingDescription.onClickCreateShortcut(\'' + OSRM.DEFAULTS.WEBSITE_URL + query_string + '\')">'+OSRM.loc("GET_LINK_TO_ROUTE")+'</a>]';
// create GPX link
var gpx_link = '<span class="route-summary">[<a id="gpx-link" onClick="document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]</span>';
var gpx_link = '[<a class="result-link" onClick="document.location.href=\'' + OSRM.DEFAULTS.HOST_ROUTING_URL + query_string + '&output=gpx\';">'+OSRM.loc("GPX_FILE")+'</a>]';
// create route description
var route_desc = "";
route_desc += '<table class="results-table">';
route_desc += '<table class="results-table medium-font">';
for(var i=0; i < response.route_instructions.length; i++){
//odd or even ?
@ -71,7 +70,7 @@ show: function(response) {
route_desc += "</td>";
route_desc += '<td class="result-items">';
route_desc += '<span class="result-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
route_desc += '<div class="result-item" onclick="OSRM.RoutingDescription.onClickRouteDescription('+response.route_instructions[i][3]+')">';
// // build route description
// if( i == 0 )
@ -88,8 +87,7 @@ show: function(response) {
route_desc += ' on ';
route_desc += '<b>' + response.route_instructions[i][1] + '</b>';
}
//route_desc += ' for ';
route_desc += '</span>';
route_desc += '</div>';
route_desc += "</td>";
route_desc += '<td class="result-distance">';
@ -99,52 +97,61 @@ show: function(response) {
route_desc += "</tr>";
}
route_desc += '</table>';
headline = "";
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>";
headline += '<div style="float:left;width:40%">';
headline += "<span class='route-summary'>"
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
+ "<br>"
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
+ "</span>";
headline += '</div>';
headline += '<div style="float:left;text-align:right;width:60%;">'+route_link+'<br>'+gpx_link+'</div>';
route_desc += '</table>';
// create header
header =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' +
'<div class="left">' +
'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'</div>' +
'<div class="right">' +
'<div id="route-link" class="header-content">' + route_link + '</div>' +
'<div class="header-content">' + gpx_link + '</div>' +
'</div>' +
'</div>';
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")+":<br>";
headline += "<span class='route-summary'>"
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance)
+ "<br>"
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time)
+ "</span>";
headline += '<br><br>';
header =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' +
'<div class="left">' +
'<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
'<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
'</div>' +
'<div class="right">' +
'</div>' +
'</div>';
document.getElementById('information-box-headline').innerHTML = headline;
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("YOUR_ROUTE_IS_BEING_COMPUTED")+".<p>";
// update DOM
document.getElementById('information-box-header').innerHTML = header;
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+OSRM.loc("YOUR_ROUTE_IS_BEING_COMPUTED")+"</div>";
},
// no description
showNA: function( display_text ) {
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>';
header =
'<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
'<div class="full">' +
'<div class="left">' +
'<div class="header-content">' + OSRM.loc("DISTANCE")+": N/A" + '</div>' +
'<div class="header-content">' + OSRM.loc("DURATION")+": N/A" + '</div>' +
'</div>' +
'<div class="right">' +
'</div>' +
'</div>';
document.getElementById('information-box-headline').innerHTML = headline;
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+display_text+".<p>";
// update DOM
document.getElementById('information-box-header').innerHTML = header;
document.getElementById('information-box').innerHTML = "<div class='no-results big-font'>"+display_text+"</div>";
},
// map driving instructions to icons

4
WebContent/routing/OSRM.RoutingGUI.js
View File

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