OSM.Directions = function (map) {
let controller = null; // the AbortController for the current route request if a route request is in progress
+ let lastLocation = [];
let chosenEngine;
const popup = L.popup({ autoPanPadding: [100, 100] });
// copy loading item to sidebar and display it. we copy it, rather than
// just using it in-place and replacing it in case it has to be used
// again.
- $("#sidebar_content").html($(".directions_form .loader_copy").html());
+ $("#directions_content").html($(".directions_form .loader_copy").html());
map.setSidebarOverlaid(false);
controller = new AbortController();
chosenEngine.getRoute(points, controller.signal).then(function (route) {
const turnByTurnTable = $("<table class='table table-hover table-sm mb-3'>")
.append($("<tbody>"));
- const directionsCloseButton = $("<button type='button' class='btn-close'>")
- .attr("aria-label", I18n.t("javascripts.close"));
- $("#sidebar_content")
+ $("#directions_content")
.empty()
.append(
- $("<div class='d-flex'>").append(
- $("<h2 class='flex-grow-1 text-break'>")
- .text(I18n.t("javascripts.directions.directions")),
- $("<div>").append(directionsCloseButton)),
distanceText,
turnByTurnTable
);
const [ll, direction, instruction, dist, lineseg] = step;
const row = $("<tr class='turn'/>");
- row.append("<td class='border-0'><div class='direction i" + direction + "'/></td> ");
+ if (direction) {
+ row.append("<td class='border-0'><svg width='20' height='20' class='d-block'><use href='#routing-sprite-" + direction + "' /></svg></td>");
+ } else {
+ row.append("<td class='border-0'>");
+ }
row.append("<td>" + instruction);
row.append("<td class='distance text-body-secondary text-end'>" + getDistText(dist));
URL.revokeObjectURL(downloadURL);
downloadURL = URL.createObjectURL(blob);
- $("#
sidebar_content").append(`<p class="text-center"><a href="${downloadURL}" download="${
+ $("#
directions_content").append(`<p class="text-center"><a href="${downloadURL}" download="${
I18n.t("javascripts.directions.filename")
}">${
I18n.t("javascripts.directions.download")
}</a></p>`);
- $("#
sidebar_content").append("<p class=\"text-center\">" +
+ $("#
directions_content").append("<p class=\"text-center\">" +
I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) +
"</p>");
-
- 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("<div class=\"alert alert-danger\">" + I18n.t("javascripts.directions.errors.no_route") + "</div>");
+ $("#
directions_content").html("<div class=\"alert alert-danger\">" + I18n.t("javascripts.directions.errors.no_route") + "</div>");
}
}).finally(function () {
controller = null;
}
}
+ function hideRoute(e) {
+ e.stopPropagation();
+ map.removeLayer(polyline);
+ $("#directions_content").html("");
+ popup.close();
+ map.setSidebarOverlaid(true);
+ // TODO: collapse width of sidebar back to previous
+ }
+
setEngine("fossgis_osrm_car");
setEngine(Cookies.get("_osm_directions_engine"));
});
select.on("change", function (e) {
- setEngine(e.target.selectedOptions[0].value + "_" + chosenEngine.mode);
+ setEngine(e.target.value + "_" + chosenEngine.mode);
Cookies.set("_osm_directions_engine", chosenEngine.id, { secure: true, expires: expiry, path: "/", samesite: "lax" });
getRoute(true, true);
});
}
});
- const page = {};
+ function sendstartinglocation({ latlng: { lat, lng } }) {
+ map.fire("startinglocation", { latlng: [lat, lng] });
+ }
- page.pushstate = page.popstate = function () {
- $(".search_form").hide();
- $(".directions_form").show();
+ function startingLocationListener({ latlng }) {
+ if (endpoints[0].value) return;
+ endpoints[0].setValue(latlng.join(", "));
+ }
+
+ map.on("locationfound", ({ latlng: { lat, lng } }) =>
+ lastLocation = [lat, lng]
+ ).on("locateactivate", () => {
+ map.once("startinglocation", startingLocationListener);
+ });
+
+ function initializeFromParams() {
+ const params = new URLSearchParams(location.search),
+ route = (params.get("route") || "").split(";");
+
+ if (params.has("engine")) setEngine(params.get("engine"));
+
+ endpoints[0].setValue(params.get("from") || route[0] || lastLocation.join(", "));
+ endpoints[1].setValue(params.get("to") || route[1] || "");
+ }
+
+ function enableListeners() {
+ $("#sidebar_content").on("click", ".btn-close", hideRoute);
$("#map").on("dragend dragover", function (e) {
e.preventDefault();
endpoints[type === "from" ? 0 : 1].setValue(llWithPrecision.join(", "));
});
- endpoints[0].enable();
- endpoints[1].enable();
+ map.on("locationfound", sendstartinglocation);
- const params = new URLSearchParams(location.search),
- route = (params.get("route") || "").split(";");
+ endpoints[0].enableListeners();
+ endpoints[1].enableListeners();
+ }
- if (params.has("engine")) setEngine(params.get("engine"));
+ const page = {};
- endpoints[0].setValue(params.get("from") || route[0] || "");
- endpoints[1].setValue(params.get("to") || route[1] || "");
+ page.pushstate = page.popstate = function () {
+ if ($("#directions_content").length) {
+ page.load();
+ } else {
+ initializeFromParams();
- map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
+ $(".search_form").hide();
+ $(".directions_form").show();
+
+ OSM.loadSidebarContent("/directions", enableListeners);
+
+ map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
+ }
};
page.load = function () {
- page.pushstate();
+ initializeFromParams();
+
+ $(".search_form").hide();
+ $(".directions_form").show();
+
+ enableListeners();
+
+ map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
};
page.unload = function () {
$(".search_form").show();
$(".directions_form").hide();
+
+ $("#sidebar_content").off("click", ".btn-close", hideRoute);
$("#map").off("dragend dragover drop");
+ map.off("locationfound", sendstartinglocation);
+
+ endpoints[0].disableListeners();
+ endpoints[1].disableListeners();
- endpoints[0].disable();
- endpoints[1].disable();
+ endpoints[0].clearValue();
+ endpoints[1].clearValue();
map
.removeLayer(popup)
OSM.Directions.engines = [];
OSM.Directions.addEngine = function (engine, supportsHTTPS) {
- if (document.location.protocol === "http:" || supportsHTTPS) {
+ if (location.protocol === "http:" || supportsHTTPS) {
engine.id = engine.provider + "_" + engine.mode;
OSM.Directions.engines.push(engine);
}
projects / rails.git / blobdiff