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

all visible lat/lng coordinates are truncated after 6 digits (this

Browse Source 
includes inputboxes, osmbugs link, route link, gpx link),
moved all events from html to javascript
This commit is contained in:
shiin 2012-04-08 19:50:30 +02:00
parent 13f0a3fb6b
commit 0fd8d4d8cf
9 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
WebContent/OSRM.GUI.js
View File

@ -29,6 +29,34 @@ width: null,
init: function() {
OSRM.GUI.visible = true;
OSRM.GUI.width = document.getElementById("main-wrapper").clientWidth;
// init events
// [TODO: switch to new event model]
document.getElementById("gui-toggle-in").onclick = OSRM.GUI.toggleMain;
document.getElementById("gui-toggle-out").onclick = OSRM.GUI.toggleMain;
document.getElementById("gui-printer").onclick = OSRM.Printing.print;
document.getElementById("gui-input-source").onchange = function() {OSRM.RoutingGUI.inputChanged(OSRM.C.SOURCE_LABEL);};
document.getElementById("gui-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-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;
// 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
@ -38,17 +66,17 @@ setLanguage: function() {
document.getElementById("gui-reset").innerHTML = OSRM.loc("GUI_RESET");
document.getElementById("gui-reverse").innerHTML = OSRM.loc("GUI_REVERSE");
document.getElementById("gui-option-highlight-nonames-label").innerHTML = OSRM.loc("GUI_HIGHLIGHT_UNNAMED_ROADS");
document.getElementById("options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS");
document.getElementById("gui-options-toggle").innerHTML = OSRM.loc("GUI_OPTIONS");
document.getElementById("gui-search-source").innerHTML = OSRM.loc("GUI_SEARCH");
document.getElementById("gui-search-target").innerHTML = OSRM.loc("GUI_SEARCH");
document.getElementById("gui-search-source-label").innerHTML = OSRM.loc("GUI_START")+":";
document.getElementById("gui-search-target-label").innerHTML = OSRM.loc("GUI_END")+":";
document.getElementById("input-source-name").title = OSRM.loc("GUI_START_TOOLTIP");
document.getElementById("input-target-name").title = OSRM.loc("GUI_END_TOOLTIP");
document.getElementById("gui-input-source").title = OSRM.loc("GUI_START_TOOLTIP");
document.getElementById("gui-input-target").title = OSRM.loc("GUI_END_TOOLTIP");
document.getElementById("legal-notice").innerHTML = OSRM.loc("GUI_LEGAL_NOTICE");
document.getElementById('input-source-name').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
document.getElementById('input-target-name').value = OSRM.DEFAULTS.ONLOAD_TARGET;
document.getElementById('gui-input-source').value = OSRM.DEFAULTS.ONLOAD_SOURCE;
document.getElementById('gui-input-target').value = OSRM.DEFAULTS.ONLOAD_TARGET;
},
// show/hide main-gui
@ -68,15 +96,9 @@ toggleMain: function() {
document.getElementById('main-wrapper').style.left=-OSRM.GUI.width+"px";
}
// execute after animation
if( OSRM.Browser.FF3==-1 && OSRM.Browser.IE6_9==-1 ) {
document.getElementById('main-wrapper').addEventListener("transitionend", OSRM.GUI.onMainTransitionEnd, false);
document.getElementById('main-wrapper').addEventListener("webkitTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
document.getElementById('main-wrapper').addEventListener("oTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
document.getElementById('main-wrapper').addEventListener("MSTransitionEnd", OSRM.GUI.onMainTransitionEnd, false);
} else {
// execute after animation (old browser support)
if( OSRM.Browser.FF3!=-1 || OSRM.Browser.IE6_9!=-1 )
OSRM.GUI.onMainTransitionEnd();
}
},
// do stuff after main-gui animation finished

10
WebContent/OSRM.Geocoder.js
View File

@ -91,7 +91,7 @@ _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+'\', '+parseFloat(result.lat).toFixed(6)+', '+parseFloat(result.lon).toFixed(6)+');">'+result.display_name+'</div>';
html += '<div class="result-item" onclick="OSRM.Geocoder._onclickResult(\''+parameters.marker_id+'\', '+result.lat+', '+result.lon+');">'+result.display_name+'</div>';
}
html += "</td></tr>";
}
@ -128,9 +128,9 @@ _showResults_Timeout: function() {
//update geo coordinates in input boxes
updateLocation: function(marker_id) {
if (marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource()) {
document.getElementById("input-source-name").value = OSRM.G.markers.route[0].getLat().toFixed(6) + ", " + OSRM.G.markers.route[0].getLng().toFixed(6);
document.getElementById("gui-input-source").value = OSRM.G.markers.route[0].getLat().toFixed(6) + ", " + OSRM.G.markers.route[0].getLng().toFixed(6);
} else if (marker_id == OSRM.C.TARGET_LABEL && OSRM.G.markers.hasTarget()) {
document.getElementById("input-target-name").value = OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLat().toFixed(6) + ", " + OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLng().toFixed(6);
document.getElementById("gui-input-target").value = OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLat().toFixed(6) + ", " + OSRM.G.markers.route[OSRM.G.markers.route.length-1].getLng().toFixed(6);
}
},
@ -198,9 +198,9 @@ _showReverseResults: function(response, parameters) {
// add result to DOM
if(parameters.marker_id == OSRM.C.SOURCE_LABEL && OSRM.G.markers.hasSource() )
document.getElementById("input-source-name").value = address;
document.getElementById("gui-input-source").value = address;
else if(parameters.marker_id == OSRM.C.TARGET_LABEL && OSRM.G.markers.hasTarget() )
document.getElementById("input-target-name").value = address;
document.getElementById("gui-input-target").value = address;
},
_showReverseResults_Timeout: function(response, parameters) {
if(!parameters.do_fallback)

16
WebContent/OSRM.Markers.js
View File

@ -174,8 +174,8 @@ removeAll: function() {
for(var i=0; i<this.route.length;i++)
this.route[i].hide();
this.route.splice(0, this.route.length);
document.getElementById('delete-source-marker').style.visibility = "hidden";
document.getElementById('delete-target-marker').style.visibility = "hidden";
document.getElementById('gui-delete-source').style.visibility = "hidden";
document.getElementById('gui-delete-target').style.visibility = "hidden";
},
removeVias: function() {
// assert correct route array s - v - t
@ -189,7 +189,7 @@ setSource: function(position) {
this.route[0].setPosition(position);
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));
document.getElementById('delete-source-marker').style.visibility = "visible";
document.getElementById('gui-delete-source').style.visibility = "visible";
return 0;
},
setTarget: function(position) {
@ -198,7 +198,7 @@ setTarget: function(position) {
this.route[this.route.length-1].setPosition(position);
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));
document.getElementById('delete-target-marker').style.visibility = "visible";
document.getElementById('gui-delete-target').style.visibility = "visible";
return this.route.length-1;
},
setVia: function(id, position) {
@ -216,17 +216,17 @@ removeMarker: function(id) {
// also remove vias if source or target are removed
if( id==0 && this.route[0].label == OSRM.C.SOURCE_LABEL ) {
this.removeVias();
document.getElementById('input-source-name').value = "";
document.getElementById('gui-input-source').value = "";
document.getElementById('information-box').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 ) {
this.removeVias();
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-header').innerHTML = "";
document.getElementById('delete-target-marker').style.visibility = "hidden";
document.getElementById('gui-delete-target').style.visibility = "hidden";
}
this.route[id].hide();

5
WebContent/OSRM.debug.js
View File

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

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

@ -27,7 +27,7 @@ supported_languages: ["en", "de"],
init: function() {
// create dropdown menu
var select = document.createElement('select');
select.id = "language-toggle";
select.id = "gui-language-toggle";
select.onchange = function() { OSRM.Localization.change(this.value); };
// fill dropdown menu

12
WebContent/main.css
View File

@ -126,7 +126,7 @@ html, body {
/* styles for main-input input-mask-header */
#language-toggle
#gui-language-toggle
{
border: 0px;
text-decoration:none;
@ -154,12 +154,12 @@ html, body {
/* styles for main-input input-mask-options */
#options-toggle
#gui-options-toggle
{
cursor:pointer;
color:#0000ff
}
#options-toggle:hover
#gui-options-toggle:hover
{
color:#ff0000
}
@ -335,15 +335,15 @@ html, body {
background-image:url("images/restore_active.png");
}
#printer
#gui-printer
{
background-image:url("images/printer.png");
}
#printer:hover
#gui-printer:hover
{
background-image:url("images/printer_hover.png");
}
#printer:active
#gui-printer:active
{
background-image:url("images/printer_active.png");
}

30
WebContent/main.html
View File

@ -71,7 +71,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- body -->
<body onload="OSRM.init();" class="base-font">
<body class="base-font">
<!--map-->
<div id="map"></div>
@ -79,7 +79,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- show ui blob -->
<div id="blob-wrapper" class="gui-wrapper">
<div id="blob-content" class="gui-box">
<div id="gui-toggle-in" class="iconic-button" onclick="OSRM.GUI.toggleMain();"></div>
<div id="gui-toggle-in" class="iconic-button"></div>
</div>
</div>
@ -90,9 +90,9 @@ or see http://www.gnu.org/licenses/agpl.txt.
<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 id="gui-toggle-out" class="iconic-button top-right-button"></div>
<div class="quad top-right-button"></div>
<div id="printer" class="iconic-button top-right-button" onclick="OSRM.Printing.print();"></div>
<div id="gui-printer" class="iconic-button top-right-button"></div>
</div>
<!-- input mask -->
@ -102,15 +102,15 @@ or see http://www.gnu.org/licenses/agpl.txt.
<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 class="center input-box"><input id="gui-input-source" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" /></div>
<div class="center"><div id="gui-delete-source" class="iconic-button delete-marker"></div></div>
<div class="right"><a class="button" id="gui-search-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 class="center input-box"><input id="gui-input-target" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" /></div>
<div class="center"><div id="fui-delete-target" class="iconic-button delete-marker"></div></div>
<div class="right"><a class="button" id="gui-search-target">Zeigen</a></div>
</div>
</div>
@ -118,8 +118,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
<!-- action buttons -->
<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 class="left"><a class="button" id="gui-reset">Reset</a></div>
<div class="right"><a class="button" id="gui-reverse">Umdrehen</a></div>
</div>
</div>
@ -129,7 +129,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<div id="input-mask-options">
<!-- option toggle -->
<span id="options-toggle" class="small-font" onclick="OSRM.GUI.toggleOptions()">Kartenwerkzeuge</span>
<span id="options-toggle" class="small-font">Kartenwerkzeuge</span>
<!-- actual options -->
<div id="options-box" class="full">
@ -138,8 +138,8 @@ or see http://www.gnu.org/licenses/agpl.txt.
<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>
<a class="button" id="open-josm">JOSM</a>
<a class="button" id="open-osmbugs">OSM Bugs</a>
</div>
</div>
</div>

14
WebContent/main.js
View File

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

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

@ -23,8 +23,8 @@ OSRM.RoutingGUI = {
// click: button "reset"
resetRouting: function() {
document.getElementById('input-source-name').value = "";
document.getElementById('input-target-name').value = "";
document.getElementById('gui-input-source').value = "";
document.getElementById('gui-input-target').value = "";
OSRM.G.route.hideAll();
OSRM.G.markers.removeAll();
@ -39,9 +39,9 @@ resetRouting: function() {
// click: button "reverse"
reverseRouting: function() {
// invert input boxes
var tmp = document.getElementById("input-source-name").value;
document.getElementById("input-source-name").value = document.getElementById("input-target-name").value;
document.getElementById("input-target-name").value = tmp;
var tmp = document.getElementById("gui-input-source").value;
document.getElementById("gui-input-source").value = document.getElementById("gui-input-target").value;
document.getElementById("gui-input-target").value = tmp;
// invert route
OSRM.G.markers.route.reverse();
@ -86,9 +86,9 @@ showMarker: function(marker_id) {
// changed: any inputbox (is called when return is pressed [after] or focus is lost [before])
inputChanged: function(marker_id) {
if( marker_id == OSRM.C.SOURCE_LABEL)
OSRM.Geocoder.call(OSRM.C.SOURCE_LABEL, document.getElementById('input-source-name').value);
OSRM.Geocoder.call(OSRM.C.SOURCE_LABEL, document.getElementById('gui-input-source').value);
else if( marker_id == OSRM.C.TARGET_LABEL)
OSRM.Geocoder.call(OSRM.C.TARGET_LABEL, document.getElementById('input-target-name').value);
OSRM.Geocoder.call(OSRM.C.TARGET_LABEL, document.getElementById('gui-input-target').value);
},
// click: button "open JOSM"