+++ /dev/null
-<svg xmlns="http://www.w3.org/2000/svg" width="520" height="20"
- fill="none" stroke="#000" stroke-width="2">
- <!-- 0: straight / continue -->
- <path d="M10 17 v-13 m2.5 2 l-2.5 -2.5 -2.5 2.5 z"/>
- <!-- 1: turn slight right / stay right -->
- <path d="M27 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z"/>
- <!-- 2: turn right -->
- <path d="M48 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z"/>
- <!-- 3: turn sharp right-->
- <path d="M68 17 v-7 q0 -6 6 0 l2 2 m0 0 v-3 l-3 3 z"/>
- <!-- 4: u-turn -->
- <path d="M96 17 v-7 a4.5 4.5 0 0 0 -9 0 v5 m-2.5 -2 l2.5 2.5 2.5 -2.5 z"/>
- <!-- 5: turn slight left / stay left -->
- <path d="M113 17 v-3 q0 -2 -2 -4 l-5 -5 m0 0 h3 l-3 3 z"/>
- <!-- 6: turn left -->
- <path d="M133 17 v-5 q0 -3 -3 -3 h-4 m2 2.5 l-2.5 -2.5 2.5 -2.5 z"/>
- <!-- 7: turn sharp left-->
- <path d="M153 17 v-7 q0 -6 -6 0 l-2 2 m0 0 v-3 l3 3 z"/>
- <!-- 8: start -->
- <path d="M170 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z"/>
- <!-- 10: roundabout -->
- <path d="M208 17 v-3 a 3 3 0 1 0 0 -6 3 3 0 1 0 0 6 m2 -4 l5 -5 m0 0 h-3 l3 3 z"/>
- <!-- 14: destination -->
- <path d="M290 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z"/>
- <!-- 17: ferry -->
- <g stroke-width="1">
- <path d="M350.5 8 l-6 2 l2.5 2 v1.5 a2.828 2.828 0 0 1 1.5 1 a2.828 2.828 0 0 1 4 0 a2.828 2.828 0 0 1 1.5 -1 v-1.5 l2.5 -2 z" fill="#000"/>
- <path d="M346.5 9.5 v-5 h8 v5 m-5.5 -6 h3"/>
- <path d="M345.5 16.5 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0"/>
- </g>
- <!-- 18: fork right -->
- <path d="M369 14 q0 -2 -2 -4 l-3 -3" opacity=".5"/>
- <path d="M369 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z"/>
- <!-- 19: fork left -->
- <path d="M391 14 q0 -2 2 -4 l3 -3" opacity=".5"/>
- <path d="M391 17 v-3 q0 -2 -2 -4 l-5 -5 m0 0 h3 l-3 3 z"/>
- <!-- 20: merge left -->
- <path d="M408 7 q0 2 -2 4 l-3 3" opacity=".5"/>
- <path d="M408 4 v3 q0 2 2 4 l5 5 m-5 -5 h3 l-3 3 z"/>
- <!-- 21: merge right-->
- <path d="M432 7 q0 2 2 4 l3 3" opacity=".5"/>
- <path d="M432 4 v3 q0 2 -2 4 l-5 5 m5 -5 h-3 l3 3 z"/>
- <!-- 22: end of road right-->
- <path d="M442 9 h10" opacity=".5"/>
- <path d="M449 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z"/>
- <!-- 23: end of road left-->
- <path d="M478 9 h-10" opacity=".5"/>
- <path d="M471 17 v-5 q0 -3 -3 -3 h-4 m2 2.5 l-2.5 -2.5 2.5 -2.5 z"/>
- <!-- 24: off ramp / exit right -->
- <path d="M489 14 v-8" opacity=".5"/>
- <path d="M489 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z"/>
- <!-- 25: off ramp / exit left -->
- <path d="M511 14 v-8" opacity=".5"/>
- <path d="M511 17 v-3 q0 -2 -2 -4 l-5 -5 m0 0 h3 l-3 3 z"/>
-</svg>
map.setSidebarOverlaid(false);
- $("#sidebar_loader").show().addClass("delayed-fade-in");
+ $("#sidebar_loader").prop("hidden", false).addClass("delayed-fade-in");
// Prevent caching the XHR response as a full-page URL
// https://github.com/openstreetmap/openstreetmap-website/issues/5663
fetch(content_path, { headers: { "accept": "text/html", "x-requested-with": "XMLHttpRequest" } })
.then(response => {
$("#flash").empty();
- $("#sidebar_loader").removeClass("delayed-fade-in").hide();
+ $("#sidebar_loader").removeClass("delayed-fade-in").prop("hidden", true);
const title = response.headers.get("X-Page-Title");
if (title) document.title = decodeURIComponent(title);
autoPan: true
});
- endpoint.enable = function () {
+ endpoint.enableListeners = function () {
endpoint.marker.on("drag dragend", markerDragListener);
input.on("keydown", inputKeydownListener);
input.on("change", inputChangeListener);
};
- endpoint.disable = function () {
+ endpoint.disableListeners = function () {
endpoint.marker.off("drag dragend", markerDragListener);
input.off("keydown", inputKeydownListener);
input.off("change", inputChangeListener);
-
- if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort();
- delete endpoint.geocodeRequest;
- removeLatLng();
- delete endpoint.value;
- input.val("");
- map.removeLayer(endpoint.marker);
};
function markerDragListener(e) {
}
};
+ endpoint.clearValue = function () {
+ if (endpoint.geocodeRequest) endpoint.geocodeRequest.abort();
+ delete endpoint.geocodeRequest;
+ removeLatLng();
+ delete endpoint.value;
+ input.val("");
+ map.removeLayer(endpoint.marker);
+ };
+
endpoint.swapCachedReverseGeocodes = function (otherEndpoint) {
const g0 = endpoint.cachedReverseGeocode;
const g1 = otherEndpoint.cachedReverseGeocode;
// 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"));
map.once("startinglocation", startingLocationListener);
});
- const page = {};
+ function initializeFromParams() {
+ const params = new URLSearchParams(location.search),
+ route = (params.get("route") || "").split(";");
- page.pushstate = page.popstate = function () {
- $(".search_form").hide();
- $(".directions_form").show();
+ 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();
map.on("locationfound", sendstartinglocation);
- endpoints[0].enable();
- endpoints[1].enable();
+ endpoints[0].enableListeners();
+ endpoints[1].enableListeners();
+ }
- const params = new URLSearchParams(location.search),
- route = (params.get("route") || "").split(";");
+ const page = {};
- if (params.has("engine")) setEngine(params.get("engine"));
+ page.pushstate = page.popstate = function () {
+ if ($("#directions_content").length) {
+ page.load();
+ } else {
+ initializeFromParams();
- endpoints[0].setValue(params.get("from") || route[0] || lastLocation.join(", "));
- endpoints[1].setValue(params.get("to") || route[1] || "");
+ $(".search_form").hide();
+ $(".directions_form").show();
- map.setSidebarOverlaid(!endpoints[0].latlng || !endpoints[1].latlng);
+ 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].disable();
- endpoints[1].disable();
+ endpoints[0].disableListeners();
+ endpoints[1].disableListeners();
+
+ endpoints[0].clearValue();
+ endpoints[1].clearValue();
map
.removeLayer(popup)
"arrive": "destination"
};
const ICON_MAP = {
- "continue": 0,
- "merge right": 21,
- "merge left": 20,
- "off ramp right": 24,
- "off ramp left": 25,
- "on ramp right": 2,
- "on ramp left": 6,
- "fork right": 18,
- "fork left": 19,
- "end of road right": 22,
- "end of road left": 23,
- "turn straight": 0,
- "turn slight right": 1,
- "turn right": 2,
- "turn sharp right": 3,
- "turn uturn": 4,
- "turn slight left": 5,
- "turn left": 6,
- "turn sharp left": 7,
- "roundabout": 10,
- "rotary": 10,
- "exit roundabout": 10,
- "exit rotary": 10,
- "depart": 8,
- "arrive": 14
+ "continue": "straight",
+ "merge right": "merge-right",
+ "merge left": "merge-left",
+ "off ramp right": "exit-right",
+ "off ramp left": "exit-left",
+ "on ramp right": "right",
+ "on ramp left": "left",
+ "fork right": "fork-right",
+ "fork left": "fork-left",
+ "end of road right": "end-of-road-right",
+ "end of road left": "end-of-road-left",
+ "turn straight": "straight",
+ "turn slight right": "slight-right",
+ "turn right": "right",
+ "turn sharp right": "sharp-right",
+ "turn uturn": "u-turn",
+ "turn slight left": "slight-left",
+ "turn left": "left",
+ "turn sharp left": "sharp-left",
+ "roundabout": "roundabout",
+ "rotary": "roundabout",
+ "exit roundabout": "roundabout",
+ "exit rotary": "roundabout",
+ "depart": "start",
+ "arrive": "destination"
};
function numToWord(num) {
return ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"][num - 1];
(function () {
function FOSSGISValhallaEngine(modeId, costing) {
const INSTR_MAP = [
- 0, // kNone = 0;
- 8, // kStart = 1;
- 8, // kStartRight = 2;
- 8, // kStartLeft = 3;
- 14, // kDestination = 4;
- 14, // kDestinationRight = 5;
- 14, // kDestinationLeft = 6;
- 0, // kBecomes = 7;
- 0, // kContinue = 8;
- 1, // kSlightRight = 9;
- 2, // kRight = 10;
- 3, // kSharpRight = 11;
- 4, // kUturnRight = 12;
- 4, // kUturnLeft = 13;
- 7, // kSharpLeft = 14;
- 6, // kLeft = 15;
- 5, // kSlightLeft = 16;
- 0, // kRampStraight = 17;
- 24, // kRampRight = 18;
- 25, // kRampLeft = 19;
- 24, // kExitRight = 20;
- 25, // kExitLeft = 21;
- 0, // kStayStraight = 22;
- 1, // kStayRight = 23;
- 5, // kStayLeft = 24;
- 20, // kMerge = 25;
- 10, // kRoundaboutEnter = 26;
- 10, // kRoundaboutExit = 27;
- 17, // kFerryEnter = 28;
- 0, // kFerryExit = 29;
+ "straight", // kNone = 0;
+ "start", // kStart = 1;
+ "start", // kStartRight = 2;
+ "start", // kStartLeft = 3;
+ "destination", // kDestination = 4;
+ "destination", // kDestinationRight = 5;
+ "destination", // kDestinationLeft = 6;
+ "straight", // kBecomes = 7;
+ "straight", // kContinue = 8;
+ "slight-right", // kSlightRight = 9;
+ "right", // kRight = 10;
+ "sharp-right", // kSharpRight = 11;
+ "u-turn", // kUturnRight = 12;
+ "u-turn", // kUturnLeft = 13;
+ "sharp-left", // kSharpLeft = 14;
+ "left", // kLeft = 15;
+ "slight-left", // kSlightLeft = 16;
+ "straight", // kRampStraight = 17;
+ "exit-right", // kRampRight = 18;
+ "exit-left", // kRampLeft = 19;
+ "exit-right", // kExitRight = 20;
+ "exit-left", // kExitLeft = 21;
+ "straight", // kStayStraight = 22;
+ "slight-right", // kStayRight = 23;
+ "slight-left", // kStayLeft = 24;
+ "merge-left", // kMerge = 25;
+ "roundabout", // kRoundaboutEnter = 26;
+ "roundabout", // kRoundaboutExit = 27;
+ "ferry", // kFerryEnter = 28;
+ "straight", // kFerryExit = 29;
null, // kTransit = 30;
null, // kTransitTransfer = 31;
null, // kTransitRemainOn = 32;
null, // kTransitConnectionTransfer = 34;
null, // kTransitConnectionDestination = 35;
null, // kPostTransitConnectionDestination = 36;
- 21, // kMergeRight = 37;
- 20 // kMergeLeft = 38;
+ "merge-right", // kMergeRight = 37;
+ "merge-left" // kMergeLeft = 38;
];
function _processDirections(tripLegs) {
(function () {
function GraphHopperEngine(modeId, vehicleType) {
const GH_INSTR_MAP = {
- "-3": 7, // sharp left
- "-2": 6, // left
- "-1": 5, // slight left
- "0": 0, // straight
- "1": 1, // slight right
- "2": 2, // right
- "3": 3, // sharp right
- "4": 14, // finish reached
- "5": 14, // via reached
- "6": 10, // roundabout
- "-7": 19, // keep left
- "7": 18, // keep right
- "-98": 4, // unknown direction u-turn
- "-8": 4, // left u-turn
- "8": 4 // right u-turn
+ "-3": "sharp-left",
+ "-2": "left",
+ "-1": "slight-left",
+ "0": "straight",
+ "1": "slight-right",
+ "2": "right",
+ "3": "sharp-right",
+ "4": "destination", // finish reached
+ "5": "destination", // via reached
+ "6": "roundabout",
+ "-7": "fork-left",
+ "7": "fork-right",
+ "-98": "u-turn", // unknown direction u-turn
+ "-8": "u-turn", // left u-turn
+ "8": "u-turn" // right u-turn
};
function _processDirections(path) {
lineseg
]; // TODO does graphhopper map instructions onto line indices?
});
- steps.at(-1)[1] = 14;
+ steps.at(-1)[1] = "destination";
return {
line: line,
#sidebar {
float: left;
width: $sidebarWidth;
-
- #sidebar_loader {
- display: none;
- }
}
.overlay-sidebar #sidebar {
display: block;
}
+ #sidebar_loader,
#sidebar_content {
display: none;
}
/* Rules for routing */
-div.direction {
- background-image: image-url('routing-sprite.svg');
- width: 20px;
- height: 20px;
- background-repeat: no-repeat;
-}
-@for $i from 0 through 25 {
-div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
-}
-
-@include color-mode(dark) {
- div.direction {
- filter: invert(1);
- }
-}
-
td.distance {
font-size: x-small;
}
<% content_for(:content_class) { "overlay-sidebar" } %>
+
+<svg width="20" height="20" class="d-none">
+ <symbol id="routing-sprite-start" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M10 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-destination" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M10 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
+ </symbol>
+
+ <symbol id="routing-sprite-straight" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M10 17 v-13 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-slight-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M7 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-sharp-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 17 v-7 q0 -6 6 0 l2 2 m0 0 v-3 l-3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-u-turn" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M16 17 v-7 a4.5 4.5 0 0 0 -9 0 v5 m-2.5 -2 l2.5 2.5 2.5 -2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-slight-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M13 17 v-3 q0 -2 -2 -4 l-5 -5 m0 0 h3 l-3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M13 17 v-5 q0 -3 -3 -3 h-4 m2 2.5 l-2.5 -2.5 2.5 -2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-sharp-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M13 17 v-7 q0 -6 -6 0 l-2 2 m0 0 v-3 l3 3 z" />
+ </symbol>
+
+ <symbol id="routing-sprite-roundabout" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 17 v-3 a 3 3 0 1 0 0 -6 3 3 0 1 0 0 6 m2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+ </symbol>
+
+ <symbol id="routing-sprite-fork-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M9 14 q0 -2 -2 -4 l-3 -3" opacity=".5" />
+ <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-fork-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M11 14 q0 -2 2 -4 l3 -3" opacity=".5" />
+ <path d="M11 17 v-3 q0 -2 -2 -4 l-5 -5 m0 0 h3 l-3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-merge-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M8 7 q0 2 -2 4 l-3 3" opacity=".5" />
+ <path d="M8 4 v3 q0 2 2 4 l5 5 m-5 -5 h3 l-3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-merge-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M12 7 q0 2 2 4 l3 3" opacity=".5" />
+ <path d="M12 4 v3 q0 2 -2 4 l-5 5 m5 -5 h-3 l3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-end-of-road-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M2 9 h10" opacity=".5" />
+ <path d="M9 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-end-of-road-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M18 9 h-10" opacity=".5" />
+ <path d="M11 17 v-5 q0 -3 -3 -3 h-4 m2 2.5 l-2.5 -2.5 2.5 -2.5 z" />
+ </symbol>
+ <symbol id="routing-sprite-exit-right" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M9 14 v-8" opacity=".5" />
+ <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
+ </symbol>
+ <symbol id="routing-sprite-exit-left" fill="none" stroke="currentColor" stroke-width="2">
+ <path d="M11 14 v-8" opacity=".5" />
+ <path d="M11 17 v-3 q0 -2 -2 -4 l-5 -5 m0 0 h3 l-3 3 z" />
+ </symbol>
+
+ <symbol id="routing-sprite-ferry" fill="none" stroke="currentColor" stroke-width="1">
+ <path d="M10.5 8 l-6 2 l2.5 2 v1.5 a2.828 2.828 0 0 1 1.5 1 a2.828 2.828 0 0 1 4 0 a2.828 2.828 0 0 1 1.5 -1 v-1.5 l2.5 -2 z" fill="currentColor" />
+ <path d="M6.5 9.5 v-5 h8 v5 m-5.5 -6 h3" />
+ <path d="M5.5 16.5 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0" />
+ </symbol>
+</svg>
+
+<%= render "sidebar_header", :title => t(".title") %>
+
+<div id="directions_content"></div>
<div id="browse_status"></div>
- <div id="sidebar_loader" class="my-3 text-center loader">
+ <div id="sidebar_loader" class="my-3 text-center loader" hidden>
<div class="spinner-border" role="status">
<span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
</div>
results:
no_results: "No results found"
more_results: "More results"
+ directions:
+ search:
+ title: Directions
issues:
index:
title: Issues
directions:
ascend: "Ascend"
descend: "Descend"
- directions: "Directions"
distance: "Distance"
distance_m: "%{distance}m"
distance_km: "%{distance}km"