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

Merge remote-tracking branch 'origin/trial/printing' into trial/printing

Browse Source 
Conflicts:
	WebContent/OSRM.GUI.js
This commit is contained in:
DennisSchiefer 2012-04-09 22:35:47 +02:00
commit 893c09f6fc
15 changed files with 529 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
WebContent/OSRM.GUI.js
View File

@ -30,8 +30,36 @@ init: function() {
OSRM.GUI.visible = true; OSRM.GUI.visible = true;
OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth; OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
document.getElementById('input-source-name').value = OSRM.DEFAULTS.ONLOAD_SOURCE; // init events
document.getElementById('input-target-name').value = OSRM.DEFAULTS.ONLOAD_TARGET; // [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 // set language dependent labels
@ -41,14 +69,17 @@ setLanguage: function() {
document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET"); document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE"); 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("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-source").innerHTML = OSRM.loc("GUI_SEARCH");
document.getElementById("gui-search-target").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-source-label").innerHTML = OSRM.loc("GUI_START")+":";
document.getElementById("gui-search-target-label").innerHTML = OSRM.loc("GUI_END")+":"; document.getElementById("gui-search-target-label").innerHTML = OSRM.loc("GUI_END")+":";
document.getElementById("input-source-name").title = OSRM.loc("GUI_START_TOOLTIP"); document.getElementById("gui-input-source").title = OSRM.loc("GUI_START_TOOLTIP");
document.getElementById("input-target-name").title = OSRM.loc("GUI_END_TOOLTIP"); document.getElementById("gui-input-target").title = OSRM.loc("GUI_END_TOOLTIP");
document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE"); 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 // show/hide main-gui
@ -68,15 +99,9 @@ toggleMain: function() {
document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px"; document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px";
} }
// execute after animation // execute after animation (old browser support)
if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) { 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 {
OSRM.GUI.onMainTransitionEnd(); OSRM.GUI.onMainTransitionEnd();
}
}, },
// do stuff after main-gui animation finished // do stuff after main-gui animation finished
@ -102,4 +127,4 @@ toggleOptions: function() {
} }
} }
}; };

40
WebContent/OSRM.Geocoder.js
View File

