@maptrip/map-tiles 1.4.0 → 1.5.0

package/dist/map-tiles.js

@@ -1183,6 +1183,11 @@ class VectorTileRenderer {
         "linesOutline",
         collisions
       );
+    }
+    for (let i = 0; i < rank.length; i++) {
+      let currentRank = lines.filter(
+        (it) => parseInt(it.properties.sort_rank) === rank[i]
+      );
       this.drawTilePhase(
         currentRank,
         z,
@@ -1346,12 +1351,12 @@ class VectorTileRenderer {
                     context,
                     collisions
                   )) {
-                    const match = text.match(/([A-Z])\s?([0-9]+[a-z]*).*/);
+                    const match = text.match(/([a-zA-Z])\s?([0-9]+[a-z]*).*/);
                     if (match) {
                       const letter = match[1];
                       const number = match[2];
-                      if (letter === "A" || letter === "B") {
-                        text = number;
+                      if (letter === "A" || letter === "B" || letter === "s") {
+                        text = letter === "A" || letter === "B" ? number : letter + number;
                         this.drawImage(
                           coordinates,
                           boundaries,
@@ -1623,35 +1628,50 @@ class VectorTileRenderer {
       context.setLineDash([]);
     }
     if (merged.url && this._images[merged.url]) {
-      var desired = 40;
-      var distance = Math.round(desired / 2);
+      const desiredDistance = 40;
+      const margin = Math.round(desiredDistance / 2);
+      let totalLength = 0;
+      for (let i2 = 0; i2 < points.length - 1; i2++) {
+        totalLength += Math.hypot(
+          points[i2 + 1].x - points[i2].x,
+          points[i2 + 1].y - points[i2].y
+        );
+      }
+      let distance = margin;
+      let traveled = 0;
       for (var i = 0; i < points.length - 1; i++) {
-        var dx = points[i + 1].x - points[i].x;
-        var dy = points[i + 1].y - points[i].y;
-        var angle = Math.atan2(dy, dx);
+        const dx = points[i + 1].x - points[i].x;
+        const dy = points[i + 1].y - points[i].y;
+        let angle = Math.atan2(dy, dx);
         if (merged.direction != "reverse") {
           angle = angle + Math.PI;
         }
-        var distanceToNext = Math.sqrt(dx * dx + dy * dy);
+        const distanceToNext = Math.sqrt(dx * dx + dy * dy);
         while (distance < distanceToNext) {
-          var f = distance / distanceToNext;
-          var x = points[i].x + f * dx;
-          var y = points[i].y + f * dy;
-          context.save();
-          context.translate(x, y);
-          context.rotate(angle);
-          context.translate(-x, -y);
-          context.drawImage(
-            this._images[merged.url],
-            x + merged.dx,
-            y + merged.dy,
-            Number(merged.width),
-            Number(merged.height)
-          );
-          context.restore();
-          distance += desired;
+          if (traveled + distance <= totalLength - margin) {
+            const f = distance / distanceToNext;
+            const x = points[i].x + f * dx;
+            const y = points[i].y + f * dy;
+            const size = Math.max(12, 1.5 * merged.width);
+            if (x > size && y > size && x < VECTOR_TILE_SIZE - size && y < VECTOR_TILE_SIZE - size) {
+              context.save();
+              context.translate(x, y);
+              context.rotate(angle);
+              context.translate(-x, -y);
+              context.drawImage(
+                this._images[merged.url],
+                x - size / 2,
+                y - size / 2,
+                size,
+                size
+              );
+              context.restore();
+            }
+          }
+          distance += desiredDistance;
         }
-        distance = (desired - (distanceToNext - distance)) % desired;
+        traveled += distanceToNext;
+        distance -= distanceToNext;
       }
     }
   }
@@ -2228,7 +2248,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 1,
         to: 19,
         polygon: {
-          color: "#e6e6e6"
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     ],
@@ -2781,7 +2801,9 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 19,
         line: {
           width: 7,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2820,13 +2842,12 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "forward"
+          direction: "forward",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2865,13 +2886,12 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "reverse"
+          direction: "reverse",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2911,7 +2931,7 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 19,
         line: {
           width: 2,
-          color: "#A5ADB8"
+          color: "#B0B9C4"
         },
         text: {
           size: 12,
@@ -2926,7 +2946,7 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 16,
         line: {
           width: 1,
-          color: "#A5ADB8"
+          color: "#B0B9C4"
         },
         text: {
           size: 12,
@@ -2941,7 +2961,7 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 14,
         line: {
           width: 1,
-          color: "#A5ADB8"
+          color: "#B0B9C4"
         }
       }
     ],
@@ -2950,7 +2970,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 2,
+          width: 3,
           color: "#ffffff"
         },
         text: {
@@ -2982,12 +3002,9 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "forward"
         },
         text: {
@@ -3019,12 +3036,9 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "reverse"
         },
         text: {
@@ -3058,7 +3072,7 @@ const RENDERING_CONFIG_DEFAULT = {
         line: {
           width: 2,
           color: "rgba(1, 1, 1, 0)",
-          dashColor: "#A5ADB8",
+          dashColor: "#B0B9C4",
           dashLength: 6
         },
         text: {
@@ -3072,11 +3086,22 @@ const RENDERING_CONFIG_DEFAULT = {
     ],
     rail: [
       {
-        from: 13,
+        from: 16,
         to: 19,
+        line: {
+          width: 2,
+          color: "#8B8C8C",
+          dashColor: "#FAFAFA",
+          dashLength: 10
+        }
+      },
+      {
+        from: 12,
+        to: 15,
         line: {
           width: 1,
-          color: "#d4d4d4"
+          color: "#8B8C8C",
+          dashLength: 10
         }
       }
     ],
@@ -3085,7 +3110,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 5,
+          width: 3,
           color: "#74a8e1"
         },
         text: {
@@ -3100,7 +3125,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 14,
         to: 16,
         line: {
-          width: 3,
+          width: 2,
           color: "#74a8e1"
         },
         text: {
@@ -3115,7 +3140,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 10,
         to: 13,
         line: {
-          width: 2,
+          width: 1,
           color: "#74a8e1"
         }
       }
@@ -3732,7 +3757,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 1,
         to: 19,
         polygon: {
-          color: "#e6e6e6"
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     ],
@@ -3789,7 +3814,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
           width: 1
         },
         polygon: {
-          color: "#c5c5c5"
+          color: "#BBC5CF"
         },
         text: {
           size: 14,
@@ -4285,7 +4310,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 19,
         line: {
           width: 7,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4324,13 +4351,12 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "forward"
+          direction: "forward",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4369,13 +4395,12 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "reverse"
+          direction: "reverse",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4414,7 +4439,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 4,
+          width: 2,
           color: "#cccccc"
         },
         text: {
@@ -4452,7 +4477,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 2,
+          width: 3,
           color: "#ffffff"
         },
         text: {
@@ -4484,12 +4509,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "forward"
         },
         text: {
@@ -4521,12 +4543,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "reverse"
         },
         text: {
@@ -4560,7 +4579,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         line: {
           width: 2,
           color: "rgba(1, 1, 1, 0)",
-          dashColor: "#A5ADB8",
+          dashColor: "#cccccc",
           dashLength: 6
         },
         text: {
@@ -4574,11 +4593,22 @@ const RENDERING_CONFIG_GRAYSCALE = {
     ],
     rail: [
       {
-        from: 13,
+        from: 16,
         to: 19,
+        line: {
+          width: 2,
+          color: "#8B8C8C",
+          dashColor: "#FAFAFA",
+          dashLength: 10
+        }
+      },
+      {
+        from: 12,
+        to: 15,
         line: {
           width: 1,
-          color: "#d4d4d4"
+          color: "#8B8C8C",
+          dashLength: 10
         }
       }
     ],
@@ -4587,7 +4617,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 5,
+          width: 3,
           color: "#9e9e9e"
         },
         text: {
@@ -4602,7 +4632,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 14,
         to: 16,
         line: {
-          width: 3,
+          width: 2,
           color: "#9e9e9e"
         },
         text: {
@@ -4617,7 +4647,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 10,
         to: 13,
         line: {
-          width: 2,
+          width: 1,
           color: "#9e9e9e"
         }
       }