X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/aebacc88de18c24c583a12b589eb98cf0b826627..370fe0855e8eef97bbe58dc559957ac303decc33:/app/assets/javascripts/index/directions.js?ds=inline diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 0ac66d9d6..ceda70ee0 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -4,59 +4,62 @@ OSM.Directions = function (map) { let controller = null; // the AbortController for the current route request if a route request is in progress - var chosenEngine; + let lastLocation = []; + let chosenEngine; - var popup = L.popup({ autoPanPadding: [100, 100] }); + const popup = L.popup({ autoPanPadding: [100, 100] }); - var polyline = L.polyline([], { + const polyline = L.polyline([], { color: "#03f", opacity: 0.3, weight: 10 }); - var highlight = L.polyline([], { + const highlight = L.polyline([], { color: "#ff0", opacity: 0.5, weight: 12 }); - var endpointDragCallback = function (dragging) { + const endpointDragCallback = function (dragging) { if (!map.hasLayer(polyline)) return; if (dragging && !chosenEngine.draggable) return; if (dragging && controller) return; getRoute(false, !dragging); }; - var endpointChangeCallback = function () { + const endpointChangeCallback = function () { getRoute(true, true); }; - var endpoints = [ + const endpoints = [ OSM.DirectionsEndpoint(map, $("input[name='route_from']"), OSM.MARKER_GREEN, endpointDragCallback, endpointChangeCallback), OSM.DirectionsEndpoint(map, $("input[name='route_to']"), OSM.MARKER_RED, endpointDragCallback, endpointChangeCallback) ]; - var expiry = new Date(); + let downloadURL = null; + + const expiry = new Date(); expiry.setYear(expiry.getFullYear() + 10); - var engines = OSM.Directions.engines; + const engines = OSM.Directions.engines; engines.sort(function (a, b) { - var localised_a = I18n.t("javascripts.directions.engines." + a.id), - localised_b = I18n.t("javascripts.directions.engines." + b.id); + const localised_a = I18n.t("javascripts.directions.engines." + a.id), + localised_b = I18n.t("javascripts.directions.engines." + b.id); return localised_a.localeCompare(localised_b); }); - var select = $("select.routing_engines"); + const select = $("select.routing_engines"); engines.forEach(function (engine, i) { select.append(""); }); $(".directions_form .reverse_directions").on("click", function () { - var coordFrom = endpoints[0].latlng, - coordTo = endpoints[1].latlng, - routeFrom = "", + const coordFrom = endpoints[0].latlng, + coordTo = endpoints[1].latlng; + let routeFrom = "", routeTo = ""; if (coordFrom) { routeFrom = coordFrom.lat + "," + coordFrom.lng; @@ -73,8 +76,8 @@ OSM.Directions = function (map) { $(".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); + $(".describe_location").toggle(!endpoints[1].value); + $(".search_form input[name='query']").val(endpoints[1].value); OSM.router.route("/" + OSM.formatHash(map)); }); @@ -90,8 +93,8 @@ OSM.Directions = function (map) { } function formatTime(s) { - var m = Math.round(s / 60); - var h = Math.floor(m / 60); + let m = Math.round(s / 60); + const h = Math.floor(m / 60); m -= h * 60; return h + ":" + (m < 10 ? "0" : "") + m; } @@ -136,7 +139,7 @@ OSM.Directions = function (map) { map.fitBounds(polyline.getBounds().pad(0.05)); } - var distanceText = $("

").append( + const distanceText = $("

").append( I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " + I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + "."); if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") { @@ -146,9 +149,9 @@ OSM.Directions = function (map) { I18n.t("javascripts.directions.descend") + ": " + formatHeight(route.descend) + "."); } - var turnByTurnTable = $("") + const turnByTurnTable = $("
") .append($("")); - var directionsCloseButton = $(""); + const row = $(""); row.append(" "); row.append("
" + instruction); row.append("" + getDistText(dist)); @@ -189,6 +192,16 @@ OSM.Directions = function (map) { turnByTurnTable.append(row); }); + const blob = new Blob([JSON.stringify(polyline.toGeoJSON())], { type: "application/json" }); + URL.revokeObjectURL(downloadURL); + downloadURL = URL.createObjectURL(blob); + + $("#sidebar_content").append(`

${ + I18n.t("javascripts.directions.download") + }

`); + $("#sidebar_content").append("

" + I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) + "

"); @@ -218,7 +231,7 @@ OSM.Directions = function (map) { } } - var chosenEngineIndex = findEngine("fossgis_osrm_car"); + let chosenEngineIndex = findEngine("fossgis_osrm_car"); if (Cookies.get("_osm_directions_engine")) { chosenEngineIndex = findEngine(Cookies.get("_osm_directions_engine")); } @@ -236,17 +249,30 @@ OSM.Directions = function (map) { }); $(".routing_marker_column img").on("dragstart", function (e) { - var dt = e.originalEvent.dataTransfer; + const dt = e.originalEvent.dataTransfer; dt.effectAllowed = "move"; - var dragData = { type: $(this).data("type") }; + const dragData = { type: $(this).data("type") }; dt.setData("text", JSON.stringify(dragData)); if (dt.setDragImage) { - var img = $("").attr("src", $(e.originalEvent.target).attr("src")); + const img = $("").attr("src", $(e.originalEvent.target).attr("src")); dt.setDragImage(img.get(0), 12, 21); } }); - var page = {}; + function sendstartinglocation({ latlng: { lat, lng } }) { + map.fire("startinglocation", { latlng: [lat, lng] }); + } + + map.on("locationfound", ({ latlng: { lat, lng } }) => + lastLocation = [lat, lng] + ).on("locateactivate", () => { + map.once("startinglocation", ({ latlng }) => { + if (endpoints[0].value) return; + endpoints[0].setValue(latlng.join(", ")); + }); + }); + + const page = {}; page.pushstate = page.popstate = function () { $(".search_form").hide(); @@ -258,16 +284,18 @@ OSM.Directions = function (map) { $("#map").on("drop", function (e) { e.preventDefault(); - var oe = e.originalEvent; - 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 + const oe = e.originalEvent; + const dragData = JSON.parse(oe.dataTransfer.getData("text")); + const type = dragData.type; + const pt = L.DomEvent.getMousePosition(oe, map.getContainer()); // co-ordinates of the mouse pointer at present pt.y += 20; - var ll = map.containerPointToLatLng(pt); + const ll = map.containerPointToLatLng(pt); const llWithPrecision = OSM.cropLocation(ll, map.getZoom()); endpoints[type === "from" ? 0 : 1].setValue(llWithPrecision.join(", ")); }); + map.on("locationfound", sendstartinglocation); + endpoints[0].enable(); endpoints[1].enable(); @@ -275,14 +303,14 @@ OSM.Directions = function (map) { route = (params.get("route") || "").split(";"); if (params.has("engine")) { - var engineIndex = findEngine(params.get("engine")); + const engineIndex = findEngine(params.get("engine")); if (engineIndex >= 0) { setEngine(engineIndex); } } - endpoints[0].setValue(params.get("from") || route[0] || ""); + endpoints[0].setValue(params.get("from") || route[0] || lastLocation.join(", ")); endpoints[1].setValue(params.get("to") || route[1] || ""); map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng); @@ -296,6 +324,7 @@ OSM.Directions = function (map) { $(".search_form").show(); $(".directions_form").hide(); $("#map").off("dragend dragover drop"); + map.off("locationfound", sendstartinglocation); endpoints[0].disable(); endpoints[1].disable();