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

made reverse geocoding more intuitive,

Browse Source 
changed search and route buttons to centering buttons
This commit is contained in:
DennisSchiefer 2012-03-16 07:22:47 +01:00
parent 879d73c629
commit 26c9d357f0
5 changed files with 55 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
WebContent/OSRM.Markers.js
View File

@ -26,7 +26,8 @@ OSRM.Marker = function( label, style, position ) {
this.marker = new L.MouseMarker( this.position, style );
this.marker.parent = this;
this.dirty = true;
this.dirty_move = true;
this.dirty_type = true;
this.shown = false;
this.hint = undefined;
@ -107,7 +108,7 @@ onClick: function(e) {
my_markers.highlight.hide();
},
onDrag: function(e) {
this.parent.dirty = true;
this.parent.dirty_move = true;
this.parent.setPosition( e.target.getLatLng() );
if(OSRM.dragging == true) // TODO: hack that deals with drag events after dragend event
getRoute(OSRM.NO_DESCRIPTION);

28
WebContent/geocoder.js
View File

@ -27,9 +27,9 @@ OSRM.TARGET_MARKER_LABEL = "target";
// update geo coordinates in input boxes
function updateLocation(marker_id) {
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty == true ) {
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty_move == true ) {
document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty == true) {
} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty_move == true) {
document.getElementById("input-target-name").value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6) + ", " + my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);
}
}
@ -37,9 +37,9 @@ function updateLocation(marker_id) {
// process input request and call geocoder if needed
function callGeocoder(marker_id, query) {
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty == false)
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty_move == false && my_markers.route[0].dirty_type == false)
return;
if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty == false)
if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty_move == false && my_markers.route[my_markers.route.length-1].dirty_type == false)
return;
//geo coordinates given -> go directly to drawing results
@ -61,7 +61,7 @@ function callGeocoder(marker_id, query) {
// helper function for clicks on geocoder search results
function onclickGeocoderResult(marker_id, lat, lon, do_reverse_geocode ) {
function onclickGeocoderResult(marker_id, lat, lon, do_reverse_geocode, zoom ) {
var index;
if( marker_id == OSRM.SOURCE_MARKER_LABEL )
index = my_markers.setSource( new L.LatLng(lat, lon) );
@ -72,12 +72,16 @@ function onclickGeocoderResult(marker_id, lat, lon, do_reverse_geocode ) {
if( do_reverse_geocode == true )
updateReverseGeocoder(marker_id);
else
my_markers.route[index].dirty = false;
if( zoom == undefined )
zoom = true;
my_markers.route[index].show();
my_markers.route[index].centerView();
if( !my_markers.route[index].dirty_move || my_markers.route[index].dirty_type )
my_markers.route[index].centerView(zoom);
getRoute(OSRM.FULL_DESCRIPTION);
my_markers.route[index].dirty_move = false;
my_markers.route[index].dirty_type = false;
}
// process JSONP response of geocoder
@ -137,10 +141,10 @@ OSRM.REVERSE_GEOCODE_POST = 'http://nominatim.openstreetmap.org/reverse?format=j
//update reverse geocoder informatiopn in input boxes
function updateReverseGeocoder(marker_id) {
if (marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0].dirty == true ) {
if (marker_id == OSRM.SOURCE_MARKER_LABEL ) { //&& my_markers.route[0].dirty == true ) {
document.getElementById("input-source-name").value = my_markers.route[0].getPosition().lat.toFixed(6) + ", " + my_markers.route[0].getPosition().lng.toFixed(6);
callReverseGeocoder("source", my_markers.route[0].getPosition().lat, my_markers.route[0].getPosition().lng);
} else if (marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1].dirty == true) {
} else if (marker_id == OSRM.TARGET_MARKER_LABEL ) { //&& my_markers.route[my_markers.route.length-1].dirty == true) {
document.getElementById("input-target-name").value = my_markers.route[my_markers.route.length-1].getPosition().lat.toFixed(6) + ", " + my_markers.route[my_markers.route.length-1].getPosition().lng.toFixed(6);
callReverseGeocoder("target", my_markers.route[my_markers.route.length-1].getPosition().lat, my_markers.route[my_markers.route.length-1].getPosition().lng);
}
@ -181,10 +185,10 @@ function showReverseGeocoderResults(marker_id, response) {
if(marker_id == OSRM.SOURCE_MARKER_LABEL) {
document.getElementById("input-source-name").value = address;
my_markers.route[0].dirty = false;
//my_markers.route[0].dirty = false;
} else if(marker_id == OSRM.TARGET_MARKER_LABEL) {
document.getElementById("input-target-name").value = address;
my_markers.route[my_markers.route.length-1].dirty = false;
//my_markers.route[my_markers.route.length-1].dirty = false;
}
}

10
WebContent/main.html
View File

@ -88,18 +88,18 @@ or see http://www.gnu.org/licenses/agpl.txt.
<table class="full">
<tr>
<td id="gui-search-source-label">Start:</td>
<td><input id="input-source-name" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" onchange="if( my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL) my_markers.route[0].dirty = true;" onblur="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);}" /></td>
<td><input id="input-source-name" class="input-box" type="text" maxlength="200" value="" title="Startposition eingeben" onchange="if( my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL) my_markers.route[0].dirty_type = true;" onblur="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);}" /></td>
<!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
<!-- <td class="right"><a class="button not-selectable" id="gui-search-source" onclick="callGeocoder(OSRM.SOURCE_MARKER_LABEL, document.getElementById('input-source-name').value);">Suchen</a></td> -->
<td class="right"><a class="button not-selectable" id="gui-search-source" onclick="">Suchen</a></td>
<td class="right"><a class="button not-selectable" id="gui-search-source" onclick="centerMarker('source')">Suchen</a></td>
</tr>
<tr>
<td id="gui-search-target-label">Ende:</td>
<td><input id="input-target-name" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" onchange="if( my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL) my_markers.route[my_markers.route.length-1].dirty = true;" onblur="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);}" /></td>
<td><input id="input-target-name" class="input-box" type="text" maxlength="200" value="" title="Zielposition eingeben" onchange="if( my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL) my_markers.route[my_markers.route.length-1].dirty_type = true;" onblur="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);" onkeypress="if(event.keyCode==13) {callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);}" /></td>
<!-- <td class="right"><a class="button not-selectable" id="gui-here-target" onclick="">i</a></td> -->
<!-- <td class="right"><a class="button not-selectable" id="gui-search-target" onclick="callGeocoder(OSRM.TARGET_MARKER_LABEL, document.getElementById('input-target-name').value);">Suchen</a></td> -->
<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="">Suchen</a></td>
<td class="right"><a class="button not-selectable" id="gui-search-target" onclick="centerMarker('target');">Suchen</a></td>
</tr>
</table>
@ -112,7 +112,7 @@ or see http://www.gnu.org/licenses/agpl.txt.
<td class="center"> <a class="button not-selectable" id="gui-reverse" onclick="reverseRouting();">Reverse</a></td>
<td class="right"> <a class="button not-selectable" id="gui-route" onclick="startRouting();">Route</a></td>
-->
<td class="right"> <a class="button not-selectable" id="gui-reverse" onclick="reverseRouting();">Reverse</a></td>
<td class="right"> <a class="button not-selectable" id="gui-reverse" onclick="centerRoute();">Reverse</a></td>
</tr>
</table>

