").append(directionsCloseButton)),
distanceText,
turnByTurnTable
);
// 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";
+ const [ll, direction, instruction, dist, lineseg] = step;
+
+ const row = $("
|
");
+ if (direction) {
+ row.append("
| ");
} else {
- dist = String(Math.round(dist / 1000)) + "km";
+ row.append("
");
}
-
- var row = $(" | |
");
- row.append("
| ");
row.append("
" + instruction);
- row.append(" | " + dist);
+ row.append(" | " + getDistText(dist));
row.on("click", function () {
popup
@@ -326,27 +197,57 @@ OSM.Directions = function (map) {
turnByTurnTable.append(row);
});
- $("#sidebar_content").append(" " +
+ const blob = new Blob([JSON.stringify(polyline.toGeoJSON())], { type: "application/json" });
+ URL.revokeObjectURL(downloadURL);
+ downloadURL = URL.createObjectURL(blob);
+
+ $("#directions_content").append(` ${
+ I18n.t("javascripts.directions.download")
+ } `);
+
+ $("#directions_content").append("" +
I18n.t("javascripts.directions.instructions.courtesy", { link: chosenEngine.creditline }) +
" ");
-
- directionsCloseButton.on("click", function () {
- map.removeLayer(polyline);
- $("#sidebar_content").html("");
- map.setSidebarOverlaid(true);
- // TODO: collapse width of sidebar back to previous
- });
+ }).catch(function () {
+ map.removeLayer(polyline);
+ if (reportErrors) {
+ $("#directions_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");
- if (Cookies.get("_osm_directions_engine")) {
- chosenEngineIndex = findEngine(Cookies.get("_osm_directions_engine"));
+ 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(chosenEngineIndex);
+
+ 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);
});
@@ -357,21 +258,43 @@ 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] });
+ }
- 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();
@@ -379,51 +302,67 @@ 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);
- endpoints[type === "from" ? 0 : 1].setLatLng(ll);
- getRoute(true, true);
+ const ll = map.containerPointToLatLng(pt);
+ 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(","));
+ map.on("locationfound", sendstartinglocation);
- if (params.engine) {
- var engineIndex = findEngine(params.engine);
+ endpoints[0].enableListeners();
+ endpoints[1].enableListeners();
+ }
- if (engineIndex >= 0) {
- setEngine(engineIndex);
- }
- }
+ const page = {};
- endpoints[0].setValue(params.from || "", from);
- endpoints[1].setValue(params.to || "", to);
+ page.pushstate = page.popstate = function () {
+ if ($("#directions_content").length) {
+ page.load();
+ } else {
+ initializeFromParams();
- map.setSidebarOverlaid(!from || !to);
+ $(".search_form").hide();
+ $(".directions_form").show();
- getRoute(true, true);
+ 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].clearValue();
+ endpoints[1].clearValue();
map
.removeLayer(popup)
- .removeLayer(polyline)
- .removeLayer(endpoints[0].marker)
- .removeLayer(endpoints[1].marker);
+ .removeLayer(polyline);
};
return page;
@@ -432,7 +371,8 @@ OSM.Directions = function (map) {
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);
}
};
|