function formatDistance(m) {
if (m < 1000) {
- return Math.round(m) + "m";
+ return I18n.t("javascripts.directions.distance_m", { distance: Math.round(m) });
} else if (m < 10000) {
- return (m / 1000.0).toFixed(1) + "km";
+ return I18n.t("javascripts.directions.distance_km", { distance: (m / 1000.0).toFixed(1) });
} else {
- return Math.round(m / 1000) + "km";
+ return I18n.t("javascripts.directions.distance_km", { distance: Math.round(m / 1000) });
}
}
+ function formatHeight(m) {
+ return I18n.t("javascripts.directions.distance_m", { distance: Math.round(m) });
+ }
+
function formatTime(s) {
var m = Math.round(s / 60);
var h = Math.floor(m / 60);
map.removeLayer(polyline);
if (reportErrors) {
- $("#sidebar_content").html("<p class=\"search_results_error\">" + I18n.t("javascripts.directions.errors.no_route") + "</p>");
+ $("#sidebar_content").html("<div class=\"alert alert-danger\">" + I18n.t("javascripts.directions.errors.no_route") + "</div>");
}
return;
if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") {
distanceText.append(
$("<br>"),
- I18n.t("javascripts.directions.ascend") + ": " + Math.round(route.ascend) + "m. " +
- I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m.");
+ I18n.t("javascripts.directions.ascend") + ": " + formatHeight(route.ascend) + ". " +
+ I18n.t("javascripts.directions.descend") + ": " + formatHeight(route.descend) + ".");
}
- var turnByTurnTable = $("<table class='mb-3'>");
- var directionsCloseButton = $("<button type='button' class='btn-close mt-1'>");
+ var turnByTurnTable = $("<table class='table table-hover table-sm mb-3'>")
+ .append($("<tbody>"));
+ var directionsCloseButton = $("<button type='button' class='btn-close'>")
+ .attr("aria-label", I18n.t("javascripts.close"));
$("#sidebar_content")
.empty()
.append(
$("<div class='d-flex'>").append(
- $("<div class='flex-grow-1 text-break'>").append(
- $("<h2>")
- .text(I18n.t("javascripts.directions.directions"))),
+ $("<h2 class='flex-grow-1 text-break'>")
+ .text(I18n.t("javascripts.directions.directions")),
$("<div>").append(directionsCloseButton)),
distanceText,
turnByTurnTable
}
var row = $("<tr class='turn'/>");
- row.append("<td><div class='direction i" + direction + "'/></td> ");
- row.append("<td class='instruction'>" + instruction);
- row.append("<td class='distance'>" + dist);
+ row.append("<td class='border-0'><div class='direction i" + direction + "'/></td> ");
+ row.append("<td>" + instruction);
+ row.append("<td class='distance text-body-secondary text-end'>" + dist);
row.on("click", function () {
popup