Replace differently sized arrows with a marker

diff --git a/app/views/directions/search.html.erb b/app/views/directions/search.html.erb
index a7f83be3f4a5235a254eaeacea41e1b5a5b50a01..15b6b31527b43923fdbacf597af2f1f26c016d7a 100644 (file)
--- a/app/views/directions/search.html.erb
+++ b/app/views/directions/search.html.erb
@@ -1,27 +1,30 @@
 <% content_for(:content_class) { "overlay-sidebar" } %>
 
 <% content_for(:content_class) { "overlay-sidebar" } %>
 

-<svg width="20" height="20" class="d-none">
+<svg width="0" height="0" class="position-absolute">
+  <marker id="routing-sprite-arrow" refX="3" refY="5" orient="auto" markerWidth="5" markerHeight="10" markerUnits="userSpaceOnUse">
+    <path d="M3.5 5L1 2.5v5z" fill="currentcolor" stroke="currentcolor"></path>
+  </marker>

   <symbol id="routing-sprite-start" fill="none" stroke="currentColor" stroke-width="2">
   <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" />
+    <path d="M10 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-destination" fill="none" stroke="currentColor" stroke-width="2">
   </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" />
+    <path d="M10 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
 
   <symbol id="routing-sprite-straight" fill="none" stroke="currentColor" stroke-width="2">
   </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" />
+    <path d="M10 17 v-13" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-slight-right" fill="none" stroke="currentColor" stroke-width="2">
   </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" />
+    <path d="M7 17 v-3 q0 -2 2 -4 l5 -5" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-right" fill="none" stroke="currentColor" stroke-width="2">
   </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" />
+    <path d="M8 17 v-5 q0 -3 3 -3 h4" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-sharp-right" fill="none" stroke="currentColor" stroke-width="2">
   </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" />
+    <path d="M8 17 v-7 q0 -6 6 0 l2 2" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-u-turn-right" fill="none" stroke="currentColor" stroke-width="2">
   </symbol>
   <symbol id="routing-sprite-u-turn-right" fill="none" stroke="currentColor" stroke-width="2">

-    <path d="M4 17 v-7 a4.5 4.5 0 0 1 9 0 v5 m2.5 -2 l-2.5 2.5 -2.5 -2.5 z" />
+    <path d="M4 17 v-7 a4.5 4.5 0 0 1 9 0 v5" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-slight-left">
     <use href="#routing-sprite-slight-right" transform="matrix(-1 0 0 1 20 0)" />
   </symbol>
   <symbol id="routing-sprite-slight-left">
     <use href="#routing-sprite-slight-right" transform="matrix(-1 0 0 1 20 0)" />


@@ -37,33 +40,33 @@
   </symbol>
 
   <symbol id="routing-sprite-roundabout" fill="none" stroke="currentColor" stroke-width="2">
   </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" />
+    <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" marker-end="url(#routing-sprite-arrow)" />

   </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" />
   </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" />
+    <path d="M9 17 v-3 q0 -2 2 -4 l5 -5" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-fork-left">
     <use href="#routing-sprite-fork-right" transform="matrix(-1 0 0 1 20 0)" />
   </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" />
   </symbol>
   <symbol id="routing-sprite-fork-left">
     <use href="#routing-sprite-fork-right" transform="matrix(-1 0 0 1 20 0)" />
   </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" />
+    <path d="M8 4 v3 q0 2 2 4 l5 5 m-5 -5" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-merge-right">
     <use href="#routing-sprite-merge-left" transform="matrix(-1 0 0 1 20 0)" />
   </symbol>
   <symbol id="routing-sprite-end-of-road-right" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M2 9 h10" opacity=".5" />
   </symbol>
   <symbol id="routing-sprite-merge-right">
     <use href="#routing-sprite-merge-left" transform="matrix(-1 0 0 1 20 0)" />
   </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" />
+    <path d="M9 17 v-5 q0 -3 3 -3 h4" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-end-of-road-left">
     <use href="#routing-sprite-end-of-road-right" transform="matrix(-1 0 0 1 20 0)" />
   </symbol>
   <symbol id="routing-sprite-exit-right" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M9 14 v-8" opacity=".5" />
   </symbol>
   <symbol id="routing-sprite-end-of-road-left">
     <use href="#routing-sprite-end-of-road-right" transform="matrix(-1 0 0 1 20 0)" />
   </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" />
+    <path d="M9 17 v-3 q0 -2 2 -4 l5 -5" marker-end="url(#routing-sprite-arrow)" />

   </symbol>
   <symbol id="routing-sprite-exit-left">
     <use href="#routing-sprite-exit-right" transform="matrix(-1 0 0 1 20 0)" />
   </symbol>
   <symbol id="routing-sprite-exit-left">
     <use href="#routing-sprite-exit-right" transform="matrix(-1 0 0 1 20 0)" />