@ -60,7 +60,8 @@ _onclickResult: function(marker_id, lat, lon) {
OSRM.G.markers.route[index].show(); OSRM.G.markers.route[index].show();
OSRM.G.markers.route[index].centerView(); 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; 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 // show possible results for input
var html = ""; var html = "";
html += '<table class="results-table">'; html += '<table class="results-table medium-font">';
for(var i=0; i < response.length; i++){ for(var i=0; i < response.length; i++){
var result = response[i]; var result = response[i];
@ -97,23 +103,27 @@ _showResults: function(response, parameters) {
} }
html += '</table>'; 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; document.getElementById('information-box').innerHTML = html;
OSRM.Geocoder._onclickResult(parameters.marker_id, response[0].lat, response[0].lon);
}, },
_showResults_Empty: function(parameters) { _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) 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) 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 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() { _showResults_Timeout: function() {
document.getElementById('information-box-headline').innerHTML = OSRM.loc("SEARCH_RESULTS")+":"; document.getElementById('information-box-header').innerHTML =
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+OSRM.loc("TIMED_OUT")+".<p>"; "<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>";
}, },
@ -122,9 +132,9 @@ _showResults_Timeout: function() {
//update geo coordinates in input boxes //update geo coordinates in input boxes
updateLocation: function(marker_id) { updateLocation: function(marker_id) {
if (marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource()) { 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()) { } 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 // add result to DOM
if(parameters.marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource() ) 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() ) 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) { _showReverseResults_Timeout: function(response, parameters) {
if(!parameters.do_fallback) if(!parameters.do_fallback)

10
WebContent/OSRM.JSONP.js
View File

@ -66,8 +66,8 @@ OSRM.JSONP = {
OSRM.JSONP.fences[id] = undefined; // clean fence OSRM.JSONP.fences[id] = undefined; // clean fence
} }
OSRM.JSONP.sum[id] += new Number( new Date() - OSRM.JSONP.durations[id] ); // 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.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) // clean DOM (unfortunately, script elements cannot be reused by all browsers)
@ -85,9 +85,9 @@ OSRM.JSONP = {
// start timeout timer // start timeout timer
OSRM.JSONP.timers[id] = setTimeout(OSRM.JSONP.timeouts[id], timeout); 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.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;} // 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.JSONP.durations[id] = new Date();
// OSRM.debug.log("[jsonp] init: "+id); // OSRM.debug.log("[jsonp] init: "+id);
return true; 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"
};

29
WebContent/OSRM.Markers.js
View File

@ -118,14 +118,15 @@ onDragEnd: function(e) {
this.switchIcon(this.options.baseicon); this.switchIcon(this.options.baseicon);
this.parent.setPosition( e.target.getLatLng() ); this.parent.setPosition( e.target.getLatLng() );
OSRM.Routing.getRoute();
if (OSRM.G.route.isShown()) { if (OSRM.G.route.isShown()) {
OSRM.Routing.getRoute();
OSRM.G.route.hideOldRoute(); OSRM.G.route.hideOldRoute();
OSRM.G.route.hideUnnamedRoute(); OSRM.G.route.hideUnnamedRoute();
} } else {
if(OSRM.G.route.isShown()==false)
OSRM.Geocoder.updateAddress(this.parent.label); OSRM.Geocoder.updateAddress(this.parent.label);
document.getElementById('information-box').innerHTML = ""; // do we want this?
document.getElementById('information-box-header').innerHTML = "";
}
}, },
toString: function() { toString: function() {
return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")"; return "OSRM.RouteMarker: \""+this.label+"\", "+this.position+")";
@ -174,8 +175,8 @@ removeAll: function() {
for(var i=0; i<this.route.length;i++) for(var i=0; i<this.route.length;i++)
this.route[i].hide(); this.route[i].hide();
this.route.splice(0, this.route.length); this.route.splice(0, this.route.length);
document.getElementById('delete-source-marker').style.visibility = "hidden"; document.getElementById('gui-delete-source').style.visibility = "hidden";
document.getElementById('delete-target-marker').style.visibility = "hidden"; document.getElementById('gui-delete-target').style.visibility = "hidden";
}, },
removeVias: function() { removeVias: function() {
// assert correct route array s - v - t // assert correct route array s - v - t
@ -189,7 +190,7 @@ setSource: function(position) {
this.route[0].setPosition(position); this.route[0].setPosition(position);
else else
this.route.splice(0,0, new OSRM.RouteMarker(OSRM.C.SOURCE_LABEL, {draggable:true,icon:OSRM.G.icons['marker-source'],dragicon:OSRM.G.icons['marker-source-drag']}, position)); this.route.splice(0,0, new OSRM.RouteMarker(OSRM.C.SOURCE_LABEL, {draggable:true,icon:OSRM.G.icons['marker-source'],dragicon:OSRM.G.icons['marker-source-drag']}, position));
document.getElementById('delete-source-marker').style.visibility = "visible"; document.getElementById('gui-delete-source').style.visibility = "visible";
return 0; return 0;
}, },
setTarget: function(position) { setTarget: function(position) {
@ -198,7 +199,7 @@ setTarget: function(position) {
this.route[this.route.length-1].setPosition(position); this.route[this.route.length-1].setPosition(position);
else else
this.route.splice( this.route.length,0, new OSRM.RouteMarker(OSRM.C.TARGET_LABEL, {draggable:true,icon:OSRM.G.icons['marker-target'],dragicon:OSRM.G.icons['marker-target-drag']}, position)); this.route.splice( this.route.length,0, new OSRM.RouteMarker(OSRM.C.TARGET_LABEL, {draggable:true,icon:OSRM.G.icons['marker-target'],dragicon:OSRM.G.icons['marker-target-drag']}, position));
document.getElementById('delete-target-marker').style.visibility = "visible"; document.getElementById('gui-delete-target').style.visibility = "visible";
return this.route.length-1; return this.route.length-1;
}, },
setVia: function(id, position) { setVia: function(id, position) {
@ -216,17 +217,17 @@ removeMarker: function(id) {
// also remove vias if source or target are removed // also remove vias if source or target are removed
if( id==0 && this.route[0].label == OSRM.C.SOURCE_LABEL ) { if( id==0 && this.route[0].label == OSRM.C.SOURCE_LABEL ) {
this.removeVias(); this.removeVias();
document.getElementById('input-source-name').value = ""; document.getElementById('gui-input-source').value = "";
document.getElementById('information-box').innerHTML = ""; 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"; document.getElementById('gui-delete-source').style.visibility = "hidden";
} else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL ) { } else if( id == this.route.length-1 && this.route[ this.route.length-1 ].label == OSRM.C.TARGET_LABEL ) {
this.removeVias(); this.removeVias();
id = this.route.length-1; id = this.route.length-1;
document.getElementById('input-target-name').value = ""; document.getElementById('gui-input-target').value = "";
document.getElementById('information-box').innerHTML = ""; 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"; document.getElementById('gui-delete-target').style.visibility = "hidden";
} }
this.route[id].hide(); this.route[id].hide();

5
WebContent/OSRM.debug.js
View File

@ -60,7 +60,10 @@ OSRM.debug.init = function() {
box.appendChild(clear); box.appendChild(clear);
box.appendChild(OSRM.debug.content); box.appendChild(OSRM.debug.content);
}; };
// onload event
if(document.addEventListener) // FF, CH if(document.addEventListener) // FF, CH
document.addEventListener("DOMContentLoaded", OSRM.debug.init, false); document.addEventListener("DOMContentLoaded", OSRM.debug.init, false);
else // IE else // IE
OSRM.debug.init(); document.onreadystatechange = function(){if(document.readyState == "interactive" || document.readyState == "complete") OSRM.debug.init();};

26
WebContent/localization/OSRM.Locale.de.js
View File

@ -57,8 +57,30 @@ OSRM.Localization["de"] = {
"NO": "Nordost", "NO": "Nordost",
"SO": "Südost", "SO": "Südost",
"SW": "Südwest", "SW": "Südwest",
"NW": "Nordwest" "NW": "Nordwest",
// driving directions
"DIRECTION_1":"Links abbiegen[ auf <b>%s</b>]",
"DIRECTION_2":"Rechts abbiegen[ auf <b>%s</b>]",
"DIRECTION_3":"Umkehren[ auf <b>%s</b>]",
"DIRECTION_4":"Fahren Sie Richtung %s",
"DIRECTION_5":"Weiterfahren[ auf <b>%s</b>]",
"DIRECTION_6":"Leicht links abbiegen[ auf <b>%s</b>]",
"DIRECTION_7":"Leicht rechts abbiegen[ auf <b>%s</b>]",
"DIRECTION_8":"Scharf links abbiegen[ auf <b>%s</b>]",
"DIRECTION_9":"Scharf rechts abbiegen[ auf <b>%s</b>]",
"DIRECTION_10":"In den Kreisverkehr einfahren und bei erster Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_11":"In den Kreisverkehr einfahren und bei zweiter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_12":"In den Kreisverkehr einfahren und bei dritter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_13":"In den Kreisverkehr einfahren und bei vierter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_14":"In den Kreisverkehr einfahren und bei f<>nfter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_15":"In den Kreisverkehr einfahren und bei sechster Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_16":"In den Kreisverkehr einfahren und bei siebter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_17":"In den Kreisverkehr einfahren und bei achter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_18":"In den Kreisverkehr einfahren und bei neunter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_19":"In den Kreisverkehr einfahren und bei zehnter Möglichkeit verlassen[ auf <b>%s</b>]",
"DIRECTION_20":"In den Kreisverkehr einfahren und bei einer der vielen Möglichkeiten verlassen[ auf <b>%s</b>]",
"DIRECTION_21":"Sie haben Ihr Ziel erreicht"
}; };
// set GUI language on load // set GUI language on load
OSRM.GUI.setLanguage(); OSRM.Localization.change("de");

26
WebContent/localization/OSRM.Locale.en.js
View File

@ -57,8 +57,30 @@ OSRM.Localization["en"] = {
"NE": "northeast", "NE": "northeast",
"SE": "southeast", "SE": "southeast",
"SW": "southwest", "SW": "southwest",
"NW": "northwest" "NW": "northwest",
// driving directions
"DIRECTION_1":"Turn left[ on <b>%s</b>]",
"DIRECTION_2":"Turn right[ on <b>%s</b>]",
"DIRECTION_3":"U-Turn[ on <b>%s</b>]",
"DIRECTION_4":"Head %s",
"DIRECTION_5":"Continue[ on <b>%s</b>]",
"DIRECTION_6":"Turn slight left[ on <b>%s</b>]",
"DIRECTION_7":"Turn slight right[ on <b>%s</b>]",
"DIRECTION_8":"Turn sharp left[ on <b>%s</b>]",
"DIRECTION_9":"Turn sharp right[ on <b>%s</b>]",
"DIRECTION_10":"Enter roundabout and leave at first exit[ on <b>%s</b>]",
"DIRECTION_11":"Enter roundabout and leave at second exit[ on <b>%s</b>]",
"DIRECTION_12":"Enter roundabout and leave at third exit[ on <b>%s</b>]",
"DIRECTION_13":"Enter roundabout and leave at fourth exit[ on <b>%s</b>]",
"DIRECTION_14":"Enter roundabout and leave at fifth exit[ on <b>%s</b>]",
"DIRECTION_15":"Enter roundabout and leave at sixth exit[ on <b>%s</b>]",
"DIRECTION_16":"Enter roundabout and leave at seventh exit[ on <b>%s</b>]",
"DIRECTION_17":"Enter roundabout and leave at eighth exit[ on <b>%s</b>]",
"DIRECTION_18":"Enter roundabout and leave at nineth exit[ on <b>%s</b>]",
"DIRECTION_19":"Enter roundabout and leave at tenth exit[ on <b>%s</b>]",
"DIRECTION_20":"Enter roundabout and leave at one of the too many exits[ on <b>%s</b>]",
"DIRECTION_21":"You have reached your destination"
}; };
//set GUI language on load //set GUI language on load
OSRM.GUI.setLanguage(); OSRM.Localization.change("en");

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

@ -27,7 +27,7 @@ supported_languages: ["en", "de"],
init: function() { init: function() {
// create dropdown menu // create dropdown menu
var select = document.createElement('select'); var select = document.createElement('select');
select.id = "language-toggle"; select.id = "gui-language-toggle";
select.onchange = function() { OSRM.Localization.change(this.value); }; select.onchange = function() { OSRM.Localization.change(this.value); };
// fill dropdown menu // fill dropdown menu
@ -39,8 +39,8 @@ init: function() {
} }
// add element to DOM // add element to DOM
var main_input_header = document.getElementById('main-input-header'); var input_mask_header = document.getElementById('input-mask-header');
main_input_header.insertBefore(select,main_input_header.firstChild); input_mask_header.insertBefore(select,input_mask_header.firstChild);
// initialize default language // initialize default language
OSRM.Localization.change( OSRM.DEFAULTS.LANGUAGE ); OSRM.Localization.change( OSRM.DEFAULTS.LANGUAGE );
@ -51,6 +51,8 @@ change: function(language) {
OSRM.DEFAULTS.LANGUAGE = language; OSRM.DEFAULTS.LANGUAGE = language;
if( OSRM.Localization[language]) { if( OSRM.Localization[language]) {
OSRM.GUI.setLanguage(); OSRM.GUI.setLanguage();
if( document.getElementById('information-box').innerHTML != "" )
OSRM.RoutingDescription.show( OSRM.G.response );
} else { } else {
var script = document.createElement('script'); var script = document.createElement('script');
script.type = 'text/javascript'; script.type = 'text/javascript';

430
WebContent/main.css
View File

@ -18,25 +18,19 @@ or see http://www.gnu.org/licenses/agpl.txt.
/* OSRM CSS styles */ /* OSRM CSS styles */
/* map -> fullscreen */ /* fullscreen map */
body { html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
}
html, body, #map {
height: 100%; height: 100%;
} }
#map { #map {
height: 100%;
z-index: 0; z-index: 0;
} }
/* styles for gui */ /* general styles for gui boxes */
.vquad
{
height:10px;
}
.gui-wrapper .gui-wrapper
{ {
position:absolute; position:absolute;
@ -63,11 +57,13 @@ html, body, #map {
padding:5px; padding:5px;
} }
/* styles for specific gui boxes */
#main-wrapper #main-wrapper
{ {
width:410px; width:410px;
height:95%;
top:5px; top:5px;
bottom:25px;
left:5px; left:5px;
} }
#main-input #main-input
@ -78,10 +74,9 @@ html, body, #map {
#main-output #main-output
{ {
width:390px; width:390px;
top:220px; top:220px; /* main-input.height+2*gui-box.margin+2*gui-box.padding */
bottom:0px; bottom:0px;
} }
#blob-wrapper #blob-wrapper
{ {
left:-5px; left:-5px;
@ -96,79 +91,75 @@ html, body, #map {
-webkit-border-bottom-left-radius:0px; -webkit-border-bottom-left-radius:0px;
visibility:hidden; visibility:hidden;
} }
#blob-input #blob-content
{ {
width:26px; width:16px;
height:26px; height:16px;
border-top-left-radius:0px; border-top-left-radius:0px;
border-bottom-left-radius:0px; border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px; -moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px; -moz-border-radius-bottomleft:0px;
-webkit-border-top-left-radius:0px; -webkit-border-top-left-radius:0px;
-webkit-border-bottom-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; left:0px;
font-size:10px; right:0px;
}
.main-options-left-box
{
position:absolute;
left:5px;
top: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; margin:3px;
right:5px;
top:5px;
} }
#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; cursor:pointer;
color:#0000ff color:#0000ff
} }
#options-toggle:hover #gui-options-toggle:hover
{ {
color:#ff0000 color:#ff0000
} }
@ -177,111 +168,92 @@ html, body, #map {
visibility:hidden; 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 #information-box
{ {
position:absolute; position:absolute;
bottom:15px; bottom:20px;
top:60px; top:65px;
width:380px; width:380px;
font-size:12px;
overflow:auto; overflow:auto;
margin:5px; margin:5px;
} }
#legal-notice
.route-summary
{ {
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; color:#0000ff;
text-decoration:none; text-decoration:none;
cursor:pointer; cursor:pointer;
} }
#gpx-link:hover .result-link:hover
{ {
color:#ff0000; color:#ff0000;
} }
/* style for information-box table (search results, driving directions) */
.results-table .results-table
{ {
border-spacing:0px; border-spacing:0px;
width:100%;
} }
.results-odd .results-odd
{ {
background-color: #FAF3E9; //#ffffff; background-color: #FFFDE3;
} }
.results-even .results-even
{ {
background-color: #F2DE9C; //#ffffe0; background-color: #FFF9BB;
} }
.result-counter .result-counter
{ {
text-align:right; text-align:right;
vertical-align: top; vertical-align:top;
width:30px;
font-weight:bold; font-weight:bold;
padding-left:5px; padding:1px 5px 1px 5px;
padding-right:5px;
padding-top:1px;
padding-bottom:1px;
} }
.result-items .result-items
{ {
text-align:left; text-align:left;
vertical-align: middle; vertical-align: middle;
width:100%; width:100%;
padding-left:1px; padding:1px;
padding-right:1px;
padding-top:1px;
padding-bottom:1px;
} }
.result-direction .result-directions
{ {
width:30px; text-align:left;
padding-left:1px; vertical-align: middle;
padding-right:1px; padding:1px 5px 1px 5px;
padding-top:1px;
padding-bottom:1px;
} }
.result-distance .result-distance
{ {
text-align:right; text-align:right;
vertical-align: middle; vertical-align: middle;
width:30px; padding:1px 1px 1px 5px;
padding-left:1px;
padding-right:1px;
padding-top:1px;
padding-bottom:1px;
} }
.result-item .result-item
{ {
@ -292,18 +264,135 @@ html, body, #map {
{ {
color:#ff0000 color:#ff0000
} }
.no-results
#legal-notice
{ {
position:absolute; text-align:center;
right:0px; margin:28px;
bottom:0px; }
padding:5px;
font-size:10px;
/* 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)*/ /* utility styles (defined above buttons, so that buttons retain cursor:pointer)*/
.quad
{
min-width:10px;
min-height:10px;
}
.not-selectable .not-selectable
{ {
cursor:default; cursor:default;
@ -322,72 +411,31 @@ html, body, #map {
user-select: text; user-select: text;
} }
/* buttons */ .checkbox-label
.button
{ {
cursor:pointer; vertical-align:2px;
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;
} }
/* delete marker */ .full
.delete-marker
{ {
cursor:pointer; display:table;
position:absolute; width:100%;
right:5px;
top:3px;
width:16px;
height:16px;
background-image:url("images/cancel.png");
visibility:hidden;
} }
.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;
} }
.center
/* printer button */
.printer-inactive
{ {
cursor:pointer; display:table-cell;
width:16px; text-align:center;
height:16px; vertical-align:middle;
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");
} }

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.base.js" type="text/javascript"></script>
<script src="OSRM.config.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="main.js" type="text/javascript"></script>
<script src="OSRM.Markers.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 -->
<body onload="OSRM.init();"> <body class="base-font">
<!--map--> <!--map-->
<div id="map"></div> <div id="map"></div>
<!-- show ui blob --> <!-- show ui blob -->
<div id="blob-wrapper" class="gui-wrapper"> <div id="blob-wrapper" class="gui-wrapper">
<div id="blob-input" class="gui-box"> <div id="blob-content" class="gui-box">
<div class="main-toggle-in" onclick="OSRM.GUI.toggleMain();"></div> <div id="gui-toggle-in" class="iconic-button"></div>
</div> </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"> <div id="main-wrapper" class="gui-wrapper not-selectable">
<!-- input box --> <!-- input box -->
<div class="gui-box" id="main-input"> <div id="main-input" class="gui-box">
<div style="position:absolute;display:table;width:390px;" id="main-input-header"> <!-- header -->
<div style="display:table-cell;background-repeat:no-repeat;background-position:center;" id="printer" class="printer" onclick="OSRM.Printing.print();"></div> <div id="input-mask-header">
<div style="display:table-cell;width:8px;background-repeat:no-repeat;background-position:center;"></div> <div id="gui-toggle-out" class="iconic-button top-right-button"></div>
<div style="display:table-cell;background-repeat:no-repeat;background-position:center;" class="main-toggle-out" onclick="OSRM.GUI.toggleMain()"></div> <div class="quad top-right-button"></div>
<div id="gui-printer" class="iconic-button top-right-button"></div>
</div> </div>
<!-- input mask -->
<div id="input-mask">
<img id="osrm-logo" alt="OSRM Logo" src="images/osrm-logo.png" />
<!-- source/target input --> <!-- source/target input -->
<table class="full"> <div class="full">
<tr> <div id="input-source" class="input-marker">
<td id="gui-search-source-label">Start:</td> <div class="left"><span id="gui-search-source-label">Start:</span></div>
<td><div style="position:relative;"> <div class="center input-box"><input id="gui-input-source" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" /></div>
<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 class="center"><div id="gui-delete-source" class="iconic-button delete-marker"></div></div>
<div id="delete-source-marker" class="delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('source')"></div></div></td> <div class="right"><a class="button" id="gui-search-source">Zeigen</a></div>
<td class="right"><a class="button not-selectable" id="gui-search-source" onclick="OSRM.RoutingGUI.showMarker('source')">Zeigen</a></td> </div>
</tr> <div id="input-target" class="input-marker">
<div class="left"><span id="gui-search-target-label">Ende:</span></div>
<tr> <div class="center input-box"><input id="gui-input-target" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" /></div>
<td id="gui-search-target-label">Ende:</td> <div class="center"><div id="gui-delete-target" class="iconic-button delete-marker"></div></div>
<td><div style="position:relative;"> <div class="right"><a class="button" id="gui-search-target">Zeigen</a></div>
<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 id="delete-target-marker" class="delete-marker" onclick="OSRM.RoutingGUI.deleteMarker('target')"></div></div></td> </div>
<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="OSRM.RoutingGUI.showMarker('target');">Zeigen</a></td>
</tr> <div class="quad"></div>
</table>
<!-- action buttons --> <!-- action buttons -->
<div class="vquad"></div> <div class="full">
<table style="width:100%"> <div class="left"><a class="button" id="gui-reset">Reset</a></div>
<tr> <div class="right"><a class="button" id="gui-reverse">Umdrehen</a></div>
<td> <a class="button not-selectable" id="gui-reset" onclick="OSRM.RoutingGUI.resetRouting();">Reset</a></td> </div>
<td class="right"> <a class="button not-selectable" id="gui-reverse" onclick="OSRM.RoutingGUI.reverseRouting();">Umdrehen</a></td> </div>
</tr>
</table> <div class="quad"></div>
<!-- options --> <!-- options -->
<span class="main-options" id="options-toggle" onclick="OSRM.GUI.toggleOptions()">Kartenwerkzeuge</span> <div id="input-mask-options">
<div class="main-options" id="options-box">
<span class="main-options-left-box"> <!-- option toggle -->
<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 id="gui-options-toggle" class="small-font">Kartenwerkzeuge</span>
</span>
<span class="main-options-right-box"> <!-- actual options -->
<a class="button not-selectable" id="open-josm" onclick="OSRM.RoutingGUI.openJOSM();">JOSM</a> <div id="options-box" class="full">
<a class="button not-selectable" id="open-osmbugs" onclick="OSRM.RoutingGUI.openOSMBugs();">OSM Bugs</a> <div class="left">
</span> <input type="checkbox" id="option-highlight-nonames" value="highlight-nonames" />
<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">JOSM</a>
<a class="button" id="open-osmbugs">OSM Bugs</a>
</div>
</div>
</div> </div>
</div> </div>
<!-- output box --> <!-- output box -->
<div class="gui-box not-selectable" id="main-output"> <div id="main-output" class="gui-box">
<div id="information-box-headline"></div> <div id="information-box-header"></div>
<div id="information-box"></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>
</div> </div>

14
WebContent/main.js
View File

@ -18,9 +18,6 @@ or see http://www.gnu.org/licenses/agpl.txt.
// OSRM initialization // OSRM initialization
// [initialization, image prefetching] // [initialization, image prefetching]
// will hold the Leaflet map object
OSRM.GLOBALS.map = null;
// onload initialization routine // onload initialization routine
OSRM.init = function() { OSRM.init = function() {
@ -152,7 +149,7 @@ OSRM.checkURL = function(){
if( destination_name == null ) if( destination_name == null )
OSRM.Geocoder.updateAddress( OSRM.C.TARGET_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG ); OSRM.Geocoder.updateAddress( OSRM.C.TARGET_LABEL, OSRM.C.DO_FALLBACK_TO_LAT_LNG );
else 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].show();
OSRM.G.markers.route[index].centerView(); OSRM.G.markers.route[index].centerView();
return; return;
@ -185,4 +182,11 @@ OSRM.checkURL = function(){
// compute route // compute route
OSRM.Routing.getRoute(); OSRM.Routing.getRoute();
} }
}; };
// 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();};

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

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

