X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/9b2db63a957a325d16e3989f08c483bd88f1993e..3fbc8a3d3224a4f5bb4a222aa820d885944a60fe:/app/assets/javascripts/index/directions.js diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index e2cdd3a54..356dc6271 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -1,7 +1,6 @@ //= 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 @@ -65,28 +64,25 @@ 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 })); }); $(".directions_form .btn-close").on("click", function (e) { e.preventDefault(); + $(".describe_location").toggle(!endpoints[0].value); $(".search_form input[name='query']").val(endpoints[0].value); OSM.router.route("/" + OSM.formatHash(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) { @@ -115,30 +111,14 @@ OSM.Directions = function (map) { // Cancel any route that is already in progress if (routeRequest) routeRequest.abort(); - // go fetch geocodes for any endpoints which have not already - // been geocoded. - for (var ep_i = 0; ep_i < 2; ++ep_i) { - var endpoint = endpoints[ep_i]; - if (!endpoint.hasGeocode && !endpoint.awaitingGeocode) { - endpoint.getGeocode(); - } - } - if (endpoints[0].awaitingGeocode || endpoints[1].awaitingGeocode) { - return; - } - - 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 @@ -147,7 +127,7 @@ OSM.Directions = function (map) { $("#sidebar_content").html($(".directions_form .loader_copy").html()); map.setSidebarOverlaid(false); - routeRequest = chosenEngine.getRoute([o, d], function (err, route) { + routeRequest = chosenEngine.getRoute(points, function (err, route) { routeRequest = null; if (err) { @@ -196,28 +176,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 @@ -244,10 +208,19 @@ 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 }); }); + + 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"); @@ -296,28 +269,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(); - if (params.engine) { - var engineIndex = findEngine(params.engine); + const params = new URLSearchParams(location.search), + route = (params.get("route") || "").split(";"); + + 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 () { @@ -329,11 +302,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;