From: Anton Khorev Date: Tue, 11 Jun 2024 15:11:13 +0000 (+0300) Subject: Use svg symbols for routing icons X-Git-Tag: live~40^2 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/1b8a5a8f1510299ff039feb437d89f89d1b7a406?hp=--cc Use svg symbols for routing icons --- 1b8a5a8f1510299ff039feb437d89f89d1b7a406 diff --git a/app/assets/images/routing-sprite.svg b/app/assets/images/routing-sprite.svg deleted file mode 100644 index 97701d5a8..000000000 --- a/app/assets/images/routing-sprite.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index cddb3a451..89888bbd1 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -171,7 +171,11 @@ OSM.Directions = function (map) { const [ll, direction, instruction, dist, lineseg] = step; const row = $(""); - row.append("
"); + if (direction) { + row.append(""); + } else { + row.append(""); + } row.append("" + instruction); row.append("" + getDistText(dist)); diff --git a/app/assets/javascripts/index/directions/fossgis_osrm.js b/app/assets/javascripts/index/directions/fossgis_osrm.js index 2332049be..4e8691a79 100644 --- a/app/assets/javascripts/index/directions/fossgis_osrm.js +++ b/app/assets/javascripts/index/directions/fossgis_osrm.js @@ -34,31 +34,31 @@ "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]; diff --git a/app/assets/javascripts/index/directions/fossgis_valhalla.js b/app/assets/javascripts/index/directions/fossgis_valhalla.js index 11aa4470b..493d09072 100644 --- a/app/assets/javascripts/index/directions/fossgis_valhalla.js +++ b/app/assets/javascripts/index/directions/fossgis_valhalla.js @@ -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) { diff --git a/app/assets/javascripts/index/directions/graphhopper.js b/app/assets/javascripts/index/directions/graphhopper.js index b3194d16c..430801a3b 100644 --- a/app/assets/javascripts/index/directions/graphhopper.js +++ b/app/assets/javascripts/index/directions/graphhopper.js @@ -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, diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index a2e54ec6d..27cfb465c 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -589,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; } diff --git a/app/views/directions/search.html.erb b/app/views/directions/search.html.erb index 3de1edb3d..ff2bcb2da 100644 --- a/app/views/directions/search.html.erb +++ b/app/views/directions/search.html.erb @@ -1,5 +1,82 @@ <% content_for(:content_class) { "overlay-sidebar" } %> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + <%= render "sidebar_header", :title => t(".title") %>