26
WebContent/main.js
View File

@ -152,20 +152,22 @@ function initMap() {
// click on map to set source and target nodes
map.on('click', function(e) {
if( !my_markers.route[0] || my_markers.route[0].label != OSRM.SOURCE_MARKER_LABEL) {
index = my_markers.setSource( e.latlng );
my_markers.route[index].show();
my_markers.route[index].centerView(false);
getRoute(OSRM.FULL_DESCRIPTION);
updateLocation("source");
updateReverseGeocoder("source");
// index = my_markers.setSource( e.latlng );
// my_markers.route[index].show();
// my_markers.route[index].centerView(false);
// getRoute(OSRM.FULL_DESCRIPTION);
// updateLocation("source");
// updateReverseGeocoder("source");
onclickGeocoderResult("source", e.latlng.lat, e.latlng.lng, true, false );
}
else if( !my_markers.route[my_markers.route.length-1] || my_markers.route[ my_markers.route.length-1 ].label != OSRM.TARGET_MARKER_LABEL) {
index = my_markers.setTarget( e.latlng );
my_markers.route[index].show();
my_markers.route[index].centerView(false);
getRoute(OSRM.FULL_DESCRIPTION);
updateLocation("target");
updateReverseGeocoder("target");
// index = my_markers.setTarget( e.latlng );
// my_markers.route[index].show();
// my_markers.route[index].centerView(false);
// getRoute(OSRM.FULL_DESCRIPTION);
// updateLocation("target");
// updateReverseGeocoder("target");
onclickGeocoderResult("target", e.latlng.lat, e.latlng.lng, true, false );
}
} );
}

17
WebContent/routing.js
View File

@ -470,3 +470,20 @@ function reverseRouting() {
getRoute(OSRM.FULL_DESCRIPTION);
my_markers.highlight.hide();
}
// click: button "search"
function centerMarker(marker_id) {
if( marker_id == OSRM.SOURCE_MARKER_LABEL && my_markers.route[0] && my_markers.route[0].label == OSRM.SOURCE_MARKER_LABEL && !my_markers.route[0].dirty_type ) {
my_markers.route[0].centerView();
} else if( marker_id == OSRM.TARGET_MARKER_LABEL && my_markers.route[my_markers.route.length-1] && my_markers.route[my_markers.route.length-1].label == OSRM.TARGET_MARKER_LABEL && !my_markers.route[my_markers.route.length-1].dirty_type) {
my_markers.route[my_markers.route.length-1].centerView();
}
}
// click: button "route"
function centerRoute() {
if( my_route.isShown() )
my_route.centerView();
}