110
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); OSRM.G.markers.highlight.centerView(OSRM.DEFAULTS.HIGHLIGHT_ZOOM_LEVEL);
}, },
onClickCreateShortcut: function(src){ 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'); 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){ showRouteLink: function(response){
document.getElementById('route-prelink').innerHTML = '[<a id="gpx-link" class = "text-selectable" href="' +response.ShortURL+ '">'+response.ShortURL+'</a>]'; document.getElementById('route-link').innerHTML = '[<a class="result-link 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"/>]';
}, },
showRouteLink_TimeOut: function(){ 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 // handling of routing description
@ -47,17 +46,17 @@ show: function(response) {
// compute query string // compute query string
var query_string = '?rebuild=1'; var query_string = '?rebuild=1';
for(var i=0; i<OSRM.G.markers.route.length; i++) 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 // 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 // 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 // create route description
var route_desc = ""; 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++){ for(var i=0; i < response.route_instructions.length; i++){
//odd or even ? //odd or even ?
@ -71,7 +70,16 @@ show: function(response) {
route_desc += "</td>"; route_desc += "</td>";
route_desc += '<td class="result-items">'; 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 )
// 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]; route_desc += response.route_instructions[i][0];
if( i == 0 ) if( i == 0 )
route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] ); route_desc += ' ' + OSRM.loc( response.route_instructions[i][6] );
@ -79,8 +87,7 @@ show: function(response) {
route_desc += ' on '; route_desc += ' on ';
route_desc += '<b>' + response.route_instructions[i][1] + '</b>'; route_desc += '<b>' + response.route_instructions[i][1] + '</b>';
} }
//route_desc += ' for '; route_desc += '</div>';
route_desc += '</span>';
route_desc += "</td>"; route_desc += "</td>";
route_desc += '<td class="result-distance">'; route_desc += '<td class="result-distance">';
@ -90,52 +97,61 @@ show: function(response) {
route_desc += "</tr>"; route_desc += "</tr>";
} }
route_desc += '</table>';
route_desc += '</table>';
headline = ""; // create header
headline += OSRM.loc("ROUTE_DESCRIPTION")+":<br>"; header =
headline += '<div style="float:left;width:40%">'; '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
headline += "<span class='route-summary'>" '<div class="full">' +
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) '<div class="left">' +
+ "<br>" '<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) '<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
+ "</span>"; '</div>' +
headline += '</div>'; '<div class="right">' +
headline += '<div style="float:left;text-align:right;width:60%;">'+route_link+'<br>'+gpx_link+'</div>'; '<div id="route-link" class="header-content">' + route_link + '</div>' +
'<div class="header-content">' + gpx_link + '</div>' +
'</div>' +
'</div>';
var output = ""; // update DOM
output += route_desc; document.getElementById('information-box-header').innerHTML = header;
document.getElementById('information-box').innerHTML = route_desc;
document.getElementById('information-box-headline').innerHTML = headline;
document.getElementById('information-box').innerHTML = output;
}, },
// simple description // simple description
showSimple: function(response) { showSimple: function(response) {
headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>"; header =
headline += "<span class='route-summary'>" '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
+ OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) '<div class="full">' +
+ "<br>" '<div class="left">' +
+ OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) '<div class="header-content">' + OSRM.loc("DISTANCE")+": " + OSRM.Utils.metersToDistance(response.route_summary.total_distance) + '</div>' +
+ "</span>"; '<div class="header-content">' + OSRM.loc("DURATION")+": " + OSRM.Utils.secondsToTime(response.route_summary.total_time) + '</div>' +
headline += '<br><br>'; '</div>' +
'<div class="right">' +
'</div>' +
'</div>';
document.getElementById('information-box-headline').innerHTML = headline; // update DOM
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>"; 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 // no description
showNA: function( display_text ) { showNA: function( display_text ) {
headline = OSRM.loc("ROUTE_DESCRIPTION")+":<br>"; header =
headline += "<span class='route-summary'>" '<div class="header-title">' + OSRM.loc("ROUTE_DESCRIPTION") + '</div>' +
+ OSRM.loc("DISTANCE")+": N/A" '<div class="full">' +
+ "<br>" '<div class="left">' +
+ OSRM.loc("DURATION")+": N/A" '<div class="header-content">' + OSRM.loc("DISTANCE")+": N/A" + '</div>' +
+ "</span>"; '<div class="header-content">' + OSRM.loc("DURATION")+": N/A" + '</div>' +
headline += '<br><br>'; '</div>' +
'<div class="right">' +
'</div>' +
'</div>';
document.getElementById('information-box-headline').innerHTML = headline; // update DOM
document.getElementById('information-box').innerHTML = "<br><p style='font-size:14px;font-weight:bold;text-align:center;'>"+display_text+".<p>"; 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 // map driving instructions to icons

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

@ -23,15 +23,15 @@ OSRM.RoutingGUI = {
// click: button "reset" // click: button "reset"
resetRouting: function() { resetRouting: function() {
document.getElementById('input-source-name').value = ""; document.getElementById('gui-input-source').value = "";
document.getElementById('input-target-name').value = ""; document.getElementById('gui-input-target').value = "";
OSRM.G.route.hideAll(); OSRM.G.route.hideAll();
OSRM.G.markers.removeAll(); OSRM.G.markers.removeAll();
OSRM.G.markers.highlight.hide(); OSRM.G.markers.highlight.hide();
document.getElementById('information-box').innerHTML = ""; document.getElementById('information-box').innerHTML = "";
document.getElementById('information-box-headline').innerHTML = ""; document.getElementById('information-box-header').innerHTML = "";
OSRM.JSONP.reset(); OSRM.JSONP.reset();
}, },
@ -39,9 +39,9 @@ resetRouting: function() {
// click: button "reverse" // click: button "reverse"
reverseRouting: function() { reverseRouting: function() {
// invert input boxes // invert input boxes
var tmp = document.getElementById("input-source-name").value; var tmp = document.getElementById("gui-input-source").value;
document.getElementById("input-source-name").value = document.getElementById("input-target-name").value; document.getElementById("gui-input-source").value = document.getElementById("gui-input-target").value;
document.getElementById("input-target-name").value = tmp; document.getElementById("gui-input-target").value = tmp;
// invert route // invert route
OSRM.G.markers.route.reverse(); OSRM.G.markers.route.reverse();
@ -67,7 +67,7 @@ reverseRouting: function() {
OSRM.G.markers.highlight.hide(); OSRM.G.markers.highlight.hide();
} else { } else {
document.getElementById('information-box').innerHTML = ""; 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) { inputChanged: function(marker_id) {
if( marker_id == OSRM.C.SOURCE_LABEL) 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) 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" // click: button "open JOSM"