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] });
const expiry = new Date();
expiry.setYear(expiry.getFullYear() + 10);
- const engines = OSM.Directions.engines;
-
- engines.sort(function (a, b) {
- return a.localeId.localeCompare(b.localeId);
- });
-
+ const modeGroup = $(".routing_modes");
const select = $("select.routing_engines");
- engines.forEach(function (engine, i) {
- select.append("<option value='" + i + "'>" + engine.localeId + "</option>");
- });
-
$(".directions_form .reverse_directions").on("click", function () {
const coordFrom = endpoints[0].latlng,
coordTo = endpoints[1].latlng;
}
function setEngine(id) {
- const index = engines.findIndex(engine => engine.id === id);
- if (index < 0) return;
- chosenEngine = engines[index];
- select.val(index);
+ const engines = OSM.Directions.engines;
+ const desired = engines.find(engine => engine.id === id);
+ if (!desired || (chosenEngine && chosenEngine.id === id)) return;
+ chosenEngine = desired;
+
+ const modes = engines
+ .filter(engine => engine.provider === chosenEngine.provider)
+ .map(engine => engine.mode);
+ modeGroup
+ .find("input[id]")
+ .prop("disabled", function () {
+ return !modes.includes(this.id);
+ })
+ .prop("checked", function () {
+ return this.id === chosenEngine.mode;
+ });
+
+ const providers = engines
+ .filter(engine => engine.mode === chosenEngine.mode)
+ .map(engine => engine.provider);
+ select
+ .find("option[value]")
+ .prop("disabled", function () {
+ return !providers.includes(this.value);
+ });
+ select.val(chosenEngine.provider);
}
function getRoute(fitRoute, reportErrors) {
// 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"));
+ modeGroup.on("change", "input[name='modes']", function (e) {
+ setEngine(chosenEngine.provider + "_" + e.target.id);
+ Cookies.set("_osm_directions_engine", chosenEngine.id, { secure: true, expires: expiry, path: "/", samesite: "lax" });
+ getRoute(true, true);
+ });
+
select.on("change", function (e) {
- chosenEngine = engines[e.target.selectedIndex];
+ 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;
- engine.localeId = I18n.t("javascripts.directions.engines." + engine.id);
OSM.Directions.engines.push(engine);
}
};
projects / rails.git / blobdiff