Skip to content

Commit

Permalink
Use svg symbols for routing icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@AntonKhorev
AntonKhorev committed Jun 15, 2024
1 parent 78d3b47 commit 59571f8
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 145 deletions.
55 changes: 0 additions & 55 deletions app/assets/images/routing-sprite.svg
View file

This file was deleted.

6 changes: 5 additions & 1 deletion app/assets/javascripts/index/directions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -307,7 +307,11 @@ OSM.Directions = function (map) {
}

var 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'>" + dist);

Expand Down
50 changes: 25 additions & 25 deletions app/assets/javascripts/index/directions/fossgis_osrm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,31 +38,31 @@ function FOSSGISOSRMEngine(id, vehicleType) {
"arrive": "javascripts.directions.instructions.destination"
};
var 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"
};
var numToWord = function (num) {
return ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"][num - 1];
Expand Down
64 changes: 32 additions & 32 deletions app/assets/javascripts/index/directions/fossgis_valhalla.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
function FOSSGISValhallaEngine(id, costing) {
var 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, // kTransitConnectionStart = 33;
null, // kTransitConnectionTransfer = 34;
null, // kTransitConnectionDestination = 35;
null, // kPostTransitConnectionDestination = 36;
21, // kMergeRight = 37;
20 // kMergeLeft = 38;
"merge-right", // kMergeRight = 37;
"merge-left" // kMergeLeft = 38;
];

return {
Expand Down
32 changes: 16 additions & 16 deletions app/assets/javascripts/index/directions/graphhopper.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
function GraphHopperEngine(id, vehicleType) {
var 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
};

return {
Expand Down Expand Up @@ -50,7 +50,7 @@ function GraphHopperEngine(id, vehicleType) {
var len = path.instructions.length;
for (var i = 0; i < len; i++) {
var instr = path.instructions[i];
var instrCode = (i === len - 1) ? 14 : GH_INSTR_MAP[instr.sign];
var instrCode = (i === len - 1) ? "destination" : GH_INSTR_MAP[instr.sign];
var instrText = "<b>" + (i + 1) + ".</b> ";
instrText += instr.text;
var latLng = line[instr.interval[0]];
Expand Down
16 changes: 0 additions & 16 deletions app/assets/stylesheets/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,22 +545,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;
}
Expand Down
77 changes: 77 additions & 0 deletions app/views/directions/search.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +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("javascripts.directions.directions") %>

<div id="directions_content"></div>

0 comments on commit 59571f8

Please sign in to comment.