]> git.openstreetmap.org Git - rails.git/commitdiff
Merge remote-tracking branch 'upstream/pull/5756'
authorTom Hughes <tom@compton.nu>
Thu, 6 Mar 2025 17:55:14 +0000 (17:55 +0000)
committerTom Hughes <tom@compton.nu>
Thu, 6 Mar 2025 17:55:14 +0000 (17:55 +0000)
app/assets/images/routing-sprite.svg [deleted file]
app/assets/javascripts/index.js
app/assets/javascripts/index/directions-endpoint.js
app/assets/javascripts/index/directions.js
app/assets/javascripts/index/directions/fossgis_osrm.js
app/assets/javascripts/index/directions/fossgis_valhalla.js
app/assets/javascripts/index/directions/graphhopper.js
app/assets/stylesheets/common.scss
app/views/directions/search.html.erb
app/views/layouts/map.html.erb
config/locales/en.yml

diff --git a/app/assets/images/routing-sprite.svg b/app/assets/images/routing-sprite.svg
deleted file mode 100644 (file)
index 97701d5..0000000
+++ /dev/null
@@ -1,55 +0,0 @@
-<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>
index cbb6afafe428bc5f645095f13d3295b087a03d52..b79c3308888904bfb02b6457a6de7775e42c64fb 100644 (file)
@@ -37,7 +37,7 @@ $(function () {
 
     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
@@ -53,7 +53,7 @@ $(function () {
     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);
index 0b52d3d4c2c41b3063278207199d0bd9935d5e70..e3f6afa46d4a49a4984a94097347878411b854ff 100644 (file)
@@ -14,23 +14,16 @@ OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, ch
     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) {
@@ -91,6 +84,15 @@ OSM.DirectionsEndpoint = function Endpoint(map, input, iconUrl, dragCallback, ch
     }
   };
 
+  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;
index 40ca85d960fc6f0d29504761a1bb8eeb2b4ab581..89888bbd10cf7fd1aeb61f766123ada69bc0737d 100644 (file)
@@ -134,7 +134,7 @@ OSM.Directions = function (map) {
     // 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) {
@@ -158,16 +158,10 @@ OSM.Directions = function (map) {
 
       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
         );
@@ -177,7 +171,11 @@ OSM.Directions = function (map) {
         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));
 
@@ -203,27 +201,19 @@ OSM.Directions = function (map) {
       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;
@@ -238,6 +228,15 @@ OSM.Directions = function (map) {
     }
   }
 
+  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"));
 
@@ -284,11 +283,18 @@ OSM.Directions = function (map) {
     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();
@@ -308,32 +314,51 @@ OSM.Directions = function (map) {
 
     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)
index 2332049befc14691a1843b4d6e78bb3804132122..4e8691a794b5055acb2729cc254e85f7e6b972e5 100644 (file)
         "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];
index 11aa4470b4dfbf64d7204d3dd0aec78890e26168..493d0907208bcea6fd7406ac0d4ec79afb39aa70 100644 (file)
@@ -1,36 +1,36 @@
 (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;
@@ -38,8 +38,8 @@
       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) {
index b3194d16c17388240663b18e2a3dcc258fda3ac4..430801a3b669aca3954abe6f20ab0fab553ce094 100644 (file)
@@ -1,21 +1,21 @@
 (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) {
@@ -34,7 +34,7 @@
           lineseg
         ]; // TODO does graphhopper map instructions onto line indices?
       });
-      steps.at(-1)[1] = 14;
+      steps.at(-1)[1] = "destination";
 
       return {
         line: line,
index c1728f870220b78a4229a10a9fc2b118d0d14fe0..27cfb465c5ba5180e4c2b6ad3d993db5eb190781 100644 (file)
@@ -336,10 +336,6 @@ body.small-nav {
   #sidebar {
     float: left;
     width: $sidebarWidth;
-
-    #sidebar_loader {
-      display: none;
-    }
   }
 
   .overlay-sidebar #sidebar {
@@ -355,6 +351,7 @@ body.small-nav {
       display: block;
     }
 
+    #sidebar_loader,
     #sidebar_content {
       display: none;
     }
@@ -592,22 +589,6 @@ header .search_forms,
 
 /* 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;
 }
index ea6ee7088423e1b6c5f6a66431f78aa7e200df4d..ff2bcb2da50830f6fc79dddf8412d6fd5a4e4b14 100644 (file)
@@ -1 +1,82 @@
 <% 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>
index 72f6076b45850999df682013efd1b0e9e60b2aa5..eeb6d7472d92ba8edce37b949427745d42d6f28b 100644 (file)
@@ -18,7 +18,7 @@
 
     <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>
index a2c12df454352b0778917b94a326b11cc98af23b..093827ebdc75676b2306cb941bdf908a7e00ebd9 100644 (file)
@@ -1509,6 +1509,9 @@ en:
     results:
       no_results: "No results found"
       more_results: "More results"
+  directions:
+    search:
+      title: Directions
   issues:
     index:
       title: Issues
@@ -3245,7 +3248,6 @@ en:
     directions:
       ascend: "Ascend"
       descend: "Descend"
-      directions: "Directions"
       distance: "Distance"
       distance_m: "%{distance}m"
       distance_km: "%{distance}km"