X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/4b2c64fbed7ed3420e10d1f1a7eaef26f0e4e025..9d2f920feb9dce028b985e8d452538d3df7a1d9c:/app/assets/javascripts/index/directions.js diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 6149228ec..ee195af41 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -26,9 +26,14 @@ OSM.Directions = function (map) { Endpoint($("input[name='route_to']"), OSM.MARKER_RED) ]; + var expiry = new Date(); + expiry.setYear(expiry.getFullYear() + 10); + function Endpoint(input, iconUrl) { var endpoint = {}; + endpoint.input = input; + endpoint.marker = L.marker([0, 0], { icon: L.icon({ iconUrl: iconUrl, @@ -73,7 +78,7 @@ OSM.Directions = function (map) { endpoint.awaitingGeocode = true; - $.getJSON(document.location.protocol + OSM.NOMINATIM_URL + 'search?q=' + encodeURIComponent(endpoint.value) + '&format=json', function (json) { + $.getJSON(OSM.NOMINATIM_URL + 'search?q=' + encodeURIComponent(endpoint.value) + '&format=json', function (json) { endpoint.awaitingGeocode = false; endpoint.hasGeocode = true; if (json.length === 0) { @@ -108,7 +113,21 @@ OSM.Directions = function (map) { return endpoint; } - $(".directions_form a.directions_close").on("click", function(e) { + $(".directions_form .reverse_directions").on("click", function() { + var input_from = endpoints[0].input.val(); + var input_to = endpoints[1].input.val(); + var latlng_from = endpoints[0].latlng; + var latlng_to = endpoints[1].latlng; + + endpoints[0].setLatLng(latlng_to); + endpoints[1].setLatLng(latlng_from); + endpoints[0].input.val(input_to); + endpoints[1].input.val(input_from); + + getRoute(); + }); + + $(".directions_form .close").on("click", function(e) { e.preventDefault(); var route_from = endpoints[0].value; if (route_from) { @@ -145,6 +164,9 @@ OSM.Directions = function (map) { } function getRoute() { + // Cancel any route that is already in progress + if (awaitingRoute) awaitingRoute.abort(); + // go fetch geocodes for any endpoints which have not already // been geocoded. for (var ep_i = 0; ep_i < 2; ++ep_i) { @@ -177,17 +199,16 @@ OSM.Directions = function (map) { // just using it in-place and replacing it in case it has to be used // again. $('#sidebar_content').html($('.directions_form .loader_copy').html()); - awaitingRoute = true; map.setSidebarOverlaid(false); - chosenEngine.getRoute([o, d], function (err, route) { - awaitingRoute = false; + awaitingRoute = chosenEngine.getRoute([o, d], function (err, route) { + awaitingRoute = null; if (err) { map.removeLayer(polyline); if (!dragging) { - alert(I18n.t('javascripts.directions.errors.no_route')); + $('#sidebar_content').html('

' + I18n.t('javascripts.directions.errors.no_route') + '

'); } return; @@ -205,8 +226,13 @@ OSM.Directions = function (map) { '' + I18n.t('javascripts.directions.directions') + '

' + I18n.t('javascripts.directions.distance') + ': ' + formatDistance(route.distance) + '. ' + - I18n.t('javascripts.directions.time') + ': ' + formatTime(route.time) + '.

' + - ''; + I18n.t('javascripts.directions.time') + ': ' + formatTime(route.time) + '.'; + if (typeof route.ascend !== 'undefined' && typeof route.descend !== 'undefined') { + html += '
' + + I18n.t('javascripts.directions.ascend') + ': ' + Math.round(route.ascend) + 'm. ' + + I18n.t('javascripts.directions.descend') + ': ' + Math.round(route.descend) +'m.'; + } + html += '

'; $('#sidebar_content') .html(html); @@ -285,10 +311,15 @@ OSM.Directions = function (map) { select.append(""); }); - setEngine('osrm_car'); + var chosenEngineId = $.cookie('_osm_directions_engine'); + if(!chosenEngineId) { + chosenEngineId = 'osrm_car'; + } + setEngine(chosenEngineId); select.on("change", function (e) { chosenEngine = engines[e.target.selectedIndex]; + $.cookie('_osm_directions_engine', chosenEngine.id, { expires: expiry, path: '/' }); if (map.hasLayer(polyline)) { getRoute(); } @@ -300,10 +331,14 @@ OSM.Directions = function (map) { }); $(".routing_marker").on('dragstart', function (e) { - e.originalEvent.dataTransfer.effectAllowed = 'move'; - e.originalEvent.dataTransfer.setData('id', this.id); - var img = $("").attr("src", $(e.originalEvent.target).attr("src")); - e.originalEvent.dataTransfer.setDragImage(img.get(0), 12, 21); + var dt = e.originalEvent.dataTransfer; + dt.effectAllowed = 'move'; + var dragData = { type: $(this).data('type') }; + dt.setData('text', JSON.stringify(dragData)); + if (dt.setDragImage) { + var img = $("").attr("src", $(e.originalEvent.target).attr("src")); + dt.setDragImage(img.get(0), 12, 21); + } }); var page = {}; @@ -319,11 +354,12 @@ OSM.Directions = function (map) { $("#map").on('drop', function (e) { e.preventDefault(); var oe = e.originalEvent; - var id = oe.dataTransfer.getData('id'); + var dragData = JSON.parse(oe.dataTransfer.getData('text')); + var type = dragData.type; var pt = L.DomEvent.getMousePosition(oe, map.getContainer()); // co-ordinates of the mouse pointer at present pt.y += 20; var ll = map.containerPointToLatLng(pt); - endpoints[id === 'marker_from' ? 0 : 1].setLatLng(ll); + endpoints[type === 'from' ? 0 : 1].setLatLng(ll); getRoute(); }); @@ -334,13 +370,8 @@ OSM.Directions = function (map) { setEngine(params.engine); } - if (params.from) { - endpoints[0].setValue(params.from); - endpoints[1].setValue(""); - } else { - endpoints[0].setValue(""); - endpoints[1].setValue(""); - } + endpoints[0].setValue(params.from || ""); + endpoints[1].setValue(params.to || ""); var o = route[0] && L.latLng(route[0].split(',')), d = route[1] && L.latLng(route[1].split(','));