X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/87a7c0272d6eac05befda72ba773b9749086965e..e1055764d873fe190ccac79d84d44bd5f4f2e314:/app/assets/javascripts/index/directions.js diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index ff76f4008..0ac66d9d6 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -1,10 +1,9 @@ //= require ./directions-endpoint //= require_self //= require_tree ./directions -//= require qs/dist/qs OSM.Directions = function (map) { - var routeRequest = null; // jqXHR object of an ongoing route request or null + let controller = null; // the AbortController for the current route request if a route request is in progress var chosenEngine; var popup = L.popup({ autoPanPadding: [100, 100] }); @@ -24,7 +23,7 @@ OSM.Directions = function (map) { var endpointDragCallback = function (dragging) { if (!map.hasLayer(polyline)) return; if (dragging && !chosenEngine.draggable) return; - if (dragging && routeRequest) return; + if (dragging && controller) return; getRoute(false, !dragging); }; @@ -65,10 +64,9 @@ OSM.Directions = function (map) { if (coordTo) { routeTo = coordTo.lat + "," + coordTo.lng; } + endpoints[0].swapCachedReverseGeocodes(endpoints[1]); - OSM.router.route("/directions?" + Qs.stringify({ - from: $("#route_to").val(), - to: $("#route_from").val(), + OSM.router.route("/directions?" + new URLSearchParams({ route: routeTo + ";" + routeFrom })); }); @@ -81,13 +79,10 @@ OSM.Directions = function (map) { }); function formatDistance(m) { - if (m < 1000) { - return I18n.t("javascripts.directions.distance_m", { distance: Math.round(m) }); - } else if (m < 10000) { - return I18n.t("javascripts.directions.distance_km", { distance: (m / 1000.0).toFixed(1) }); - } else { - return I18n.t("javascripts.directions.distance_km", { distance: Math.round(m / 1000) }); - } + const unitTemplate = "javascripts.directions.distance_"; + if (m < 1000) return I18n.t(unitTemplate + "m", { distance: Math.round(m) }); + if (m < 10000) return I18n.t(unitTemplate + "km", { distance: (m / 1000.0).toFixed(1) }); + return I18n.t(unitTemplate + "km", { distance: Math.round(m / 1000) }); } function formatHeight(m) { @@ -114,20 +109,16 @@ OSM.Directions = function (map) { function getRoute(fitRoute, reportErrors) { // Cancel any route that is already in progress - if (routeRequest) routeRequest.abort(); + if (controller) controller.abort(); - var o = endpoints[0].latlng, - d = endpoints[1].latlng; + const points = endpoints.map(p => p.latlng); - if (!o || !d) return; + if (!points[0] || !points[1]) return; $("header").addClass("closed"); - var precision = OSM.zoomPrecision(map.getZoom()); - - OSM.router.replace("/directions?" + Qs.stringify({ + OSM.router.replace("/directions?" + new URLSearchParams({ engine: chosenEngine.id, - route: o.lat.toFixed(precision) + "," + o.lng.toFixed(precision) + ";" + - d.lat.toFixed(precision) + "," + d.lng.toFixed(precision) + route: points.map(p => OSM.cropLocation(p, map.getZoom()).join()).join(";") })); // copy loading item to sidebar and display it. we copy it, rather than @@ -135,20 +126,8 @@ OSM.Directions = function (map) { // again. $("#sidebar_content").html($(".directions_form .loader_copy").html()); map.setSidebarOverlaid(false); - - routeRequest = chosenEngine.getRoute([o, d], function (err, route) { - routeRequest = null; - - if (err) { - map.removeLayer(polyline); - - if (reportErrors) { - $("#sidebar_content").html("
" + I18n.t("javascripts.directions.errors.no_route") + "
"); - } - - return; - } - + controller = new AbortController(); + chosenEngine.getRoute(points, controller.signal).then(function (route) { polyline .setLatLngs(route.line) .addTo(map); @@ -185,28 +164,12 @@ OSM.Directions = function (map) { // Add each row route.steps.forEach(function (step) { - var ll = step[0], - direction = step[1], - instruction = step[2], - dist = step[3], - lineseg = step[4]; - - if (dist < 5) { - dist = ""; - } else if (dist < 200) { - dist = String(Math.round(dist / 10) * 10) + "m"; - } else if (dist < 1500) { - dist = String(Math.round(dist / 100) * 100) + "m"; - } else if (dist < 5000) { - dist = String(Math.round(dist / 100) / 10) + "km"; - } else { - dist = String(Math.round(dist / 1000)) + "km"; - } + const [ll, direction, instruction, dist, lineseg] = step; var row = $(""); row.append("
"); row.append("" + instruction); - row.append("" + dist); + row.append("" + getDistText(dist)); row.on("click", function () { popup @@ -233,10 +196,26 @@ OSM.Directions = function (map) { directionsCloseButton.on("click", function () { map.removeLayer(polyline); $("#sidebar_content").html(""); + popup.close(); map.setSidebarOverlaid(true); // TODO: collapse width of sidebar back to previous }); + }).catch(function () { + map.removeLayer(polyline); + if (reportErrors) { + $("#sidebar_content").html("
" + I18n.t("javascripts.directions.errors.no_route") + "
"); + } + }).finally(function () { + controller = null; }); + + function getDistText(dist) { + if (dist < 5) return ""; + if (dist < 200) return String(Math.round(dist / 10) * 10) + "m"; + if (dist < 1500) return String(Math.round(dist / 100) * 100) + "m"; + if (dist < 5000) return String(Math.round(dist / 100) / 10) + "km"; + return String(Math.round(dist / 1000)) + "km"; + } } var chosenEngineIndex = findEngine("fossgis_osrm_car"); @@ -285,28 +264,28 @@ OSM.Directions = function (map) { var pt = L.DomEvent.getMousePosition(oe, map.getContainer()); // co-ordinates of the mouse pointer at present pt.y += 20; var ll = map.containerPointToLatLng(pt); - var precision = OSM.zoomPrecision(map.getZoom()); - var value = ll.lat.toFixed(precision) + ", " + ll.lng.toFixed(precision); - endpoints[type === "from" ? 0 : 1].setValue(value, ll); + const llWithPrecision = OSM.cropLocation(ll, map.getZoom()); + endpoints[type === "from" ? 0 : 1].setValue(llWithPrecision.join(", ")); }); - var params = Qs.parse(location.search.substring(1)), - route = (params.route || "").split(";"), - from = route[0] && L.latLng(route[0].split(",")), - to = route[1] && L.latLng(route[1].split(",")); + endpoints[0].enable(); + endpoints[1].enable(); + + const params = new URLSearchParams(location.search), + route = (params.get("route") || "").split(";"); - if (params.engine) { - var engineIndex = findEngine(params.engine); + if (params.has("engine")) { + var engineIndex = findEngine(params.get("engine")); if (engineIndex >= 0) { setEngine(engineIndex); } } - endpoints[0].setValue(params.from || "", from); - endpoints[1].setValue(params.to || "", to); + endpoints[0].setValue(params.get("from") || route[0] || ""); + endpoints[1].setValue(params.get("to") || route[1] || ""); - map.setSidebarOverlaid(!from || !to); + map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng); }; page.load = function () { @@ -318,11 +297,12 @@ OSM.Directions = function (map) { $(".directions_form").hide(); $("#map").off("dragend dragover drop"); + endpoints[0].disable(); + endpoints[1].disable(); + map .removeLayer(popup) - .removeLayer(polyline) - .removeLayer(endpoints[0].marker) - .removeLayer(endpoints[1].marker); + .removeLayer(polyline); }; return page;