@maptrip/map-tiles 1.5.0 → 1.6.0

package/dist/map-tiles.js

@@ -1107,7 +1107,7 @@ class CollisionDetector {
   }
 }
 
-const URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=tomtom${z}&project=${project}&projection=wgs84";
+const URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=level${z}&project=${project}&projection=wgs84";
 const PROVIDER_PROJECTS = {
   tomtom: "TomTom_latest",
   orbis: "Orbis_latest",
@@ -1121,12 +1121,14 @@ const PROVIDER_NAMES = {
   openstreetmap: "OpenStreetMap"
 };
 const PROVIDER_TRAFFIC = {
-  tomtom: "https://v0.maptrip.de/tiles?project=TrafficMobileTomTom_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic${z}&projection=wgs84",
-  here: "https://v0.maptrip.de/tiles?project=TrafficMobileHere_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic${z}&projection=wgs84",
-  openstreetmap: null
+  tomtom: "https://v0.maptrip.de/tiles?project=TrafficMobileTomTom_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
+  here: "https://v0.maptrip.de/tiles?project=TrafficMobileHere_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
+  openstreetmap: "https://v0.maptrip.de/tiles?project=TrafficMobileOSM_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
+  orbis: "https://v0.maptrip.de/tiles?project=TrafficMobileORBIS_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84"
 };
+const DEFAULT_PROVIDER = "OpenStreetmap";
 const MIN_ZOOM = 2;
-const MAX_ZOOM = 18;
+const MAX_ZOOM = 21;
 const ATTRIBUTION = '&#169;&nbsp;<a href="https://maptrip.de/" target="_blank">infoware GmbH</a>';
 const VECTOR_TILE_SIZE = 256;
 const VECTOR_TILE_RENDER_PADDING = 32;
@@ -1140,6 +1142,8 @@ class VectorTileRenderer {
     this.preloadImages();
   }
   drawTile(layer, z, boundaries, context) {
+    context.lineJoin = "round";
+    context.lineCap = "round";
     context.fillStyle = this.getBackgroundColor(z);
     context.fillRect(0, 0, VECTOR_TILE_SIZE, VECTOR_TILE_SIZE);
     var collisions = new CollisionDetector();
@@ -1602,17 +1606,46 @@ class VectorTileRenderer {
     }
     return points;
   }
+  /**
+   * @private
+   */
+  translatePolyline(points, delta) {
+    for (let i = 0; i < points.length - 1; i++) {
+      const direction = {
+        x: points[i + 1].x - points[i].x,
+        y: points[i + 1].y - points[i].y
+      };
+      const length = Math.sqrt(Math.pow(direction.x, 2) + Math.pow(direction.y, 2));
+      const normal = {
+        x: direction.y / length,
+        y: -direction.x / length
+      };
+      points[i] = {
+        x: points[i].x - delta * normal.x,
+        y: points[i].y - delta * normal.y
+      };
+      if (i === points.length - 2) {
+        points[i + 1] = {
+          x: points[i + 1].x - delta * normal.x,
+          y: points[i + 1].y - delta * normal.y
+        };
+      }
+    }
+  }
   /**
    * @private
    */
   drawPolyline(coordinates, geoJsonProperties, boundaries, style, context, phase) {
     var merged = { ...VectorTileRenderer.DEFAULT_STYLE.LINE, ...style };
     context.globalAlpha = merged.opacity;
+    let points = this.projectCoordinates(coordinates, boundaries);
+    if (merged.delta > 0) {
+      this.translatePolyline(points, merged.delta);
+    }
     if ("linesOutline" === phase) {
       if (merged.outlineColor && merged.outlineWidth) {
-        let points2 = this.projectCoordinates(coordinates, boundaries);
         this.drawPath(
-          points2,
+          points,
           merged.outlineColor,
           merged.width + merged.outlineWidth * 2,
           context
@@ -1620,7 +1653,6 @@ class VectorTileRenderer {
       }
       return;
     }
-    let points = this.projectCoordinates(coordinates, boundaries);
     this.drawPath(points, merged.color, merged.width, context);
     if (merged.dashColor && merged.dashLength) {
       context.setLineDash([merged.dashLength, merged.dashLength]);
@@ -1846,8 +1878,6 @@ class VectorTileRenderer {
     context.beginPath();
     context.strokeStyle = color;
     context.lineWidth = width;
-    context.lineCap = "square";
-    context.lineJoin = "miter";
     context.moveTo(points[0].x, points[0].y);
     for (var j = 1; j < points.length; j++) {
       context.lineTo(points[j].x, points[j].y);
@@ -1975,7 +2005,8 @@ class VectorTileRenderer {
       outlineWidth: 0,
       dashColor: void 0,
       dashLength: 0,
-      opacity: 1
+      opacity: 1,
+      delta: 0
     },
     IMAGE: {
       url: void 0,
@@ -2040,7 +2071,7 @@ const RENDERING_CONFIG_DEFAULT = {
     },
     {
       from: 8,
-      to: 19,
+      to: 21,
       color: "#eeeeee"
     }
   ],
@@ -2073,9 +2104,15 @@ const RENDERING_CONFIG_DEFAULT = {
     interstateNumbers: "interstateNumbers",
     expresswayNumbers: "highway",
     expresswayintersections: "interstate_minor",
-    trafficFlowFast: "trafficFlowFast",
-    trafficFlowMedium: "trafficFlowMedium",
-    trafficFlowSlow: "trafficFlowSlow",
+    trafficFlowFastHighway: "trafficFlowFastHighway",
+    trafficFlowFastInterstate: "trafficFlowFastInterstate",
+    trafficFlowFastMinor: "trafficFlowFastMinor",
+    trafficFlowMediumHighway: "trafficFlowMediumHighway",
+    trafficFlowMediumInterstate: "trafficFlowMediumInterstate",
+    trafficFlowMediumMinor: "trafficFlowMediumMinor",
+    trafficFlowSlowHighway: "trafficFlowSlowHighway",
+    trafficFlowSlowInterstate: "trafficFlowSlowInterstate",
+    trafficFlowSlowMinor: "trafficFlowSlowMinor",
     trafficJam: "trafficJam",
     roadworks: "roadworks",
     dangerousSituation: "dangerous_situation",
@@ -2085,7 +2122,7 @@ const RENDERING_CONFIG_DEFAULT = {
     metropolis: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 30,
           color: "#606060",
@@ -2123,7 +2160,7 @@ const RENDERING_CONFIG_DEFAULT = {
     large_city: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 24,
           color: "#606060",
@@ -2161,7 +2198,7 @@ const RENDERING_CONFIG_DEFAULT = {
     city: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 20,
           color: "#606060",
@@ -2199,7 +2236,7 @@ const RENDERING_CONFIG_DEFAULT = {
     settlement: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 18,
           color: "#606060",
@@ -2237,7 +2274,7 @@ const RENDERING_CONFIG_DEFAULT = {
     earth: [
       {
         from: 1,
-        to: 19,
+        to: 21,
         polygon: {
           color: "#f2f2f2"
         }
@@ -2246,23 +2283,16 @@ const RENDERING_CONFIG_DEFAULT = {
     urban_area: [
       {
         from: 1,
-        to: 19,
+        to: 21,
         polygon: {
           color: "rgba(0, 0, 0, 0.05)"
         }
       }
     ],
     forest: [
-      {
-        from: 1,
-        to: 14,
-        polygon: {
-          color: "#cddfb4"
-        }
-      },
       {
         from: 15,
-        to: 19,
+        to: 21,
         polygon: {
           color: "#cddfb4"
         },
@@ -2272,19 +2302,19 @@ const RENDERING_CONFIG_DEFAULT = {
           font: "Open Sans",
           fontStyle: "italic"
         }
-      }
-    ],
-    natural_park: [
+      },
       {
         from: 1,
         to: 14,
         polygon: {
-          color: "#daecbf"
+          color: "#cddfb4"
         }
-      },
+      }
+    ],
+    natural_park: [
       {
         from: 15,
-        to: 19,
+        to: 21,
         polygon: {
           color: "#daecbf"
         },
@@ -2294,12 +2324,19 @@ const RENDERING_CONFIG_DEFAULT = {
           font: "Open Sans",
           fontStyle: "italic"
         }
+      },
+      {
+        from: 1,
+        to: 14,
+        polygon: {
+          color: "#daecbf"
+        }
       }
     ],
     water: [
       {
         from: 1,
-        to: 19,
+        to: 21,
         line: {
           color: "#9fd0fc",
           width: 1
@@ -2319,7 +2356,7 @@ const RENDERING_CONFIG_DEFAULT = {
     country: [
       {
         from: 1,
-        to: 19,
+        to: 21,
         line: {
           color: "#acacac"
         },
@@ -2333,21 +2370,32 @@ const RENDERING_CONFIG_DEFAULT = {
         }
       }
     ],
-    trafficFlowFast: [
+    trafficFlowFastHighway: [
       {
         from: 1,
-        to: 8,
+        to: 5,
         line: {
           color: "#50dc32",
-          width: 1
+          width: 1,
+          delta: 1
         }
       },
       {
-        from: 9,
+        from: 6,
+        to: 9,
+        line: {
+          color: "#50dc32",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
         to: 12,
         line: {
           color: "#50dc32",
-          width: 2
+          width: 6,
+          delta: 2
         }
       },
       {
@@ -2355,33 +2403,122 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 15,
         line: {
           color: "#50dc32",
-          width: 3
+          width: 9,
+          delta: 2
         }
       },
       {
         from: 16,
-        to: 19,
+        to: 21,
+        line: {
+          color: "#50dc32",
+          width: 13,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowFastInterstate: [
+      {
+        from: 9,
+        to: 9,
+        line: {
+          color: "#50dc32",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#50dc32",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#50dc32",
+          width: 6,
+          delta: 2
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#50dc32",
+          width: 9,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#50dc32",
+          width: 12,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowFastMinor: [
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#50dc32",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#50dc32",
+          width: 5,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
         line: {
           color: "#50dc32",
-          width: 4
+          width: 9,
+          delta: 2
         }
       }
     ],
-    trafficFlowMedium: [
+    trafficFlowMediumHighway: [
       {
         from: 1,
-        to: 8,
+        to: 5,
         line: {
           color: "#ffa500",
-          width: 1
+          width: 1,
+          delta: 1
         }
       },
       {
-        from: 9,
+        from: 6,
+        to: 9,
+        line: {
+          color: "#ffa500",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
         to: 12,
         line: {
           color: "#ffa500",
-          width: 2
+          width: 6,
+          delta: 2
         }
       },
       {
@@ -2389,33 +2526,122 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 15,
         line: {
           color: "#ffa500",
-          width: 3
+          width: 9,
+          delta: 2
         }
       },
       {
         from: 16,
-        to: 19,
+        to: 21,
+        line: {
+          color: "#ffa500",
+          width: 13,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowMediumInterstate: [
+      {
+        from: 9,
+        to: 9,
+        line: {
+          color: "#ffa500",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#ffa500",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#ffa500",
+          width: 6,
+          delta: 2
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#ffa500",
+          width: 9,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#ffa500",
+          width: 12,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowMediumMinor: [
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#ffa500",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#ffa500",
+          width: 5,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
         line: {
           color: "#ffa500",
-          width: 4
+          width: 9,
+          delta: 2
         }
       }
     ],
-    trafficFlowSlow: [
+    trafficFlowSlowHighway: [
       {
         from: 1,
-        to: 8,
+        to: 5,
         line: {
           color: "#c80000",
-          width: 1
+          width: 1,
+          delta: 1
         }
       },
       {
-        from: 9,
+        from: 6,
+        to: 9,
+        line: {
+          color: "#c80000",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
         to: 12,
         line: {
           color: "#c80000",
-          width: 2
+          width: 6,
+          delta: 2
         }
       },
       {
@@ -2423,15 +2649,93 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 15,
         line: {
           color: "#c80000",
-          width: 3
+          width: 9,
+          delta: 2
         }
       },
       {
         from: 16,
-        to: 19,
+        to: 21,
+        line: {
+          color: "#c80000",
+          width: 13,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowSlowInterstate: [
+      {
+        from: 9,
+        to: 9,
+        line: {
+          color: "#c80000",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#c80000",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#c80000",
+          width: 6,
+          delta: 2
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#c80000",
+          width: 9,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#c80000",
+          width: 12,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowSlowMinor: [
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#c80000",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#c80000",
+          width: 5,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
         line: {
           color: "#c80000",
-          width: 4
+          width: 9,
+          delta: 2
         }
       }
     ],
@@ -2470,7 +2774,7 @@ const RENDERING_CONFIG_DEFAULT = {
       },
       {
         from: 15,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDg0Ny4xNTQ2IDc0My42MjUzNyIKICAgaGVpZ2h0PSI3NDMuNjI1MzciCiAgIHdpZHRoPSI4NDcuMTU0NiIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMjEzMzkiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTIxMzQ1Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzMjEzNDMiIC8+PGcKICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjI1LDAsMCwtMS4yNSwwLDc0My42MjUzNCkiCiAgICAgaWQ9ImcyMTM0NyI+PGcKICAgICAgIGlkPSJnMjEzNDkiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjEzNTEiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM4Ljg2Nyw1OTQuNTAyIGMgLTcuNTEyLDAgLTE1LjAyMywtMi44NjcgLTIwLjc1OCwtOC41OTggLTEuODgyLC0xLjg3OSAtMy40NDksLTMuOTUzIC00LjcxMSwtNi4xNTIgbCAtMTUuMjQ2LC0yNi4xNTYgLTAuMDY2LDAgTCA0Ljk4LDQ1LjU1MyBDIDQuOTMsNDUuNDU5IDQuODg3LDQ1LjM2NSA0LjgzMiw0NS4yNjQgMy4zNDgsNDIuODczIDIuMTc2LDQwLjIyMSAxLjM5OCwzNy4zNTMgLTIuNzg5LDIxLjY5NyA2LjUwNCw1LjU5OSAyMi4xNiwxLjQwNCBjIDIuNTksLTAuNjk1IDUuMTg4LC0xLjAxMiA3LjczOCwtMSBsIDYxOC4wNzUsMCBjIDE2LjIxMSwwIDI5LjM1MSwxMy4xNDEgMjkuMzUxLDI5LjM1NiAwLDUuMjk3IC0xLjQxOCwxMC4yODEgLTMuODc5LDE0LjU3OCAtMC4wMTksMC4wMzUgLTAuMDQzLDAuMDYyIC0wLjA1LDAuMDk3IEwgMzY5LjAyMyw1NzIuODQ2IGMgLTMuODYzLDYuNjY0IC01LjY0OCw5LjMwNCAtOS40MDIsMTMuMDU4IC01LjczLDUuNzMxIC0xMy4yNDIsOC41OTggLTIwLjc1NCw4LjU5OCB6IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjEzNTMiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNjMTEyMWM7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM4Ljg2Nyw1ODcuMTQ2IGMgLTcuMTI1LDAuMDUxIC0xNC45NTMsLTMuNTkzIC0xOC43ODEsLTEwLjM5OCBMIDEwLjc4OSw0MC44NDkgQyA5LjAwOCwzNy4yMDEgOC4yNTgsMzQuMDI5IDguMjM0LDMwLjQgOC4yMzQsMjMuOTA0IDExLjEwNSwxNy43NCAxNi4wODIsMTMuNTUzIDIwLjQ2OSwxMC4xNjYgMjQuNjE3LDguNCAzMC4yMDMsOC40IGwgNjE3LjkwNiwwIGMgMy43NywtMC4wMzUgNy41NDMsMC44NzEgMTAuOTgxLDMuMTMzIDYuNDQxLDMuODk1IDEwLjM5OCwxMC44ODMgMTAuNDA2LDE4LjQyNiAtMC4xODQsMy44OTQgLTEuMTQ4LDggLTIuODc5LDEwLjg5IEwgMzU3LjUwNCw1NzYuODMgYyAtMC4wMzEsMC4wNDcgLTAuMDU5LDAuMDk0IC0wLjA5NCwwLjE0MSAtMC4wMjcsMC4wNDYgLTAuMDYyLDAuMDg2IC0wLjA5LDAuMTQ0IC0xLjA5NywxLjc1OCAtMi40NzIsMy4zMDUgLTQuMDQ3LDQuNjMzIC0zLjU4MiwzLjEwOSAtOC4wNzgsNC45NzYgLTEyLjgxNiw1LjMwOSAtMC41MzEsMC4wNTQgLTEuMDYyLDAuMDg1IC0xLjU5LDAuMDg5IHogTSAzMC4yMDMsOC40IGwgLTEuNTIzLDAgMS41NTQsMCAtMC4wMzEsMCB6IE0gMzM4LjU0Nyw0ODAuOTI4IDU3NC4yNSw3Mi40IGwgLTQ3MS43MzgsMCAyMzYuMDM1LDQwOC41MjggeiIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIxMzU1IgogICAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDMzOC44NjcsNTk0LjkgYyAtNy42MTcsMCAtMTUuMjMsLTIuOTA2IC0yMS4wMzksLTguNzIyIC0xLjkwNiwtMS44OTUgLTMuNDkyLC00LjAwNCAtNC43NzMsLTYuMjI3IGwgLTE1LjEyOSwtMjUuOTU3IC0wLjA3NCwwIEwgNC42NDEsNDUuNzU2IEMgNC41NzQsNDUuNjM5IDQuNTIzLDQ1LjUzNyA0LjQ3Nyw0NS40NTUgMi45NzMsNDMuMDMzIDEuNzk3LDQwLjM1MyAxLjAyLDM3LjQ1OSAtMy4yMywyMS41ODggNi4xOTEsNS4yNzEgMjIuMDU5LDEuMDE3IDI0LjY4LDAuMzE0IDI3LjMxNiwtMC4wMDYgMjkuODk4LDAuMDAyIGwgNjE4LjA3NSwwIGMgMTYuNDI1LDAgMjkuNzUsMTMuMzI4IDI5Ljc1LDI5Ljc1OCAwLDUuMzc1IC0xLjQzOCwxMC40MTQgLTMuOTM0LDE0Ljc3MyAtMC4wMTYsMC4wMTYgLTAuMDIzLDAuMDUxIC0wLjA0NywwLjA5OCBMIDM2OS4zNzksNTczLjA0NSBjIC0zLjg3MSw2LjY2OCAtNS42OTUsOS4zNjMgLTkuNDczLDEzLjEzMyAtNS44MDgsNS44MTYgLTEzLjQyNiw4LjcyMiAtMjEuMDM1LDguNzIyIGwgLTAuMDA0LDAgeiBtIDAsLTAuMzk4IGMgNy41MTIsMCAxNS4wMjQsLTIuODY3IDIwLjc1NCwtOC41OTggMy43NTQsLTMuNzU0IDUuNTM5LC02LjM5NCA5LjQwMiwtMTMuMDU4IEwgNjczLjM5MSw0NC40MzUgYyAwLjAxMSwtMC4wMzUgMC4wMzUsLTAuMDYyIDAuMDU0LC0wLjA5NyAyLjQ2MSwtNC4yOTcgMy44NzksLTkuMjgxIDMuODc5LC0xNC41NzggMCwtMTYuMjE1IC0xMy4xNCwtMjkuMzU2IC0yOS4zNTEsLTI5LjM1NiBsIC02MTguMDc1LDAgQyAyNy4zNDgsMC4zOTIgMjQuNzUsMC43MDkgMjIuMTYsMS40MDQgNi41MDQsNS41OTkgLTIuNzg5LDIxLjY5NyAxLjM5OCwzNy4zNTMgYyAwLjc3LDIuODY4IDEuOTUsNS41MiAzLjQzNCw3LjkxMSAwLjA1NSwwLjEwMSAwLjA5OCwwLjE5NSAwLjE0OCwwLjI4OSBsIDI5My4xMDYsNTA4LjA0MyAwLjA2NiwwIDE1LjI0NiwyNi4xNTYgYyAxLjI2MiwyLjE5OSAyLjgyOSw0LjI3MyA0LjcxMSw2LjE1MiA1LjczNSw1LjczMSAxMy4yMzksOC41OTggMjAuNzU4LDguNTk4IHoiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgyMTM1NyIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzNTAuODk4LDE0OS4zODEgYyAwLDIuMzk0IDAuNzksNC43NDYgMi4yMjcsNi42NjQgbCAyLjIwMywyLjk1NyBjIDEuNTYzLDIuMDYyIDIuODcxLDQuMzEyIDMuODkxLDYuNjg3IGwgMTQuNjI5LDMzLjYzNyBjIDEuNDc2LDMuMzk1IDQuODA0LDUuNTYzIDguNDY4LDUuNTYzIGwgOTIuNDI2LDAgYyAzLjY4NCwwIDcuMDEyLC0yLjE2OCA4LjQ4OCwtNS41NjMgbCAxNC42MSwtMzMuNjM3IGMgMS4wMzksLTIuMzc1IDIuMzUxLC00LjYyNSAzLjg5LC02LjY4NyBsIDIuMjI3LC0yLjk1NyBjIDEuNDM0LC0xLjkxOCAyLjIyNywtNC4yNyAyLjIyNywtNi42NjQgbCAwLC0yNC4wNTkgYyAwLC01LjEwMSAtNC4xNDEsLTkuMjQ2IC05LjI2MiwtOS4yNDYgbCAtMTM2Ljc4NSwwIGMgLTUuMDk4LDAgLTkuMjM5LDQuMTQ1IC05LjIzOSw5LjI0NiBsIDAsMjQuMDU5IHogbSAxNy41NTksMTQuODA4IDEyMC4xNjQsMCAtMTIuNzE1LDI5LjIyMyBjIC0wLjU4MiwxLjM1MiAtMS45MTQsMi4yMjcgLTMuMzksMi4yMjcgbCAtODcuOTU0LDAgYyAtMS40NzYsMCAtMi44MDgsLTAuODc1IC0zLjM5LC0yLjIyNyBsIC0xMi43MTUsLTI5LjIyMyB6IG0gLTguMzIsLTUxLjgyIDIyLjE3OSwwIDAsLTIwLjM1MiBjIDAsLTMuMDU4IC0yLjQ3NiwtNS41MzkgLTUuNTM1LC01LjUzOSBsIC0xMS4wOSwwIGMgLTMuMDU4LDAgLTUuNTU0LDIuNDgxIC01LjU1NCw1LjUzOSBsIDAsMjAuMzUyIHogbSAxMTQuNjA1LDAgMjIuMTgsMCAwLC0yMC4zNTIgYyAwLC0zLjA1OCAtMi40NzMsLTUuNTM5IC01LjUzNSwtNS41MzkgbCAtMTEuMDksMCBjIC0zLjA1OSwwIC01LjU1NSwyLjQ4MSAtNS41NTUsNS41MzkgbCAwLDIwLjM1MiB6IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjEzNTkiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjg1Ljg5OCwyMDAuMzQyIGMgMCwyLjA0MyAwLjY2OCw0LjA0MyAxLjg5NSw1LjY4NyBsIDEuODk1LDIuNTIgYyAxLjMwOCwxLjc2OSAyLjQzMywzLjY2NCAzLjMwOCw1LjcwNyBsIDEyLjQ2MSwyOC42NiBjIDEuMjUsMi44NzUgNC4xMDIsNC43NDYgNy4yMjMsNC43NDYgbCA3OC43OTcsMCBjIDMuMTQsMCA1Ljk3MiwtMS44NzEgNy4yMTgsLTQuNzQ2IGwgMTIuNDY1LC0yOC42NiBjIDAuODk1LC0yLjA0MyAxLjk5NiwtMy45MzggMy4zMjgsLTUuNzA3IGwgMC45MzgsLTEuMjUgLTMzLjEwNiwwIGMgLTQuNjQsMCAtOC44MiwtMi43NSAtMTAuNjc1LC03IGwgLTEyLjMxNywtMjguMzQ0IC02NS41NDMsMCBjIC00LjM0NywwIC03Ljg4NywzLjUxOSAtNy44ODcsNy44OTEgbCAwLDIwLjQ5NiB6IG0gMTQuOTYxLDEyLjYyMSAxMDIuNDM0LDAgLTEwLjg0LDI0LjkxIGMgLTAuNSwxLjE0OCAtMS42MjEsMS44OTggLTIuODkxLDEuODk4IGwgLTc0Ljk2OCwwIGMgLTEuMjUsMCAtMi4zOTUsLTAuNzUgLTIuODk1LC0xLjg5OCBsIC0xMC44NCwtMjQuOTEgeiBtIC03LjA3NCwtNDQuMTc2IDE4Ljg5NSwwIDAsLTE3LjM0OCBjIDAsLTIuNjA1IC0yLjEwMiwtNC43MyAtNC43MjcsLTQuNzMgbCAtOS40NDUsMCBjIC0yLjYyMSwwIC00LjcyMywyLjEyNSAtNC43MjMsNC43MyBsIDAsMTcuMzQ4IHoiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgyMTM2MSIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAyMjguMTI1LDI0NS42NDIgYyAwLDEuNzI3IDAuNTU5LDMuNDE1IDEuNjAyLDQuODA5IGwgMS42MDEsMi4xMjUgYyAxLjEyNSwxLjUgMi4wNTksMy4xMjUgMi44MDksNC44MzIgbCAxMC41NTEsMjQuMjY2IGMgMS4wNTgsMi40MzcgMy40NTMsNCA2LjA5Myw0IGwgNjYuNjY4LDAgYyAyLjY2NCwwIDUuMDU1LC0xLjU2MyA2LjExNywtNCBsIDEwLjU1MSwtMjQuMjY2IGMgMC43NDYsLTEuNzA3IDEuNjg0LC0zLjMzMiAyLjgwOSwtNC44MzIgbCAxLjYwMSwtMi4xMjUgMC4yNSwtMC4zNzUgLTI2LjA5MywwIGMgLTQuMDk4LDAgLTcuODAxLC0yLjQzNCAtOS40MjYsLTYuMTg0IGwgLTkuNjc2LC0yMi4yODUgLTU4LjgwMSwwIGMgLTMuNjYsMCAtNi42NTYsMi45OTYgLTYuNjU2LDYuNjg0IGwgMCwxNy4zNTEgeiBtIDEyLjY3MiwxMC42ODQgODYuNjYsMCAtOS4xNzYsMjEuMDc4IGMgLTAuNDE0LDAuOTgxIC0xLjM3MSwxLjYwNiAtMi40MzMsMS42MDYgbCAtNjMuNDQyLDAgYyAtMS4wNjIsMCAtMi4wMTksLTAuNjI1IC0yLjQ1NywtMS42MDYgbCAtOS4xNTIsLTIxLjA3OCB6IG0gLTYuMDE2LC0zNy4zODcgMTYsMCAwLC0xNC42ODMgYyAwLC0yLjIwNyAtMS43ODksLTQgLTMuOTkyLC00IGwgLTcuOTkyLDAgYyAtMi4yMDMsMCAtNC4wMTYsMS43OTMgLTQuMDE2LDQgbCAwLDE0LjY4MyB6IiAvPjwvZz48L2c+PC9zdmc+",
           width: 34,
@@ -2520,7 +2824,7 @@ const RENDERING_CONFIG_DEFAULT = {
       },
       {
         from: 15,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzcyODMiCiAgIHZlcnNpb249IjEuMSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgd2lkdGg9Ijg0Ny4xNTg1NyIKICAgaGVpZ2h0PSI3NDMuNjIyNjgiCiAgIHZpZXdCb3g9IjAgMCA4NDcuMTU4NTcgNzQzLjYyMjY4Ij48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE3Mjg5Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNzI4NyI+PGNsaXBQYXRoCiAgICAgICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIGlkPSJjbGlwRW1mUGF0aDEiPjxwYXRoCiAgICAgICAgIGQ9Im0gMCw0OC4yMjQ2IDU0LjgyNDYsMCBMIDU0LjgyNDYsMCAwLDAgMCw0OC4yMjQ2IFoiCiAgICAgICAgIGlkPSJwYXRoMzM0NCIgLz48L2NsaXBQYXRoPjxwYXR0ZXJuCiAgICAgICBpZD0iRU1GaGJhc2VwYXR0ZXJuIgogICAgICAgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIHdpZHRoPSI2IgogICAgICAgaGVpZ2h0PSI2IgogICAgICAgeD0iMCIKICAgICAgIHk9IjAiIC8+PC9kZWZzPjxnCiAgICAgaWQ9Imc3MjkxIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDAsNzQzLjYyMjY3KSI+PGcKICAgICAgIGlkPSJnNzI5MyI+PHBhdGgKICAgICAgICAgZD0ibSAzMzguODU5LDU5NC41IGMgNy41MTIsMCAxNS4wMjgsLTIuODY3IDIwLjc1OCwtOC41OTggMS44NzksLTEuODc5IDMuNDQ1LC0zLjk1MyA0LjcwNywtNi4xNTIgbCAxNS4yNDYsLTI2LjE1NyAwLjA3MSwwIDI5My4xMDEsLTUwOC4wMzkgYyAwLjA1NSwtMC4wOTcgMC4wOTgsLTAuMTk1IDAuMTUzLC0wLjI5MyAxLjQ4OCwtMi4zOTQgMi42NTYsLTUuMDQzIDMuNDI1LC03LjkxIDQuMTk2LC0xNS42NTYgLTUuMDk3LC0zMS43NTQgLTIwLjc1OCwtMzUuOTQ5IC0yLjU4NSwtMC42OTUgLTUuMTgzLC0xLjAxMiAtNy43MzgsLTEgbCAtNjE4LjA2NiwwIGMgLTE2LjIxNSwwIC0yOS4zNTYsMTMuMTQxIC0yOS4zNTYsMjkuMzU2IDAsNS4zMDQgMS40MTQsMTAuMjgxIDMuODc5LDE0LjU3OCAwLjAyLDAuMDMxIDAuMDM1LDAuMDYyIDAuMDUxLDAuMDk3IGwgMzA0LjM2Nyw1MjguNDEgYyAzLjg2Myw2LjY2NSA1LjY1Myw5LjMwNSA5LjQwNiwxMy4wNTkgNS43MzEsNS43MzEgMTMuMjQzLDguNTk4IDIwLjc1NCw4LjU5OCB6IgogICAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDcyOTUiIC8+PHBhdGgKICAgICAgICAgZD0ibSAzMzguODU5LDU4Ny4xNDQgYyA3LjEyNSwwLjA1MSAxNC45NSwtMy41OSAxOC43ODIsLTEwLjQwNiBMIDY2Ni45MzQsNDAuODQ3IGMgMS43ODUsLTMuNjQ4IDIuNTM1LC02LjgyIDIuNTU4LC0xMC40NDkgMCwtNi40OTYgLTIuODc1LC0xMi42NiAtNy44NDcsLTE2Ljg0IC00LjM4MywtMy4zOTQgLTguNTM2LC01LjE2IC0xNC4xMjIsLTUuMTYgbCAtNjE3LjkwNiwwIEMgMjUuODQ4LDguMzYzIDIyLjA3LDkuMjY5IDE4LjY0MSwxMS41MzEgMTIuMTg4LDE1LjQyOSA4LjIzOCwyMi40MTQgOC4yMywyOS45NTcgYyAwLjE4NCwzLjg5NCAxLjE0NSw4IDIuODc5LDEwLjg5IGwgMzA5LjExNCw1MzUuOTgxIGMgMC4wMjcsMC4wNDcgMC4wNTgsMC4wOTQgMC4wODksMC4xNCAwLjAzMiwwLjA0NyAwLjA2MywwLjA5NCAwLjA5NCwwLjE0NSAxLjA5OCwxLjc1NCAyLjQ3MywzLjMwNSA0LjAzOSw0LjYzMyAzLjU5LDMuMTA5IDguMDg2LDQuOTc2IDEyLjgyNSw1LjMxNiAwLjUzMSwwLjA0NyAxLjA2MiwwLjA3OCAxLjU4OSwwLjA4MiB6IE0gNjQ3LjUyMyw4LjM5OCBsIDEuNTI0LDAgLTEuNTU1LDAgMC4wMzEsMCB6IE0gMzM5LjE4LDQ4MC45MzMgMTAzLjQ3Nyw3Mi4zOTggbCA0NzEuNzM4LDAgLTIzNi4wMzUsNDA4LjUzNSB6IgogICAgICAgICBzdHlsZT0iZmlsbDojYzExMjFjO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDcyOTciIC8+PHBhdGgKICAgICAgICAgZD0ibSAzMzguODU5LDU5NC44OTggYyA3LjYxOCwwIDE1LjIzMSwtMi45MDYgMjEuMDM5LC04LjcxNSAxLjkwNywtMS45MDIgMy40OTMsLTQuMDA4IDQuNzc0LC02LjIzNCBsIDE1LjEyOSwtMjUuOTU3IDAuMDcsMCAyOTMuMjE1LC01MDguMjM4IGMgMC4wNjYsLTAuMTE4IDAuMTEzLC0wLjIxOSAwLjE2LC0wLjMwMSAxLjUwNCwtMi40MjIgMi42ODQsLTUuMTAyIDMuNDYxLC03Ljk5NiBDIDY4MC45NTcsMjEuNTg2IDY3MS41MzUsNS4yNjkgNjU1LjY2OCwxLjAxNSA2NTMuMDQ3LDAuMzEyIDY1MC40MSwtMC4wMDggNjQ3LjgyNCwwIEwgMjkuNzU4LDAgQyAxMy4zMjgsMCAwLDEzLjMyOCAwLDI5Ljc1OCBjIDAsNS4zNzUgMS40MzgsMTAuNDE3IDMuOTM0LDE0Ljc3MyAwLjAxMSwwLjAxOSAwLjAyNywwLjA1MSAwLjA1LDAuMDk4IGwgMzA0LjM2NCw1MjguNDE0IGMgMy44NzEsNi42NjggNS42OTUsOS4zNjMgOS40NjgsMTMuMTQgNS44MDksNS44MDkgMTMuNDI2LDguNzE1IDIxLjAzOSw4LjcxNSBsIDAuMDA0LDAgeiBtIDAsLTAuMzk4IGMgLTcuNTExLDAgLTE1LjAyMywtMi44NjcgLTIwLjc1NCwtOC41OTggLTMuNzUzLC0zLjc1NCAtNS41NDMsLTYuMzk0IC05LjQwNiwtMTMuMDU5IEwgNC4zMzYsNDQuNDMzIEMgNC4zMTYsNDQuMzk4IDQuMzAxLDQ0LjM2NyA0LjI4MSw0NC4zMzYgMS44MTYsNDAuMDM5IDAuNDAyLDM1LjA2MiAwLjQwMiwyOS43NTggMC40MDIsMTMuNTQzIDEzLjU0MywwLjQwMiAyOS43NTgsMC40MDIgbCA2MTguMDY2LDAgYyAyLjU1NSwtMC4wMTIgNS4xNTMsMC4zMDUgNy43MzgsMSAxNS42NjEsNC4xOTUgMjQuOTU0LDIwLjI5MyAyMC43NTgsMzUuOTQ5IC0wLjc2NSwyLjg2NyAtMS45MzcsNS41MTYgLTMuNDI1LDcuOTEgLTAuMDU1LDAuMDk4IC0wLjA5OCwwLjE5NiAtMC4xNTMsMC4yOTMgbCAtMjkzLjEwMSw1MDguMDM5IC0wLjA3MSwwIC0xNS4yNDYsMjYuMTU3IGMgLTEuMjYyLDIuMTk5IC0yLjgyOCw0LjI3MyAtNC43MDcsNi4xNTIgLTUuNzMsNS43MzEgLTEzLjI0Miw4LjU5OCAtMjAuNzU4LDguNTk4IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGlkPSJwYXRoNzI5OSIgLz48L2c+PC9nPjxnCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoNTQuNjM3NzcxLDAsMCw1NC42Mzc3NzEsMTM1MDguNjYxLC04NTgwLjUzNjQpIgogICAgIGlkPSJnMzM2OSI+PHBhdGgKICAgICAgIGlkPSJwYXRoMzM0NyIKICAgICAgIGQ9IiIKICAgICAgIGNsaXAtcGF0aD0idXJsKCNjbGlwRW1mUGF0aDEpIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNDcuMjA4MDcsMTU3LjA0NDA0KSIgLz48cGF0aAogICAgICAgaWQ9InBhdGgzMzU1IgogICAgICAgZD0ibSAtMjM5LjM5NzYzLDE2OC4zMDQ2MiAwLjc2MiwtMC45MTAxNyBjIDAuMDQyMywtMC4wMjEyIDAuMDg0NywtMC4wNjM1IDAuMTI3LC0wLjA2MzUgbCAwLjE0ODE3LC0wLjA2MzUgYyAwLjA4NDcsLTAuMDIxMiAwLjE2OTMzLC0wLjA4NDcgMC4yMzI4MywtMC4xNDgxNiBsIDAuNTI5MTQsLTAuNjEzODEgYyAwLjIzMjgzLC0wLjI5NjMzIDAuNjU2MTcsLTAuMzE3NSAwLjkzMTMzLC0wLjA4NDcgMC4wNDIzLDAuMDIxMiAwLjA4NDcsMC4wNjM1IDAuMTA1ODQsMC4xMDU4NCBsIDEuMzc1ODMsMS43Nzc5NyBjIDAuMDQyMywwLjA2MzUgMC4wNDIzLDAuMTQ4MTcgLTAuMDIxMiwwLjE5MDUgLTAuMDIxMiwwLjAyMTIgLTAuMDYzNSwwLjA0MjMgLTAuMDg0NywwLjA0MjMgbCAtNC4wMDA0NywwIGMgLTAuMDg0NywwIC0wLjEyNywtMC4wNjM1IC0wLjEyNywtMC4xNDgxNyAwLC0wLjAyMTIgMCwtMC4wNjM1IDAuMDIxMiwtMC4wODQ3IHogbSAxLjAxNiwtNS4xMjIzIGMgMCwwLjI3NTE2IC0wLjIzMjgzLDAuNTA4IC0wLjUwOCwwLjUwOCAtMC4yNzUxNiwwIC0wLjUwOCwtMC4yMzI4NCAtMC41MDgsLTAuNTA4IDAsLTAuMjc1MTcgMC4yMzI4NCwtMC40ODY4MSAwLjUwOCwtMC40ODY4MSAwLjI3NTE3LDAgMC41MDgsMC4yMTE2NCAwLjUwOCwwLjQ4NjgxIHogbSAtMi43NTE2NiwyLjEzNzgzIDAuNzQwODMsLTEuMzk3IC0wLjUyOTE3LDAgLTAuMzE3NSwwLjU5MjY3IDAuMzE3NSwwLjI3NTE2IC0wLjEwNTgzLDAuMTkwNSAtMC4zMTc1LC0wLjI1NCAtMC4xNDgxNCwwLjI3NTE3IGMgLTAuMjMyODMsLTAuMTI3IC0wLjMxNzUsLTAuNDIzMzMgLTAuMTkwNSwtMC42MzUgbCAwLjM4MDk3LC0wLjc0MDgzIGMgMC4wNjM1LC0wLjEwNTg0IDAuMTY5MzQsLTAuMTY5MzQgMC4yOTYzNCwtMC4xNjkzNCBsIDEuMTg1MzMsMCBjIDAuMjk2MzMsMCAwLjUyOTE3LDAuMjMyODQgMC41MjkxNywwLjUyOTE3IDAsMC4wMjEyIDAsMC4wMjEyIDAsMC4wNDIzIGwgLTAuMTI3LDEuOTg5NjcgMS4yNDg4MywxLjA1ODMgYyAtMC4wNDIzLDAuMDQyMyAtMC4xMDU4MywwLjA4NDcgLTAuMTkwNSwwLjEyNyBsIC0xLjA3OTUsLTAuOTEwMTQgLTAuMDIxMiwwLjIzMjg0IGMgLTAuMjU0LC0wLjAyMTIgLTAuNDQ0NSwtMC4yMzI4NCAtMC40MjMzMywtMC40ODY4NCBsIDAsLTAuMTA1ODMgLTAuMzE3NSwtMC4yNTQgMC4xMDU4MywtMC4xOTA1IDAuMjMyODQsMC4xNjkzMyAwLjA0MjMsLTAuODI1NSAtMC40ODY4MywwLjkzMTM0IC0wLjgyNTUsLTAuNDQ0NSB6IG0gMS4zNzU4MywzLjIxNzMgYyAtMC4yOTYzMywwIC0wLjU1MDMzLC0wLjIzMjgzIC0wLjU1MDMzLC0wLjUyOTE2IGwgLTAuMDQyMywtMS4xMjE4NCAtMC41NTAzMywtMC44NDY2MyAtMS4zMzM0NywyLjQ5NzYzIGMgLTAuMjU0LC0wLjE0ODE2IC0wLjM1OTg0LC0wLjQ2NTY2IC0wLjIxMTY3LC0wLjc0MDgzIGwgMS4yNDg4MSwtMi4zNDk0NyAwLjgyNTUsMC40MjMzMyAwLjUyOTE2LDAuODI1NDcgYyAwLDAuMDIxMiAwLjAyMTIsMC4wNDIzIDAuMDIxMiwwLjA2MzUiCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIiAvPjwvZz48L3N2Zz4=",
           width: 34,
@@ -2570,7 +2874,7 @@ const RENDERING_CONFIG_DEFAULT = {
       },
       {
         from: 15,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDg0Ny4xNTg1NyA3NDMuNjIyNjgiCiAgIGhlaWdodD0iNzQzLjYyMjY4IgogICB3aWR0aD0iODQ3LjE1ODU3IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1NDg4Ij48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NDk0Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNTQ5MiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDAsNzQzLjYyMjY3KSIKICAgICBpZD0iZzU0OTYiPjxnCiAgICAgICBpZD0iZzU0OTgiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoNTUwMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguODY3LDU5NC41IGMgLTcuNTEyLDAgLTE1LjAyNywtMi44NjcgLTIwLjc1OCwtOC41OTggLTEuODc5LC0xLjg3OSAtMy40NDUsLTMuOTUzIC00LjcwNywtNi4xNTIgbCAtMTUuMjQ2LC0yNi4xNTcgLTAuMDcsMCBMIDQuOTg0LDQ1LjU1NCBDIDQuOTMsNDUuNDU3IDQuODg3LDQ1LjM1OSA0LjgzMiw0NS4yNjEgMy4zNDQsNDIuODY3IDIuMTc2LDQwLjIxOCAxLjQwNiwzNy4zNTEgLTIuNzg5LDIxLjY5NSA2LjUwNCw1LjU5NyAyMi4xNjQsMS40MDIgYyAyLjU4NiwtMC42OTUgNS4xODQsLTEuMDEyIDcuNzM4LC0xIGwgNjE4LjA2NywwIGMgMTYuMjE1LDAgMjkuMzU1LDEzLjE0MSAyOS4zNTUsMjkuMzU2IDAsNS4zMDQgLTEuNDE0LDEwLjI4MSAtMy44NzksMTQuNTc4IC0wLjAxOSwwLjAzMSAtMC4wMzUsMC4wNjIgLTAuMDUsMC4wOTcgbCAtMzA0LjM2OCw1MjguNDEgYyAtMy44NjMsNi42NjUgLTUuNjUyLDkuMzA1IC05LjQwNiwxMy4wNTkgLTUuNzMsNS43MzEgLTEzLjI0Miw4LjU5OCAtMjAuNzU0LDguNTk4IHoiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGg1NTAyIgogICAgICAgICBzdHlsZT0iZmlsbDojYzExMjFjO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDMzOC44NjcsNTg3LjE0NCBjIC03LjEyNSwwLjA1MSAtMTQuOTQ5LC0zLjU5IC0xOC43ODEsLTEwLjQwNiBMIDEwLjc5Myw0MC44NDcgQyA5LjAwOCwzNy4xOTkgOC4yNTgsMzQuMDI3IDguMjM0LDMwLjM5OCBjIDAsLTYuNDk2IDIuODc1LC0xMi42NiA3Ljg0OCwtMTYuODQgNC4zODMsLTMuMzk0IDguNTM1LC01LjE2IDE0LjEyMSwtNS4xNiBsIDYxNy45MDYsMCBjIDMuNzcsLTAuMDM1IDcuNTQ3LDAuODcxIDEwLjk3NywzLjEzMyA2LjQ1MywzLjg5OCAxMC40MDIsMTAuODgzIDEwLjQxLDE4LjQyNiAtMC4xODQsMy44OTQgLTEuMTQ0LDggLTIuODc5LDEwLjg5IEwgMzU3LjUwNCw1NzYuODI4IGMgLTAuMDI3LDAuMDQ3IC0wLjA1OSwwLjA5NCAtMC4wOSwwLjE0IC0wLjAzMSwwLjA0NyAtMC4wNjIsMC4wOTQgLTAuMDk0LDAuMTQ1IC0xLjA5NywxLjc1NCAtMi40NzIsMy4zMDUgLTQuMDM5LDQuNjMzIC0zLjU5LDMuMTA5IC04LjA4Niw0Ljk3NiAtMTIuODI0LDUuMzE2IC0wLjUzMSwwLjA0NyAtMS4wNjIsMC4wNzggLTEuNTksMC4wODIgeiBNIDMwLjIwMyw4LjM5OCBsIC0xLjUyMywwIDEuNTU0LDAgLTAuMDMxLDAgeiBNIDMzOC41NDcsNDgwLjkzMyA1NzQuMjUsNzIuMzk4IGwgLTQ3MS43MzgsMCAyMzYuMDM1LDQwOC41MzUgeiIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDU1MDQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM4Ljg2Nyw1OTQuODk4IGMgLTcuNjE3LDAgLTE1LjIzLC0yLjkwNiAtMjEuMDM5LC04LjcxNSAtMS45MDYsLTEuOTAyIC0zLjQ5MiwtNC4wMDggLTQuNzczLC02LjIzNCBsIC0xNS4xMjksLTI1Ljk1NyAtMC4wNzEsMCBMIDQuNjQxLDQ1Ljc1NCBDIDQuNTc0LDQ1LjYzNiA0LjUyNyw0NS41MzUgNC40OCw0NS40NTMgMi45NzcsNDMuMDMxIDEuNzk3LDQwLjM1MSAxLjAyLDM3LjQ1NyAtMy4yMywyMS41ODYgNi4xOTEsNS4yNjkgMjIuMDU5LDEuMDE1IDI0LjY4LDAuMzEyIDI3LjMxNiwtMC4wMDggMjkuOTAyLDAgbCA2MTguMDY3LDAgYyAxNi40MjksMCAyOS43NTgsMTMuMzI4IDI5Ljc1OCwyOS43NTggMCw1LjM3NSAtMS40MzgsMTAuNDE3IC0zLjkzNCwxNC43NzMgLTAuMDEyLDAuMDE5IC0wLjAyNywwLjA1MSAtMC4wNTEsMC4wOTggTCAzNjkuMzc5LDU3My4wNDMgYyAtMy44NzEsNi42NjggLTUuNjk1LDkuMzYzIC05LjQ2OSwxMy4xNCAtNS44MDgsNS44MDkgLTEzLjQyNiw4LjcxNSAtMjEuMDM5LDguNzE1IGwgLTAuMDA0LDAgeiBtIDAsLTAuMzk4IGMgNy41MTIsMCAxNS4wMjQsLTIuODY3IDIwLjc1NCwtOC41OTggMy43NTQsLTMuNzU0IDUuNTQzLC02LjM5NCA5LjQwNiwtMTMuMDU5IEwgNjczLjM5MSw0NC40MzMgYyAwLjAxOSwtMC4wMzUgMC4wMzUsLTAuMDY2IDAuMDU0LC0wLjA5NyAyLjQ2NSwtNC4yOTcgMy44NzksLTkuMjc0IDMuODc5LC0xNC41NzggMCwtMTYuMjE1IC0xMy4xNCwtMjkuMzU2IC0yOS4zNTUsLTI5LjM1NiBsIC02MTguMDY3LDAgQyAyNy4zNDgsMC4zOSAyNC43NSwwLjcwNyAyMi4xNjQsMS40MDIgNi41MDQsNS41OTcgLTIuNzg5LDIxLjY5NSAxLjQwNiwzNy4zNTEgYyAwLjc2NiwyLjg2NyAxLjkzOCw1LjUxNiAzLjQyNiw3LjkxIDAuMDU1LDAuMDk4IDAuMDk4LDAuMTk2IDAuMTUyLDAuMjkzIGwgMjkzLjEwMiw1MDguMDM5IDAuMDcsMCAxNS4yNDYsMjYuMTU3IGMgMS4yNjIsMi4xOTkgMi44MjgsNC4yNzMgNC43MDcsNi4xNTIgNS43MzEsNS43MzEgMTMuMjQzLDguNTk4IDIwLjc1OCw4LjU5OCB6IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoNTUwNiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguODY3LDQwOC40MTQgYyAtMTcuNjc2LDAgLTMyLjAwNCwtMTQuMzI4IC0zMi4wMDQsLTMyIGwgMTYsLTE4OC4wMTYgYyAwLC04LjgzNiA2LjM3MSwtMTYuMDE1IDE2LjAwNCwtMTYgOS42MjksMC4wMTYgMTUuOTk2LDcuODIgMTUuOTk2LDE2LjAxMiBsIDE2LDE4OC4wMDQgYyAwLDE3LjY3MiAtMTQuMzI0LDMyIC0zMS45OTYsMzIgeiIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDU1MDgiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzcwLjg2MywxMjQuMzk4IGMgMCwtMTcuNjgzIC0xNC4zMTYsLTMxLjk5NiAtMzEuOTk2LC0zMS45OTYgLTE3LjY3NiwwIC0zMi4wMDQsMTQuMzA5IC0zMi4wMDQsMzEuOTk2IDAsMTcuNjcyIDE0LjMyOCwzMi4wMDQgMzIuMDA0LDMyLjAwNCAxNy42OCwwIDMxLjk5NiwtMTQuMzMyIDMxLjk5NiwtMzIuMDA0IiAvPjwvZz48L2c+PC9zdmc+",
           width: 34,
@@ -2588,7 +2892,7 @@ const RENDERING_CONFIG_DEFAULT = {
     highway: [
       {
         from: 16,
-        to: 19,
+        to: 21,
         line: {
           color: "#f2d078",
           width: 11,
@@ -2664,7 +2968,7 @@ const RENDERING_CONFIG_DEFAULT = {
     interstate_major: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 10,
           color: "#f9e5a6",
@@ -2735,7 +3039,7 @@ const RENDERING_CONFIG_DEFAULT = {
     interstate_minor: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 10,
           color: "#ffffff",
@@ -2798,7 +3102,7 @@ const RENDERING_CONFIG_DEFAULT = {
     minor_road: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 7,
           color: "#ffffff",
@@ -2818,7 +3122,9 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 16,
         line: {
           width: 3,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2840,7 +3146,7 @@ const RENDERING_CONFIG_DEFAULT = {
     minor_road_oneway: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 7,
           color: "#ffffff",
@@ -2862,7 +3168,9 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 16,
         line: {
           width: 3,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2884,7 +3192,7 @@ const RENDERING_CONFIG_DEFAULT = {
     minor_road_oneway_reverse: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 7,
           color: "#ffffff",
@@ -2906,7 +3214,9 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 16,
         line: {
           width: 3,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2928,7 +3238,7 @@ const RENDERING_CONFIG_DEFAULT = {
     minor_road_restricted: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 2,
           color: "#B0B9C4"
@@ -2968,7 +3278,7 @@ const RENDERING_CONFIG_DEFAULT = {
     residential_road: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#ffffff"
@@ -3000,7 +3310,7 @@ const RENDERING_CONFIG_DEFAULT = {
     residential_road_oneway: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#ffffff",
@@ -3034,7 +3344,7 @@ const RENDERING_CONFIG_DEFAULT = {
     residential_road_oneway_rev: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#ffffff",
@@ -3067,8 +3377,8 @@ const RENDERING_CONFIG_DEFAULT = {
     ],
     foot_path: [
       {
-        from: 16,
-        to: 19,
+        from: 18,
+        to: 21,
         line: {
           width: 2,
           color: "rgba(1, 1, 1, 0)",
@@ -3082,12 +3392,22 @@ const RENDERING_CONFIG_DEFAULT = {
           outlineColor: "#ffffff",
           outlineWidth: 2
         }
+      },
+      {
+        from: 16,
+        to: 17,
+        line: {
+          width: 1,
+          color: "rgba(1, 1, 1, 0)",
+          dashColor: "#B0B9C4",
+          dashLength: 6
+        }
       }
     ],
     rail: [
       {
         from: 16,
-        to: 19,
+        to: 21,
         line: {
           width: 2,
           color: "#8B8C8C",
@@ -3108,7 +3428,7 @@ const RENDERING_CONFIG_DEFAULT = {
     ferry: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#74a8e1"
@@ -3148,7 +3468,7 @@ const RENDERING_CONFIG_DEFAULT = {
     interstateNumbers: [
       {
         from: 11,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkJ1bmRlc3N0cmFzc2UiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAgMTIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0Y5REM4MTt9PC9zdHlsZT48cGF0aCBpZD0icmVjdDQiIGNsYXNzPSJzdDAiIGQ9Ik0yMi4zLDBoMTU1LjVDMTkwLDAsMjAwLDEwLDIwMCwyMi4zdjc1LjVjMCwxMi4zLTEwLDIyLjMtMjIuMywyMi4zSDIyLjNDMTAsMTIwLDAsMTEwLDAsOTcuOFYyMi4zIEMwLDEwLDEwLDAsMjIuMywweiIvPjxwYXRoIGlkPSJyZWN0NiIgZD0iTTIyLjMsNC4zaDE1NS41YzkuOSwwLDE4LDguMSwxOCwxOHY3NS41YzAsOS45LTguMSwxOC0xOCwxOEgyMi4zYy05LjksMC0xOC04LjEtMTgtMThWMjIuMyBDNC4zLDEyLjMsMTIuMyw0LjMsMjIuMyw0LjN6Ii8+PHBhdGggaWQ9InJlY3Q4IiBjbGFzcz0ic3QwIiBkPSJNMjIuMywxMS4zaDE1NS41YzYuMSwwLDExLDQuOSwxMSwxMXY3NS41YzAsNi4xLTQuOSwxMS0xMSwxMUgyMi4zYy02LjEsMC0xMS00LjktMTEtMTFWMjIuMyBDMTEuMywxNi4yLDE2LjIsMTEuMywyMi4zLDExLjN6Ii8+PC9zdmc+",
           width: 27,
@@ -3170,115 +3490,355 @@ const RENDERING_CONFIG_TRAFFIC = {
   "background": [
     {
       "from": 1,
-      "to": 19,
+      "to": 21,
       "color": "rgba(0, 0, 0, 0)"
     }
   ],
   "layers": {
-    "trafficFlowFast": "trafficFlowFast",
-    "trafficFlowMedium": "trafficFlowMedium",
-    "trafficFlowSlow": "trafficFlowSlow"
+    trafficFlowFastHighway: "trafficFlowFastHighway",
+    trafficFlowFastInterstate: "trafficFlowFastInterstate",
+    trafficFlowFastMinor: "trafficFlowFastMinor",
+    trafficFlowMediumHighway: "trafficFlowMediumHighway",
+    trafficFlowMediumInterstate: "trafficFlowMediumInterstate",
+    trafficFlowMediumMinor: "trafficFlowMediumMinor",
+    trafficFlowSlowHighway: "trafficFlowSlowHighway",
+    trafficFlowSlowInterstate: "trafficFlowSlowInterstate",
+    trafficFlowSlowMinor: "trafficFlowSlowMinor"
   },
   "renderers": {
-    "trafficFlowFast": [
+    trafficFlowFastHighway: [
+      {
+        from: 1,
+        to: 5,
+        line: {
+          color: "#6EDB9C",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 6,
+        to: 9,
+        line: {
+          color: "#6EDB9C",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#6EDB9C",
+          width: 2,
+          outlineColor: "#4B9869",
+          outlineWidth: 1
+        }
+      },
+      {
+        from: 13,
+        to: 15,
+        line: {
+          color: "#6EDB9C",
+          width: 3,
+          outlineColor: "#4B9869",
+          outlineWidth: 1
+        }
+      },
+      {
+        from: 16,
+        to: 21,
+        line: {
+          color: "#6EDB9C",
+          width: 4,
+          outlineColor: "#4B9869",
+          outlineWidth: 1
+        }
+      }
+    ],
+    trafficFlowFastInterstate: [
+      {
+        from: 9,
+        to: 12,
+        line: {
+          color: "#6EDB9C",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#6EDB9C",
+          width: 2,
+          delta: 2
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#6EDB9C",
+          width: 2,
+          delta: 2,
+          outlineColor: "#4B9869",
+          outlineWidth: 1
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#6EDB9C",
+          width: 3,
+          delta: 3,
+          outlineColor: "#4B9869",
+          outlineWidth: 1
+        }
+      }
+    ],
+    trafficFlowFastMinor: [
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#6EDB9C",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#6EDB9C",
+          width: 2,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowMediumHighway: [
+      {
+        from: 1,
+        to: 5,
+        line: {
+          color: "#ffce42",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 6,
+        to: 9,
+        line: {
+          color: "#ffce42",
+          width: 1,
+          delta: 1
+        }
+      },
       {
-        "from": 1,
-        "to": 8,
-        "line": {
-          "color": "rgba(80, 220, 50, 0.5)",
-          "width": 1
+        from: 10,
+        to: 12,
+        line: {
+          color: "#ffce42",
+          width: 2,
+          outlineColor: "#f4bf22",
+          outlineWidth: 1
         }
       },
       {
-        "from": 9,
-        "to": 12,
-        "line": {
-          "color": "rgba(80, 220, 50, 0.5)",
-          "width": 2
+        from: 13,
+        to: 15,
+        line: {
+          color: "#ffce42",
+          width: 3,
+          outlineColor: "#f4bf22",
+          outlineWidth: 1
         }
       },
       {
-        "from": 13,
-        "to": 15,
-        "line": {
-          "color": "rgba(80, 220, 50, 0.5)",
-          "width": 4
+        from: 16,
+        to: 21,
+        line: {
+          color: "#ffce42",
+          width: 4,
+          outlineColor: "#f4bf22",
+          outlineWidth: 1
+        }
+      }
+    ],
+    trafficFlowMediumInterstate: [
+      {
+        from: 9,
+        to: 12,
+        line: {
+          color: "#ffce42",
+          width: 1,
+          delta: 1
         }
       },
       {
-        "from": 16,
-        "to": 19,
-        "line": {
-          "color": "rgba(80, 220, 50, 0.5)",
-          "width": 6
+        from: 13,
+        to: 14,
+        line: {
+          color: "#ffce42",
+          width: 2,
+          delta: 2
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#ffce42",
+          width: 2,
+          delta: 2,
+          outlineColor: "#f4bf22",
+          outlineWidth: 1
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#ffce42",
+          width: 3,
+          delta: 3,
+          outlineColor: "#f4bf22",
+          outlineWidth: 1
         }
       }
     ],
-    "trafficFlowMedium": [
+    trafficFlowMediumMinor: [
       {
-        "from": 1,
-        "to": 8,
-        "line": {
-          "color": "rgba(255, 165, 0, 0.5)",
-          "width": 1
+        from: 15,
+        to: 16,
+        line: {
+          color: "#ffce42",
+          width: 1,
+          delta: 1
         }
       },
       {
-        "from": 9,
-        "to": 12,
-        "line": {
-          "color": "rgba(255, 165, 0, 0.5)",
-          "width": 2
+        from: 17,
+        to: 21,
+        line: {
+          color: "#ffce42",
+          width: 2,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowSlowHighway: [
+      {
+        from: 1,
+        to: 5,
+        line: {
+          color: "#f14d40",
+          width: 1,
+          delta: 1
         }
       },
       {
-        "from": 13,
-        "to": 15,
-        "line": {
-          "color": "rgba(255, 165, 0, 0.5)",
-          "width": 4
+        from: 6,
+        to: 9,
+        line: {
+          color: "#f14d40",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#f14d40",
+          width: 2,
+          outlineColor: "#96403a",
+          outlineWidth: 1
+        }
+      },
+      {
+        from: 13,
+        to: 15,
+        line: {
+          color: "#f14d40",
+          width: 3,
+          outlineColor: "#96403a",
+          outlineWidth: 1
         }
       },
       {
-        "from": 16,
-        "to": 19,
-        "line": {
-          "color": "rgba(255, 165, 0, 0.5)",
-          "width": 6
+        from: 16,
+        to: 21,
+        line: {
+          color: "#f14d40",
+          width: 4,
+          outlineColor: "#96403a",
+          outlineWidth: 1
         }
       }
     ],
-    "trafficFlowSlow": [
+    trafficFlowSlowInterstate: [
+      {
+        from: 9,
+        to: 12,
+        line: {
+          color: "#f14d40",
+          width: 1,
+          delta: 1
+        }
+      },
       {
-        "from": 1,
-        "to": 8,
-        "line": {
-          "color": "rgba(200, 0, 0, 0.5)",
-          "width": 1
+        from: 13,
+        to: 14,
+        line: {
+          color: "#f14d40",
+          width: 2,
+          delta: 2
         }
       },
       {
-        "from": 9,
-        "to": 12,
-        "line": {
-          "color": "rgba(200, 0, 0, 0.5)",
-          "width": 2
+        from: 15,
+        to: 16,
+        line: {
+          color: "#f14d40",
+          width: 2,
+          delta: 2,
+          outlineColor: "#96403a",
+          outlineWidth: 1
         }
       },
       {
-        "from": 13,
-        "to": 15,
-        "line": {
-          "color": "rgba(200, 0, 0, 0.5)",
-          "width": 4
+        from: 17,
+        to: 21,
+        line: {
+          color: "#f14d40",
+          width: 3,
+          delta: 3,
+          outlineColor: "#96403a",
+          outlineWidth: 1
+        }
+      }
+    ],
+    trafficFlowSlowMinor: [
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#f14d40",
+          width: 1,
+          delta: 1
         }
       },
       {
-        "from": 16,
-        "to": 19,
-        "line": {
-          "color": "rgba(200, 0, 0, 0.5)",
-          "width": 6
+        from: 17,
+        to: 21,
+        line: {
+          color: "#f14d40",
+          width: 2,
+          delta: 2
         }
       }
     ]
@@ -3534,7 +4094,7 @@ class VectorTileFactory {
     }
   }
   static DEFAULT_PROPERTIES = {
-    provider: "OpenStreetmap",
+    provider: DEFAULT_PROVIDER,
     baseMap: true,
     traffic: false
   };
@@ -3549,7 +4109,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     },
     {
       from: 8,
-      to: 19,
+      to: 21,
       color: "#eeeeee"
     }
   ],
@@ -3582,9 +4142,15 @@ const RENDERING_CONFIG_GRAYSCALE = {
     interstateNumbers: "interstateNumbers",
     expresswayNumbers: "highway",
     expresswayintersections: "interstate_minor",
-    trafficFlowFast: "trafficFlowFast",
-    trafficFlowMedium: "trafficFlowMedium",
-    trafficFlowSlow: "trafficFlowSlow",
+    trafficFlowFastHighway: "trafficFlowFastHighway",
+    trafficFlowFastInterstate: "trafficFlowFastInterstate",
+    trafficFlowFastMinor: "trafficFlowFastMinor",
+    trafficFlowMediumHighway: "trafficFlowMediumHighway",
+    trafficFlowMediumInterstate: "trafficFlowMediumInterstate",
+    trafficFlowMediumMinor: "trafficFlowMediumMinor",
+    trafficFlowSlowHighway: "trafficFlowSlowHighway",
+    trafficFlowSlowInterstate: "trafficFlowSlowInterstate",
+    trafficFlowSlowMinor: "trafficFlowSlowMinor",
     trafficJam: "trafficJam",
     roadworks: "roadworks",
     dangerousSituation: "dangerous_situation",
@@ -3594,7 +4160,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     metropolis: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 30,
           color: "#606060",
@@ -3632,7 +4198,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     large_city: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 24,
           color: "#606060",
@@ -3670,7 +4236,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     city: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 20,
           color: "#606060",
@@ -3708,7 +4274,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     settlement: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         text: {
           size: 18,
           color: "#606060",
@@ -3719,228 +4285,495 @@ const RENDERING_CONFIG_GRAYSCALE = {
         }
       },
       {
-        from: 15,
-        to: 16,
-        text: {
-          size: 14,
-          color: "#606060",
-          font: "Open Sans",
-          fontWeight: "bold",
-          outlineColor: "white",
-          outlineWidth: 2
+        from: 15,
+        to: 16,
+        text: {
+          size: 14,
+          color: "#606060",
+          font: "Open Sans",
+          fontWeight: "bold",
+          outlineColor: "white",
+          outlineWidth: 2
+        }
+      },
+      {
+        from: 10,
+        to: 14,
+        text: {
+          size: 10,
+          color: "#606060",
+          font: "Open Sans",
+          fontWeight: "bold",
+          outlineColor: "white",
+          outlineWidth: 2
+        }
+      }
+    ],
+    earth: [
+      {
+        from: 1,
+        to: 21,
+        polygon: {
+          color: "#f2f2f2"
+        }
+      }
+    ],
+    urban_area: [
+      {
+        from: 1,
+        to: 21,
+        polygon: {
+          color: "rgba(0, 0, 0, 0.05)"
+        }
+      }
+    ],
+    forest: [
+      {
+        from: 15,
+        to: 21,
+        polygon: {
+          color: "#d4d4d4"
+        },
+        text: {
+          size: 12,
+          color: "#a0a0a0",
+          font: "Open Sans",
+          fontStyle: "italic"
+        }
+      },
+      {
+        from: 1,
+        to: 14,
+        polygon: {
+          color: "#d4d4d4"
+        }
+      }
+    ],
+    natural_park: [
+      {
+        from: 15,
+        to: 21,
+        polygon: {
+          color: "#e1e1e1"
+        },
+        text: {
+          size: 12,
+          color: "#b9b9b9",
+          font: "Open Sans",
+          fontStyle: "italic"
+        }
+      },
+      {
+        from: 1,
+        to: 14,
+        polygon: {
+          color: "#e1e1e1"
+        }
+      }
+    ],
+    water: [
+      {
+        from: 1,
+        to: 21,
+        line: {
+          color: "#c6c6c6",
+          width: 1
+        },
+        polygon: {
+          color: "#BBC5CF"
+        },
+        text: {
+          size: 14,
+          color: "#9e9e9e",
+          font: "Open Sans",
+          fontWeight: "bold",
+          fontStyle: "italic"
+        }
+      }
+    ],
+    country: [
+      {
+        from: 1,
+        to: 21,
+        line: {
+          color: "#acacac"
+        },
+        text: {
+          size: 18,
+          color: "#acacac",
+          font: "Open Sans",
+          fontWeight: "bold",
+          outlineColor: "white",
+          outlineWidth: 2
+        }
+      }
+    ],
+    trafficFlowFastHighway: [
+      {
+        from: 1,
+        to: 5,
+        line: {
+          color: "#50dc32",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 6,
+        to: 9,
+        line: {
+          color: "#50dc32",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#50dc32",
+          width: 6,
+          delta: 2
+        }
+      },
+      {
+        from: 13,
+        to: 15,
+        line: {
+          color: "#50dc32",
+          width: 9,
+          delta: 2
+        }
+      },
+      {
+        from: 16,
+        to: 21,
+        line: {
+          color: "#50dc32",
+          width: 13,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowFastInterstate: [
+      {
+        from: 9,
+        to: 9,
+        line: {
+          color: "#50dc32",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#50dc32",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#50dc32",
+          width: 6,
+          delta: 2
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#50dc32",
+          width: 9,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#50dc32",
+          width: 12,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowFastMinor: [
+      {
+        from: 13,
+        to: 14,
+        line: {
+          color: "#50dc32",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 15,
+        to: 16,
+        line: {
+          color: "#50dc32",
+          width: 5,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#50dc32",
+          width: 9,
+          delta: 2
+        }
+      }
+    ],
+    trafficFlowMediumHighway: [
+      {
+        from: 1,
+        to: 5,
+        line: {
+          color: "#ffa500",
+          width: 1,
+          delta: 1
+        }
+      },
+      {
+        from: 6,
+        to: 9,
+        line: {
+          color: "#ffa500",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 10,
+        to: 12,
+        line: {
+          color: "#ffa500",
+          width: 6,
+          delta: 2
         }
       },
       {
-        from: 10,
-        to: 14,
-        text: {
-          size: 10,
-          color: "#606060",
-          font: "Open Sans",
-          fontWeight: "bold",
-          outlineColor: "white",
-          outlineWidth: 2
+        from: 13,
+        to: 15,
+        line: {
+          color: "#ffa500",
+          width: 9,
+          delta: 2
         }
-      }
-    ],
-    earth: [
+      },
       {
-        from: 1,
-        to: 19,
-        polygon: {
-          color: "#f2f2f2"
+        from: 16,
+        to: 21,
+        line: {
+          color: "#ffa500",
+          width: 13,
+          delta: 2
         }
       }
     ],
-    urban_area: [
+    trafficFlowMediumInterstate: [
       {
-        from: 1,
-        to: 19,
-        polygon: {
-          color: "rgba(0, 0, 0, 0.05)"
+        from: 9,
+        to: 9,
+        line: {
+          color: "#ffa500",
+          width: 2,
+          delta: 1
         }
-      }
-    ],
-    forest: [
+      },
       {
-        from: 1,
+        from: 10,
+        to: 12,
+        line: {
+          color: "#ffa500",
+          width: 2,
+          delta: 1
+        }
+      },
+      {
+        from: 13,
         to: 14,
-        polygon: {
-          color: "#d4d4d4"
+        line: {
+          color: "#ffa500",
+          width: 6,
+          delta: 2
         }
       },
       {
         from: 15,
-        to: 19,
-        polygon: {
-          color: "#d4d4d4"
-        },
-        text: {
-          size: 12,
-          color: "#a0a0a0",
-          font: "Open Sans",
-          fontStyle: "italic"
+        to: 16,
+        line: {
+          color: "#ffa500",
+          width: 9,
+          delta: 2
+        }
+      },
+      {
+        from: 17,
+        to: 21,
+        line: {
+          color: "#ffa500",
+          width: 12,
+          delta: 2
         }
       }
     ],
-    natural_park: [
+    trafficFlowMediumMinor: [
       {
-        from: 1,
+        from: 13,
         to: 14,
-        polygon: {
-          color: "#e1e1e1"
+        line: {
+          color: "#ffa500",
+          width: 1,
+          delta: 1
         }
       },
       {
         from: 15,
-        to: 19,
-        polygon: {
-          color: "#e1e1e1"
-        },
-        text: {
-          size: 12,
-          color: "#b9b9b9",
-          font: "Open Sans",
-          fontStyle: "italic"
+        to: 16,
+        line: {
+          color: "#ffa500",
+          width: 5,
+          delta: 2
         }
-      }
-    ],
-    water: [
+      },
       {
-        from: 1,
-        to: 19,
+        from: 17,
+        to: 21,
         line: {
-          color: "#c6c6c6",
-          width: 1
-        },
-        polygon: {
-          color: "#BBC5CF"
-        },
-        text: {
-          size: 14,
-          color: "#9e9e9e",
-          font: "Open Sans",
-          fontWeight: "bold",
-          fontStyle: "italic"
+          color: "#ffa500",
+          width: 9,
+          delta: 2
         }
       }
     ],
-    country: [
+    trafficFlowSlowHighway: [
       {
         from: 1,
-        to: 19,
+        to: 5,
         line: {
-          color: "#acacac"
-        },
-        text: {
-          size: 18,
-          color: "#acacac",
-          font: "Open Sans",
-          fontWeight: "bold",
-          outlineColor: "white",
-          outlineWidth: 2
+          color: "#c80000",
+          width: 1,
+          delta: 1
         }
-      }
-    ],
-    trafficFlowFast: [
+      },
       {
-        from: 1,
-        to: 8,
+        from: 6,
+        to: 9,
         line: {
-          color: "#50dc32",
-          width: 1
+          color: "#c80000",
+          width: 2,
+          delta: 1
         }
       },
       {
-        from: 9,
+        from: 10,
         to: 12,
         line: {
-          color: "#50dc32",
-          width: 2
+          color: "#c80000",
+          width: 6,
+          delta: 2
         }
       },
       {
         from: 13,
         to: 15,
         line: {
-          color: "#50dc32",
-          width: 3
+          color: "#c80000",
+          width: 9,
+          delta: 2
         }
       },
       {
         from: 16,
-        to: 19,
+        to: 21,
         line: {
-          color: "#50dc32",
-          width: 4
+          color: "#c80000",
+          width: 13,
+          delta: 2
         }
       }
     ],
-    trafficFlowMedium: [
+    trafficFlowSlowInterstate: [
       {
-        from: 1,
-        to: 8,
+        from: 9,
+        to: 9,
         line: {
-          color: "#ffa500",
-          width: 1
+          color: "#c80000",
+          width: 2,
+          delta: 1
         }
       },
       {
-        from: 9,
+        from: 10,
         to: 12,
         line: {
-          color: "#ffa500",
-          width: 2
+          color: "#c80000",
+          width: 2,
+          delta: 1
         }
       },
       {
         from: 13,
-        to: 15,
+        to: 14,
         line: {
-          color: "#ffa500",
-          width: 3
+          color: "#c80000",
+          width: 6,
+          delta: 2
         }
       },
       {
-        from: 16,
-        to: 19,
+        from: 15,
+        to: 16,
         line: {
-          color: "#ffa500",
-          width: 4
+          color: "#c80000",
+          width: 9,
+          delta: 2
         }
-      }
-    ],
-    trafficFlowSlow: [
+      },
       {
-        from: 1,
-        to: 8,
+        from: 17,
+        to: 21,
         line: {
           color: "#c80000",
-          width: 1
+          width: 12,
+          delta: 2
         }
-      },
+      }
+    ],
+    trafficFlowSlowMinor: [
       {
-        from: 9,
-        to: 12,
+        from: 13,
+        to: 14,
         line: {
           color: "#c80000",
-          width: 2
+          width: 1,
+          delta: 1
         }
       },
       {
-        from: 13,
-        to: 15,
+        from: 15,
+        to: 16,
         line: {
           color: "#c80000",
-          width: 3
+          width: 5,
+          delta: 2
         }
       },
       {
-        from: 16,
-        to: 19,
+        from: 17,
+        to: 21,
         line: {
           color: "#c80000",
-          width: 4
+          width: 9,
+          delta: 2
         }
       }
     ],
@@ -3979,7 +4812,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
       },
       {
         from: 15,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDg0Ny4xNTQ2IDc0My42MjUzNyIKICAgaGVpZ2h0PSI3NDMuNjI1MzciCiAgIHdpZHRoPSI4NDcuMTU0NiIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMjEzMzkiPjxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTIxMzQ1Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzMjEzNDMiIC8+PGcKICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjI1LDAsMCwtMS4yNSwwLDc0My42MjUzNCkiCiAgICAgaWQ9ImcyMTM0NyI+PGcKICAgICAgIGlkPSJnMjEzNDkiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjEzNTEiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM4Ljg2Nyw1OTQuNTAyIGMgLTcuNTEyLDAgLTE1LjAyMywtMi44NjcgLTIwLjc1OCwtOC41OTggLTEuODgyLC0xLjg3OSAtMy40NDksLTMuOTUzIC00LjcxMSwtNi4xNTIgbCAtMTUuMjQ2LC0yNi4xNTYgLTAuMDY2LDAgTCA0Ljk4LDQ1LjU1MyBDIDQuOTMsNDUuNDU5IDQuODg3LDQ1LjM2NSA0LjgzMiw0NS4yNjQgMy4zNDgsNDIuODczIDIuMTc2LDQwLjIyMSAxLjM5OCwzNy4zNTMgLTIuNzg5LDIxLjY5NyA2LjUwNCw1LjU5OSAyMi4xNiwxLjQwNCBjIDIuNTksLTAuNjk1IDUuMTg4LC0xLjAxMiA3LjczOCwtMSBsIDYxOC4wNzUsMCBjIDE2LjIxMSwwIDI5LjM1MSwxMy4xNDEgMjkuMzUxLDI5LjM1NiAwLDUuMjk3IC0xLjQxOCwxMC4yODEgLTMuODc5LDE0LjU3OCAtMC4wMTksMC4wMzUgLTAuMDQzLDAuMDYyIC0wLjA1LDAuMDk3IEwgMzY5LjAyMyw1NzIuODQ2IGMgLTMuODYzLDYuNjY0IC01LjY0OCw5LjMwNCAtOS40MDIsMTMuMDU4IC01LjczLDUuNzMxIC0xMy4yNDIsOC41OTggLTIwLjc1NCw4LjU5OCB6IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjEzNTMiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNjMTEyMWM7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM4Ljg2Nyw1ODcuMTQ2IGMgLTcuMTI1LDAuMDUxIC0xNC45NTMsLTMuNTkzIC0xOC43ODEsLTEwLjM5OCBMIDEwLjc4OSw0MC44NDkgQyA5LjAwOCwzNy4yMDEgOC4yNTgsMzQuMDI5IDguMjM0LDMwLjQgOC4yMzQsMjMuOTA0IDExLjEwNSwxNy43NCAxNi4wODIsMTMuNTUzIDIwLjQ2OSwxMC4xNjYgMjQuNjE3LDguNCAzMC4yMDMsOC40IGwgNjE3LjkwNiwwIGMgMy43NywtMC4wMzUgNy41NDMsMC44NzEgMTAuOTgxLDMuMTMzIDYuNDQxLDMuODk1IDEwLjM5OCwxMC44ODMgMTAuNDA2LDE4LjQyNiAtMC4xODQsMy44OTQgLTEuMTQ4LDggLTIuODc5LDEwLjg5IEwgMzU3LjUwNCw1NzYuODMgYyAtMC4wMzEsMC4wNDcgLTAuMDU5LDAuMDk0IC0wLjA5NCwwLjE0MSAtMC4wMjcsMC4wNDYgLTAuMDYyLDAuMDg2IC0wLjA5LDAuMTQ0IC0xLjA5NywxLjc1OCAtMi40NzIsMy4zMDUgLTQuMDQ3LDQuNjMzIC0zLjU4MiwzLjEwOSAtOC4wNzgsNC45NzYgLTEyLjgxNiw1LjMwOSAtMC41MzEsMC4wNTQgLTEuMDYyLDAuMDg1IC0xLjU5LDAuMDg5IHogTSAzMC4yMDMsOC40IGwgLTEuNTIzLDAgMS41NTQsMCAtMC4wMzEsMCB6IE0gMzM4LjU0Nyw0ODAuOTI4IDU3NC4yNSw3Mi40IGwgLTQ3MS43MzgsMCAyMzYuMDM1LDQwOC41MjggeiIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIxMzU1IgogICAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDMzOC44NjcsNTk0LjkgYyAtNy42MTcsMCAtMTUuMjMsLTIuOTA2IC0yMS4wMzksLTguNzIyIC0xLjkwNiwtMS44OTUgLTMuNDkyLC00LjAwNCAtNC43NzMsLTYuMjI3IGwgLTE1LjEyOSwtMjUuOTU3IC0wLjA3NCwwIEwgNC42NDEsNDUuNzU2IEMgNC41NzQsNDUuNjM5IDQuNTIzLDQ1LjUzNyA0LjQ3Nyw0NS40NTUgMi45NzMsNDMuMDMzIDEuNzk3LDQwLjM1MyAxLjAyLDM3LjQ1OSAtMy4yMywyMS41ODggNi4xOTEsNS4yNzEgMjIuMDU5LDEuMDE3IDI0LjY4LDAuMzE0IDI3LjMxNiwtMC4wMDYgMjkuODk4LDAuMDAyIGwgNjE4LjA3NSwwIGMgMTYuNDI1LDAgMjkuNzUsMTMuMzI4IDI5Ljc1LDI5Ljc1OCAwLDUuMzc1IC0xLjQzOCwxMC40MTQgLTMuOTM0LDE0Ljc3MyAtMC4wMTYsMC4wMTYgLTAuMDIzLDAuMDUxIC0wLjA0NywwLjA5OCBMIDM2OS4zNzksNTczLjA0NSBjIC0zLjg3MSw2LjY2OCAtNS42OTUsOS4zNjMgLTkuNDczLDEzLjEzMyAtNS44MDgsNS44MTYgLTEzLjQyNiw4LjcyMiAtMjEuMDM1LDguNzIyIGwgLTAuMDA0LDAgeiBtIDAsLTAuMzk4IGMgNy41MTIsMCAxNS4wMjQsLTIuODY3IDIwLjc1NCwtOC41OTggMy43NTQsLTMuNzU0IDUuNTM5LC02LjM5NCA5LjQwMiwtMTMuMDU4IEwgNjczLjM5MSw0NC40MzUgYyAwLjAxMSwtMC4wMzUgMC4wMzUsLTAuMDYyIDAuMDU0LC0wLjA5NyAyLjQ2MSwtNC4yOTcgMy44NzksLTkuMjgxIDMuODc5LC0xNC41NzggMCwtMTYuMjE1IC0xMy4xNCwtMjkuMzU2IC0yOS4zNTEsLTI5LjM1NiBsIC02MTguMDc1LDAgQyAyNy4zNDgsMC4zOTIgMjQuNzUsMC43MDkgMjIuMTYsMS40MDQgNi41MDQsNS41OTkgLTIuNzg5LDIxLjY5NyAxLjM5OCwzNy4zNTMgYyAwLjc3LDIuODY4IDEuOTUsNS41MiAzLjQzNCw3LjkxMSAwLjA1NSwwLjEwMSAwLjA5OCwwLjE5NSAwLjE0OCwwLjI4OSBsIDI5My4xMDYsNTA4LjA0MyAwLjA2NiwwIDE1LjI0NiwyNi4xNTYgYyAxLjI2MiwyLjE5OSAyLjgyOSw0LjI3MyA0LjcxMSw2LjE1MiA1LjczNSw1LjczMSAxMy4yMzksOC41OTggMjAuNzU4LDguNTk4IHoiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgyMTM1NyIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzNTAuODk4LDE0OS4zODEgYyAwLDIuMzk0IDAuNzksNC43NDYgMi4yMjcsNi42NjQgbCAyLjIwMywyLjk1NyBjIDEuNTYzLDIuMDYyIDIuODcxLDQuMzEyIDMuODkxLDYuNjg3IGwgMTQuNjI5LDMzLjYzNyBjIDEuNDc2LDMuMzk1IDQuODA0LDUuNTYzIDguNDY4LDUuNTYzIGwgOTIuNDI2LDAgYyAzLjY4NCwwIDcuMDEyLC0yLjE2OCA4LjQ4OCwtNS41NjMgbCAxNC42MSwtMzMuNjM3IGMgMS4wMzksLTIuMzc1IDIuMzUxLC00LjYyNSAzLjg5LC02LjY4NyBsIDIuMjI3LC0yLjk1NyBjIDEuNDM0LC0xLjkxOCAyLjIyNywtNC4yNyAyLjIyNywtNi42NjQgbCAwLC0yNC4wNTkgYyAwLC01LjEwMSAtNC4xNDEsLTkuMjQ2IC05LjI2MiwtOS4yNDYgbCAtMTM2Ljc4NSwwIGMgLTUuMDk4LDAgLTkuMjM5LDQuMTQ1IC05LjIzOSw5LjI0NiBsIDAsMjQuMDU5IHogbSAxNy41NTksMTQuODA4IDEyMC4xNjQsMCAtMTIuNzE1LDI5LjIyMyBjIC0wLjU4MiwxLjM1MiAtMS45MTQsMi4yMjcgLTMuMzksMi4yMjcgbCAtODcuOTU0LDAgYyAtMS40NzYsMCAtMi44MDgsLTAuODc1IC0zLjM5LC0yLjIyNyBsIC0xMi43MTUsLTI5LjIyMyB6IG0gLTguMzIsLTUxLjgyIDIyLjE3OSwwIDAsLTIwLjM1MiBjIDAsLTMuMDU4IC0yLjQ3NiwtNS41MzkgLTUuNTM1LC01LjUzOSBsIC0xMS4wOSwwIGMgLTMuMDU4LDAgLTUuNTU0LDIuNDgxIC01LjU1NCw1LjUzOSBsIDAsMjAuMzUyIHogbSAxMTQuNjA1LDAgMjIuMTgsMCAwLC0yMC4zNTIgYyAwLC0zLjA1OCAtMi40NzMsLTUuNTM5IC01LjUzNSwtNS41MzkgbCAtMTEuMDksMCBjIC0zLjA1OSwwIC01LjU1NSwyLjQ4MSAtNS41NTUsNS41MzkgbCAwLDIwLjM1MiB6IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjEzNTkiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjg1Ljg5OCwyMDAuMzQyIGMgMCwyLjA0MyAwLjY2OCw0LjA0MyAxLjg5NSw1LjY4NyBsIDEuODk1LDIuNTIgYyAxLjMwOCwxLjc2OSAyLjQzMywzLjY2NCAzLjMwOCw1LjcwNyBsIDEyLjQ2MSwyOC42NiBjIDEuMjUsMi44NzUgNC4xMDIsNC43NDYgNy4yMjMsNC43NDYgbCA3OC43OTcsMCBjIDMuMTQsMCA1Ljk3MiwtMS44NzEgNy4yMTgsLTQuNzQ2IGwgMTIuNDY1LC0yOC42NiBjIDAuODk1LC0yLjA0MyAxLjk5NiwtMy45MzggMy4zMjgsLTUuNzA3IGwgMC45MzgsLTEuMjUgLTMzLjEwNiwwIGMgLTQuNjQsMCAtOC44MiwtMi43NSAtMTAuNjc1LC03IGwgLTEyLjMxNywtMjguMzQ0IC02NS41NDMsMCBjIC00LjM0NywwIC03Ljg4NywzLjUxOSAtNy44ODcsNy44OTEgbCAwLDIwLjQ5NiB6IG0gMTQuOTYxLDEyLjYyMSAxMDIuNDM0LDAgLTEwLjg0LDI0LjkxIGMgLTAuNSwxLjE0OCAtMS42MjEsMS44OTggLTIuODkxLDEuODk4IGwgLTc0Ljk2OCwwIGMgLTEuMjUsMCAtMi4zOTUsLTAuNzUgLTIuODk1LC0xLjg5OCBsIC0xMC44NCwtMjQuOTEgeiBtIC03LjA3NCwtNDQuMTc2IDE4Ljg5NSwwIDAsLTE3LjM0OCBjIDAsLTIuNjA1IC0yLjEwMiwtNC43MyAtNC43MjcsLTQuNzMgbCAtOS40NDUsMCBjIC0yLjYyMSwwIC00LjcyMywyLjEyNSAtNC43MjMsNC43MyBsIDAsMTcuMzQ4IHoiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgyMTM2MSIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAyMjguMTI1LDI0NS42NDIgYyAwLDEuNzI3IDAuNTU5LDMuNDE1IDEuNjAyLDQuODA5IGwgMS42MDEsMi4xMjUgYyAxLjEyNSwxLjUgMi4wNTksMy4xMjUgMi44MDksNC44MzIgbCAxMC41NTEsMjQuMjY2IGMgMS4wNTgsMi40MzcgMy40NTMsNCA2LjA5Myw0IGwgNjYuNjY4LDAgYyAyLjY2NCwwIDUuMDU1LC0xLjU2MyA2LjExNywtNCBsIDEwLjU1MSwtMjQuMjY2IGMgMC43NDYsLTEuNzA3IDEuNjg0LC0zLjMzMiAyLjgwOSwtNC44MzIgbCAxLjYwMSwtMi4xMjUgMC4yNSwtMC4zNzUgLTI2LjA5MywwIGMgLTQuMDk4LDAgLTcuODAxLC0yLjQzNCAtOS40MjYsLTYuMTg0IGwgLTkuNjc2LC0yMi4yODUgLTU4LjgwMSwwIGMgLTMuNjYsMCAtNi42NTYsMi45OTYgLTYuNjU2LDYuNjg0IGwgMCwxNy4zNTEgeiBtIDEyLjY3MiwxMC42ODQgODYuNjYsMCAtOS4xNzYsMjEuMDc4IGMgLTAuNDE0LDAuOTgxIC0xLjM3MSwxLjYwNiAtMi40MzMsMS42MDYgbCAtNjMuNDQyLDAgYyAtMS4wNjIsMCAtMi4wMTksLTAuNjI1IC0yLjQ1NywtMS42MDYgbCAtOS4xNTIsLTIxLjA3OCB6IG0gLTYuMDE2LC0zNy4zODcgMTYsMCAwLC0xNC42ODMgYyAwLC0yLjIwNyAtMS43ODksLTQgLTMuOTkyLC00IGwgLTcuOTkyLDAgYyAtMi4yMDMsMCAtNC4wMTYsMS43OTMgLTQuMDE2LDQgbCAwLDE0LjY4MyB6IiAvPjwvZz48L2c+PC9zdmc+",
           width: 34,
@@ -4029,7 +4862,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
       },
       {
         from: 15,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzcyODMiCiAgIHZlcnNpb249IjEuMSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgd2lkdGg9Ijg0Ny4xNTg1NyIKICAgaGVpZ2h0PSI3NDMuNjIyNjgiCiAgIHZpZXdCb3g9IjAgMCA4NDcuMTU4NTcgNzQzLjYyMjY4Ij48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE3Mjg5Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNzI4NyI+PGNsaXBQYXRoCiAgICAgICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIGlkPSJjbGlwRW1mUGF0aDEiPjxwYXRoCiAgICAgICAgIGQ9Im0gMCw0OC4yMjQ2IDU0LjgyNDYsMCBMIDU0LjgyNDYsMCAwLDAgMCw0OC4yMjQ2IFoiCiAgICAgICAgIGlkPSJwYXRoMzM0NCIgLz48L2NsaXBQYXRoPjxwYXR0ZXJuCiAgICAgICBpZD0iRU1GaGJhc2VwYXR0ZXJuIgogICAgICAgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgICAgIHdpZHRoPSI2IgogICAgICAgaGVpZ2h0PSI2IgogICAgICAgeD0iMCIKICAgICAgIHk9IjAiIC8+PC9kZWZzPjxnCiAgICAgaWQ9Imc3MjkxIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDAsNzQzLjYyMjY3KSI+PGcKICAgICAgIGlkPSJnNzI5MyI+PHBhdGgKICAgICAgICAgZD0ibSAzMzguODU5LDU5NC41IGMgNy41MTIsMCAxNS4wMjgsLTIuODY3IDIwLjc1OCwtOC41OTggMS44NzksLTEuODc5IDMuNDQ1LC0zLjk1MyA0LjcwNywtNi4xNTIgbCAxNS4yNDYsLTI2LjE1NyAwLjA3MSwwIDI5My4xMDEsLTUwOC4wMzkgYyAwLjA1NSwtMC4wOTcgMC4wOTgsLTAuMTk1IDAuMTUzLC0wLjI5MyAxLjQ4OCwtMi4zOTQgMi42NTYsLTUuMDQzIDMuNDI1LC03LjkxIDQuMTk2LC0xNS42NTYgLTUuMDk3LC0zMS43NTQgLTIwLjc1OCwtMzUuOTQ5IC0yLjU4NSwtMC42OTUgLTUuMTgzLC0xLjAxMiAtNy43MzgsLTEgbCAtNjE4LjA2NiwwIGMgLTE2LjIxNSwwIC0yOS4zNTYsMTMuMTQxIC0yOS4zNTYsMjkuMzU2IDAsNS4zMDQgMS40MTQsMTAuMjgxIDMuODc5LDE0LjU3OCAwLjAyLDAuMDMxIDAuMDM1LDAuMDYyIDAuMDUxLDAuMDk3IGwgMzA0LjM2Nyw1MjguNDEgYyAzLjg2Myw2LjY2NSA1LjY1Myw5LjMwNSA5LjQwNiwxMy4wNTkgNS43MzEsNS43MzEgMTMuMjQzLDguNTk4IDIwLjc1NCw4LjU5OCB6IgogICAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDcyOTUiIC8+PHBhdGgKICAgICAgICAgZD0ibSAzMzguODU5LDU4Ny4xNDQgYyA3LjEyNSwwLjA1MSAxNC45NSwtMy41OSAxOC43ODIsLTEwLjQwNiBMIDY2Ni45MzQsNDAuODQ3IGMgMS43ODUsLTMuNjQ4IDIuNTM1LC02LjgyIDIuNTU4LC0xMC40NDkgMCwtNi40OTYgLTIuODc1LC0xMi42NiAtNy44NDcsLTE2Ljg0IC00LjM4MywtMy4zOTQgLTguNTM2LC01LjE2IC0xNC4xMjIsLTUuMTYgbCAtNjE3LjkwNiwwIEMgMjUuODQ4LDguMzYzIDIyLjA3LDkuMjY5IDE4LjY0MSwxMS41MzEgMTIuMTg4LDE1LjQyOSA4LjIzOCwyMi40MTQgOC4yMywyOS45NTcgYyAwLjE4NCwzLjg5NCAxLjE0NSw4IDIuODc5LDEwLjg5IGwgMzA5LjExNCw1MzUuOTgxIGMgMC4wMjcsMC4wNDcgMC4wNTgsMC4wOTQgMC4wODksMC4xNCAwLjAzMiwwLjA0NyAwLjA2MywwLjA5NCAwLjA5NCwwLjE0NSAxLjA5OCwxLjc1NCAyLjQ3MywzLjMwNSA0LjAzOSw0LjYzMyAzLjU5LDMuMTA5IDguMDg2LDQuOTc2IDEyLjgyNSw1LjMxNiAwLjUzMSwwLjA0NyAxLjA2MiwwLjA3OCAxLjU4OSwwLjA4MiB6IE0gNjQ3LjUyMyw4LjM5OCBsIDEuNTI0LDAgLTEuNTU1LDAgMC4wMzEsMCB6IE0gMzM5LjE4LDQ4MC45MzMgMTAzLjQ3Nyw3Mi4zOTggbCA0NzEuNzM4LDAgLTIzNi4wMzUsNDA4LjUzNSB6IgogICAgICAgICBzdHlsZT0iZmlsbDojYzExMjFjO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBpZD0icGF0aDcyOTciIC8+PHBhdGgKICAgICAgICAgZD0ibSAzMzguODU5LDU5NC44OTggYyA3LjYxOCwwIDE1LjIzMSwtMi45MDYgMjEuMDM5LC04LjcxNSAxLjkwNywtMS45MDIgMy40OTMsLTQuMDA4IDQuNzc0LC02LjIzNCBsIDE1LjEyOSwtMjUuOTU3IDAuMDcsMCAyOTMuMjE1LC01MDguMjM4IGMgMC4wNjYsLTAuMTE4IDAuMTEzLC0wLjIxOSAwLjE2LC0wLjMwMSAxLjUwNCwtMi40MjIgMi42ODQsLTUuMTAyIDMuNDYxLC03Ljk5NiBDIDY4MC45NTcsMjEuNTg2IDY3MS41MzUsNS4yNjkgNjU1LjY2OCwxLjAxNSA2NTMuMDQ3LDAuMzEyIDY1MC40MSwtMC4wMDggNjQ3LjgyNCwwIEwgMjkuNzU4LDAgQyAxMy4zMjgsMCAwLDEzLjMyOCAwLDI5Ljc1OCBjIDAsNS4zNzUgMS40MzgsMTAuNDE3IDMuOTM0LDE0Ljc3MyAwLjAxMSwwLjAxOSAwLjAyNywwLjA1MSAwLjA1LDAuMDk4IGwgMzA0LjM2NCw1MjguNDE0IGMgMy44NzEsNi42NjggNS42OTUsOS4zNjMgOS40NjgsMTMuMTQgNS44MDksNS44MDkgMTMuNDI2LDguNzE1IDIxLjAzOSw4LjcxNSBsIDAuMDA0LDAgeiBtIDAsLTAuMzk4IGMgLTcuNTExLDAgLTE1LjAyMywtMi44NjcgLTIwLjc1NCwtOC41OTggLTMuNzUzLC0zLjc1NCAtNS41NDMsLTYuMzk0IC05LjQwNiwtMTMuMDU5IEwgNC4zMzYsNDQuNDMzIEMgNC4zMTYsNDQuMzk4IDQuMzAxLDQ0LjM2NyA0LjI4MSw0NC4zMzYgMS44MTYsNDAuMDM5IDAuNDAyLDM1LjA2MiAwLjQwMiwyOS43NTggMC40MDIsMTMuNTQzIDEzLjU0MywwLjQwMiAyOS43NTgsMC40MDIgbCA2MTguMDY2LDAgYyAyLjU1NSwtMC4wMTIgNS4xNTMsMC4zMDUgNy43MzgsMSAxNS42NjEsNC4xOTUgMjQuOTU0LDIwLjI5MyAyMC43NTgsMzUuOTQ5IC0wLjc2NSwyLjg2NyAtMS45MzcsNS41MTYgLTMuNDI1LDcuOTEgLTAuMDU1LDAuMDk4IC0wLjA5OCwwLjE5NiAtMC4xNTMsMC4yOTMgbCAtMjkzLjEwMSw1MDguMDM5IC0wLjA3MSwwIC0xNS4yNDYsMjYuMTU3IGMgLTEuMjYyLDIuMTk5IC0yLjgyOCw0LjI3MyAtNC43MDcsNi4xNTIgLTUuNzMsNS43MzEgLTEzLjI0Miw4LjU5OCAtMjAuNzU4LDguNTk4IHoiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGlkPSJwYXRoNzI5OSIgLz48L2c+PC9nPjxnCiAgICAgdHJhbnNmb3JtPSJtYXRyaXgoNTQuNjM3NzcxLDAsMCw1NC42Mzc3NzEsMTM1MDguNjYxLC04NTgwLjUzNjQpIgogICAgIGlkPSJnMzM2OSI+PHBhdGgKICAgICAgIGlkPSJwYXRoMzM0NyIKICAgICAgIGQ9IiIKICAgICAgIGNsaXAtcGF0aD0idXJsKCNjbGlwRW1mUGF0aDEpIgogICAgICAgc3R5bGU9ImZpbGw6bm9uZTtzdHJva2U6bm9uZSIKICAgICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNDcuMjA4MDcsMTU3LjA0NDA0KSIgLz48cGF0aAogICAgICAgaWQ9InBhdGgzMzU1IgogICAgICAgZD0ibSAtMjM5LjM5NzYzLDE2OC4zMDQ2MiAwLjc2MiwtMC45MTAxNyBjIDAuMDQyMywtMC4wMjEyIDAuMDg0NywtMC4wNjM1IDAuMTI3LC0wLjA2MzUgbCAwLjE0ODE3LC0wLjA2MzUgYyAwLjA4NDcsLTAuMDIxMiAwLjE2OTMzLC0wLjA4NDcgMC4yMzI4MywtMC4xNDgxNiBsIDAuNTI5MTQsLTAuNjEzODEgYyAwLjIzMjgzLC0wLjI5NjMzIDAuNjU2MTcsLTAuMzE3NSAwLjkzMTMzLC0wLjA4NDcgMC4wNDIzLDAuMDIxMiAwLjA4NDcsMC4wNjM1IDAuMTA1ODQsMC4xMDU4NCBsIDEuMzc1ODMsMS43Nzc5NyBjIDAuMDQyMywwLjA2MzUgMC4wNDIzLDAuMTQ4MTcgLTAuMDIxMiwwLjE5MDUgLTAuMDIxMiwwLjAyMTIgLTAuMDYzNSwwLjA0MjMgLTAuMDg0NywwLjA0MjMgbCAtNC4wMDA0NywwIGMgLTAuMDg0NywwIC0wLjEyNywtMC4wNjM1IC0wLjEyNywtMC4xNDgxNyAwLC0wLjAyMTIgMCwtMC4wNjM1IDAuMDIxMiwtMC4wODQ3IHogbSAxLjAxNiwtNS4xMjIzIGMgMCwwLjI3NTE2IC0wLjIzMjgzLDAuNTA4IC0wLjUwOCwwLjUwOCAtMC4yNzUxNiwwIC0wLjUwOCwtMC4yMzI4NCAtMC41MDgsLTAuNTA4IDAsLTAuMjc1MTcgMC4yMzI4NCwtMC40ODY4MSAwLjUwOCwtMC40ODY4MSAwLjI3NTE3LDAgMC41MDgsMC4yMTE2NCAwLjUwOCwwLjQ4NjgxIHogbSAtMi43NTE2NiwyLjEzNzgzIDAuNzQwODMsLTEuMzk3IC0wLjUyOTE3LDAgLTAuMzE3NSwwLjU5MjY3IDAuMzE3NSwwLjI3NTE2IC0wLjEwNTgzLDAuMTkwNSAtMC4zMTc1LC0wLjI1NCAtMC4xNDgxNCwwLjI3NTE3IGMgLTAuMjMyODMsLTAuMTI3IC0wLjMxNzUsLTAuNDIzMzMgLTAuMTkwNSwtMC42MzUgbCAwLjM4MDk3LC0wLjc0MDgzIGMgMC4wNjM1LC0wLjEwNTg0IDAuMTY5MzQsLTAuMTY5MzQgMC4yOTYzNCwtMC4xNjkzNCBsIDEuMTg1MzMsMCBjIDAuMjk2MzMsMCAwLjUyOTE3LDAuMjMyODQgMC41MjkxNywwLjUyOTE3IDAsMC4wMjEyIDAsMC4wMjEyIDAsMC4wNDIzIGwgLTAuMTI3LDEuOTg5NjcgMS4yNDg4MywxLjA1ODMgYyAtMC4wNDIzLDAuMDQyMyAtMC4xMDU4MywwLjA4NDcgLTAuMTkwNSwwLjEyNyBsIC0xLjA3OTUsLTAuOTEwMTQgLTAuMDIxMiwwLjIzMjg0IGMgLTAuMjU0LC0wLjAyMTIgLTAuNDQ0NSwtMC4yMzI4NCAtMC40MjMzMywtMC40ODY4NCBsIDAsLTAuMTA1ODMgLTAuMzE3NSwtMC4yNTQgMC4xMDU4MywtMC4xOTA1IDAuMjMyODQsMC4xNjkzMyAwLjA0MjMsLTAuODI1NSAtMC40ODY4MywwLjkzMTM0IC0wLjgyNTUsLTAuNDQ0NSB6IG0gMS4zNzU4MywzLjIxNzMgYyAtMC4yOTYzMywwIC0wLjU1MDMzLC0wLjIzMjgzIC0wLjU1MDMzLC0wLjUyOTE2IGwgLTAuMDQyMywtMS4xMjE4NCAtMC41NTAzMywtMC44NDY2MyAtMS4zMzM0NywyLjQ5NzYzIGMgLTAuMjU0LC0wLjE0ODE2IC0wLjM1OTg0LC0wLjQ2NTY2IC0wLjIxMTY3LC0wLjc0MDgzIGwgMS4yNDg4MSwtMi4zNDk0NyAwLjgyNTUsMC40MjMzMyAwLjUyOTE2LDAuODI1NDcgYyAwLDAuMDIxMiAwLjAyMTIsMC4wNDIzIDAuMDIxMiwwLjA2MzUiCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIiAvPjwvZz48L3N2Zz4=",
           width: 34,
@@ -4079,7 +4912,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
       },
       {
         from: 15,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDg0Ny4xNTg1NyA3NDMuNjIyNjgiCiAgIGhlaWdodD0iNzQzLjYyMjY4IgogICB3aWR0aD0iODQ3LjE1ODU3IgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc1NDg4Ij48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1NDk0Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjxkYzp0aXRsZT48L2RjOnRpdGxlPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNTQ5MiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDAsNzQzLjYyMjY3KSIKICAgICBpZD0iZzU0OTYiPjxnCiAgICAgICBpZD0iZzU0OTgiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoNTUwMCIKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguODY3LDU5NC41IGMgLTcuNTEyLDAgLTE1LjAyNywtMi44NjcgLTIwLjc1OCwtOC41OTggLTEuODc5LC0xLjg3OSAtMy40NDUsLTMuOTUzIC00LjcwNywtNi4xNTIgbCAtMTUuMjQ2LC0yNi4xNTcgLTAuMDcsMCBMIDQuOTg0LDQ1LjU1NCBDIDQuOTMsNDUuNDU3IDQuODg3LDQ1LjM1OSA0LjgzMiw0NS4yNjEgMy4zNDQsNDIuODY3IDIuMTc2LDQwLjIxOCAxLjQwNiwzNy4zNTEgLTIuNzg5LDIxLjY5NSA2LjUwNCw1LjU5NyAyMi4xNjQsMS40MDIgYyAyLjU4NiwtMC42OTUgNS4xODQsLTEuMDEyIDcuNzM4LC0xIGwgNjE4LjA2NywwIGMgMTYuMjE1LDAgMjkuMzU1LDEzLjE0MSAyOS4zNTUsMjkuMzU2IDAsNS4zMDQgLTEuNDE0LDEwLjI4MSAtMy44NzksMTQuNTc4IC0wLjAxOSwwLjAzMSAtMC4wMzUsMC4wNjIgLTAuMDUsMC4wOTcgbCAtMzA0LjM2OCw1MjguNDEgYyAtMy44NjMsNi42NjUgLTUuNjUyLDkuMzA1IC05LjQwNiwxMy4wNTkgLTUuNzMsNS43MzEgLTEzLjI0Miw4LjU5OCAtMjAuNzU0LDguNTk4IHoiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGg1NTAyIgogICAgICAgICBzdHlsZT0iZmlsbDojYzExMjFjO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDMzOC44NjcsNTg3LjE0NCBjIC03LjEyNSwwLjA1MSAtMTQuOTQ5LC0zLjU5IC0xOC43ODEsLTEwLjQwNiBMIDEwLjc5Myw0MC44NDcgQyA5LjAwOCwzNy4xOTkgOC4yNTgsMzQuMDI3IDguMjM0LDMwLjM5OCBjIDAsLTYuNDk2IDIuODc1LC0xMi42NiA3Ljg0OCwtMTYuODQgNC4zODMsLTMuMzk0IDguNTM1LC01LjE2IDE0LjEyMSwtNS4xNiBsIDYxNy45MDYsMCBjIDMuNzcsLTAuMDM1IDcuNTQ3LDAuODcxIDEwLjk3NywzLjEzMyA2LjQ1MywzLjg5OCAxMC40MDIsMTAuODgzIDEwLjQxLDE4LjQyNiAtMC4xODQsMy44OTQgLTEuMTQ0LDggLTIuODc5LDEwLjg5IEwgMzU3LjUwNCw1NzYuODI4IGMgLTAuMDI3LDAuMDQ3IC0wLjA1OSwwLjA5NCAtMC4wOSwwLjE0IC0wLjAzMSwwLjA0NyAtMC4wNjIsMC4wOTQgLTAuMDk0LDAuMTQ1IC0xLjA5NywxLjc1NCAtMi40NzIsMy4zMDUgLTQuMDM5LDQuNjMzIC0zLjU5LDMuMTA5IC04LjA4Niw0Ljk3NiAtMTIuODI0LDUuMzE2IC0wLjUzMSwwLjA0NyAtMS4wNjIsMC4wNzggLTEuNTksMC4wODIgeiBNIDMwLjIwMyw4LjM5OCBsIC0xLjUyMywwIDEuNTU0LDAgLTAuMDMxLDAgeiBNIDMzOC41NDcsNDgwLjkzMyA1NzQuMjUsNzIuMzk4IGwgLTQ3MS43MzgsMCAyMzYuMDM1LDQwOC41MzUgeiIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDU1MDQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM4Ljg2Nyw1OTQuODk4IGMgLTcuNjE3LDAgLTE1LjIzLC0yLjkwNiAtMjEuMDM5LC04LjcxNSAtMS45MDYsLTEuOTAyIC0zLjQ5MiwtNC4wMDggLTQuNzczLC02LjIzNCBsIC0xNS4xMjksLTI1Ljk1NyAtMC4wNzEsMCBMIDQuNjQxLDQ1Ljc1NCBDIDQuNTc0LDQ1LjYzNiA0LjUyNyw0NS41MzUgNC40OCw0NS40NTMgMi45NzcsNDMuMDMxIDEuNzk3LDQwLjM1MSAxLjAyLDM3LjQ1NyAtMy4yMywyMS41ODYgNi4xOTEsNS4yNjkgMjIuMDU5LDEuMDE1IDI0LjY4LDAuMzEyIDI3LjMxNiwtMC4wMDggMjkuOTAyLDAgbCA2MTguMDY3LDAgYyAxNi40MjksMCAyOS43NTgsMTMuMzI4IDI5Ljc1OCwyOS43NTggMCw1LjM3NSAtMS40MzgsMTAuNDE3IC0zLjkzNCwxNC43NzMgLTAuMDEyLDAuMDE5IC0wLjAyNywwLjA1MSAtMC4wNTEsMC4wOTggTCAzNjkuMzc5LDU3My4wNDMgYyAtMy44NzEsNi42NjggLTUuNjk1LDkuMzYzIC05LjQ2OSwxMy4xNCAtNS44MDgsNS44MDkgLTEzLjQyNiw4LjcxNSAtMjEuMDM5LDguNzE1IGwgLTAuMDA0LDAgeiBtIDAsLTAuMzk4IGMgNy41MTIsMCAxNS4wMjQsLTIuODY3IDIwLjc1NCwtOC41OTggMy43NTQsLTMuNzU0IDUuNTQzLC02LjM5NCA5LjQwNiwtMTMuMDU5IEwgNjczLjM5MSw0NC40MzMgYyAwLjAxOSwtMC4wMzUgMC4wMzUsLTAuMDY2IDAuMDU0LC0wLjA5NyAyLjQ2NSwtNC4yOTcgMy44NzksLTkuMjc0IDMuODc5LC0xNC41NzggMCwtMTYuMjE1IC0xMy4xNCwtMjkuMzU2IC0yOS4zNTUsLTI5LjM1NiBsIC02MTguMDY3LDAgQyAyNy4zNDgsMC4zOSAyNC43NSwwLjcwNyAyMi4xNjQsMS40MDIgNi41MDQsNS41OTcgLTIuNzg5LDIxLjY5NSAxLjQwNiwzNy4zNTEgYyAwLjc2NiwyLjg2NyAxLjkzOCw1LjUxNiAzLjQyNiw3LjkxIDAuMDU1LDAuMDk4IDAuMDk4LDAuMTk2IDAuMTUyLDAuMjkzIGwgMjkzLjEwMiw1MDguMDM5IDAuMDcsMCAxNS4yNDYsMjYuMTU3IGMgMS4yNjIsMi4xOTkgMi44MjgsNC4yNzMgNC43MDcsNi4xNTIgNS43MzEsNS43MzEgMTMuMjQzLDguNTk4IDIwLjc1OCw4LjU5OCB6IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoNTUwNiIKICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguODY3LDQwOC40MTQgYyAtMTcuNjc2LDAgLTMyLjAwNCwtMTQuMzI4IC0zMi4wMDQsLTMyIGwgMTYsLTE4OC4wMTYgYyAwLC04LjgzNiA2LjM3MSwtMTYuMDE1IDE2LjAwNCwtMTYgOS42MjksMC4wMTYgMTUuOTk2LDcuODIgMTUuOTk2LDE2LjAxMiBsIDE2LDE4OC4wMDQgYyAwLDE3LjY3MiAtMTQuMzI0LDMyIC0zMS45OTYsMzIgeiIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDU1MDgiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzcwLjg2MywxMjQuMzk4IGMgMCwtMTcuNjgzIC0xNC4zMTYsLTMxLjk5NiAtMzEuOTk2LC0zMS45OTYgLTE3LjY3NiwwIC0zMi4wMDQsMTQuMzA5IC0zMi4wMDQsMzEuOTk2IDAsMTcuNjcyIDE0LjMyOCwzMi4wMDQgMzIuMDA0LDMyLjAwNCAxNy42OCwwIDMxLjk5NiwtMTQuMzMyIDMxLjk5NiwtMzIuMDA0IiAvPjwvZz48L2c+PC9zdmc+",
           width: 34,
@@ -4097,11 +4930,11 @@ const RENDERING_CONFIG_GRAYSCALE = {
     highway: [
       {
         from: 16,
-        to: 19,
+        to: 21,
         line: {
-          color: "#d0d0d0",
+          color: "#c0c0c0",
           width: 11,
-          outlineColor: "#b2b2b2",
+          outlineColor: "#a2a2a2",
           outlineWidth: 1
         },
         image: {
@@ -4121,9 +4954,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 13,
         to: 15,
         line: {
-          color: "#d0d0d0",
+          color: "#c0c0c0",
           width: 7,
-          outlineColor: "#b2b2b2",
+          outlineColor: "#a2a2a2",
           outlineWidth: 1
         },
         image: {
@@ -4143,9 +4976,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 10,
         to: 12,
         line: {
-          color: "#d0d0d0",
+          color: "#c0c0c0",
           width: 4,
-          outlineColor: "#b2b2b2",
+          outlineColor: "#a2a2a2",
           outlineWidth: 1
         },
         image: {
@@ -4165,7 +4998,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 6,
         to: 9,
         line: {
-          color: "#d0d0d0",
+          color: "#c0c0c0",
           width: 2
         }
       }
@@ -4173,11 +5006,11 @@ const RENDERING_CONFIG_GRAYSCALE = {
     interstate_major: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 10,
-          color: "#e4e4e4",
-          outlineColor: "#d0d0d0",
+          color: "#d4d4d4",
+          outlineColor: "#c0c0c0",
           outlineWidth: 1
         },
         text: {
@@ -4193,8 +5026,8 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 16,
         line: {
           width: 7,
-          color: "#e4e4e4",
-          outlineColor: "#d0d0d0",
+          color: "#d4d4d4",
+          outlineColor: "#c0c0c0",
           outlineWidth: 1
         },
         text: {
@@ -4210,8 +5043,8 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 14,
         line: {
           width: 4,
-          color: "#e4e4e4",
-          outlineColor: "#d0d0d0",
+          color: "#d4d4d4",
+          outlineColor: "#c0c0c0",
           outlineWidth: 1
         },
         text: {
@@ -4227,8 +5060,8 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 12,
         line: {
           width: 1,
-          color: "#e4e4e4",
-          outlineColor: "#dadada",
+          color: "#d4d4d4",
+          outlineColor: "#c0c0c0",
           outlineWidth: 1
         }
       },
@@ -4237,14 +5070,14 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 9,
         line: {
           width: 2,
-          color: "#e4e4e4"
+          color: "#d4d4d4"
         }
       }
     ],
     interstate_minor: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 10,
           color: "#ffffff",
@@ -4307,7 +5140,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     minor_road: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 7,
           color: "#ffffff",
@@ -4327,7 +5160,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 16,
         line: {
           width: 3,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4349,7 +5184,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     minor_road_oneway: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 7,
           color: "#ffffff",
@@ -4371,7 +5206,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 16,
         line: {
           width: 3,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4393,7 +5230,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     minor_road_oneway_reverse: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 7,
           color: "#ffffff",
@@ -4415,7 +5252,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 16,
         line: {
           width: 3,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4437,7 +5276,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     minor_road_restricted: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 2,
           color: "#cccccc"
@@ -4475,7 +5314,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     residential_road: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#ffffff"
@@ -4507,7 +5346,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     residential_road_oneway: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#ffffff",
@@ -4541,7 +5380,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     residential_road_oneway_rev: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#ffffff",
@@ -4574,8 +5413,8 @@ const RENDERING_CONFIG_GRAYSCALE = {
     ],
     foot_path: [
       {
-        from: 16,
-        to: 19,
+        from: 18,
+        to: 21,
         line: {
           width: 2,
           color: "rgba(1, 1, 1, 0)",
@@ -4589,12 +5428,22 @@ const RENDERING_CONFIG_GRAYSCALE = {
           outlineColor: "#ffffff",
           outlineWidth: 2
         }
+      },
+      {
+        from: 16,
+        to: 27,
+        line: {
+          width: 1,
+          color: "rgba(1, 1, 1, 0)",
+          dashColor: "#cccccc",
+          dashLength: 6
+        }
       }
     ],
     rail: [
       {
         from: 16,
-        to: 19,
+        to: 21,
         line: {
           width: 2,
           color: "#8B8C8C",
@@ -4615,7 +5464,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     ferry: [
       {
         from: 17,
-        to: 19,
+        to: 21,
         line: {
           width: 3,
           color: "#9e9e9e"
@@ -4655,7 +5504,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
     interstateNumbers: [
       {
         from: 11,
-        to: 19,
+        to: 21,
         image: {
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkJ1bmRlc3N0cmFzc2UiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMTIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMDAgMTIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0Y5REM4MTt9PC9zdHlsZT48cGF0aCBpZD0icmVjdDQiIGNsYXNzPSJzdDAiIGQ9Ik0yMi4zLDBoMTU1LjVDMTkwLDAsMjAwLDEwLDIwMCwyMi4zdjc1LjVjMCwxMi4zLTEwLDIyLjMtMjIuMywyMi4zSDIyLjNDMTAsMTIwLDAsMTEwLDAsOTcuOFYyMi4zIEMwLDEwLDEwLDAsMjIuMywweiIvPjxwYXRoIGlkPSJyZWN0NiIgZD0iTTIyLjMsNC4zaDE1NS41YzkuOSwwLDE4LDguMSwxOCwxOHY3NS41YzAsOS45LTguMSwxOC0xOCwxOEgyMi4zYy05LjksMC0xOC04LjEtMTgtMThWMjIuMyBDNC4zLDEyLjMsMTIuMyw0LjMsMjIuMyw0LjN6Ii8+PHBhdGggaWQ9InJlY3Q4IiBjbGFzcz0ic3QwIiBkPSJNMjIuMywxMS4zaDE1NS41YzYuMSwwLDExLDQuOSwxMSwxMXY3NS41YzAsNi4xLTQuOSwxMS0xMSwxMUgyMi4zYy02LjEsMC0xMS00LjktMTEtMTFWMjIuMyBDMTEuMywxNi4yLDE2LjIsMTEuMywyMi4zLDExLjN6Ii8+PC9zdmc+",
           width: 27,
@@ -4683,46 +5532,55 @@ class MapReleaseFetcher {
     this._token = token;
   }
   async getRelease(provider) {
+    if (!provider) {
+      provider = DEFAULT_PROVIDER;
+    }
     if (provider === "tomtom") {
       if (!this._tomtom) {
-        const url = "https://v1.maptrip.de/?CMD=GETFILE&PROJECT=TomTom_latest&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true";
-        this._tomtom = this.fetchAndExtractRelease(provider, url);
+        this._tomtom = this.fetchAndExtractRelease(provider);
       }
       return this._tomtom;
-    }
-    if (provider === "orbis") {
+    } else if (provider === "orbis") {
       if (!this._orbis) {
-        const url = "https://v1.maptrip.de/?CMD=GETFILE&PROJECT=Orbis_latest&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true";
-        this._orbis = this.fetchAndExtractRelease(provider, url);
+        this._orbis = this.fetchAndExtractRelease(provider);
       }
       return this._orbis;
     } else if (provider === "here") {
       if (!this._here) {
-        const url = "https://v1.maptrip.de/?CMD=GETFILE&PROJECT=HERE_latest&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true";
-        this._here = this.fetchAndExtractRelease(provider, url);
+        this._here = this.fetchAndExtractRelease(provider);
       }
       return this._here;
     } else if (provider === "openstreetmap") {
       if (!this._osm) {
-        const url = "https://v1.maptrip.de/?CMD=GETFILE&PROJECT=OSM_latest&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true";
-        this._osm = this.fetchAndExtractRelease(provider, url);
+        this._osm = this.fetchAndExtractRelease(provider);
       }
       return this._osm;
     }
+    return null;
+  }
+  getUrl(provider) {
+    const project = PROVIDER_PROJECTS[provider.toLowerCase()];
+    return `https://v0.maptrip.de/?CMD=GETFILE&PROJECT=${project}&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true`;
   }
-  async fetchAndExtractRelease(provider, url) {
+  async fetchAndExtractRelease(provider) {
+    const project = PROVIDER_PROJECTS[provider.toLowerCase()];
+    const url = `https://v0.maptrip.de/?CMD=GETFILE&PROJECT=${project}&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true`;
     return new Promise((resolve, reject) => {
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = () => {
         if (xhr.readyState !== XMLHttpRequest.DONE) return;
-        if (xhr.status === 200) {
-          const text = new TextDecoder("latin1").decode(xhr.response);
-          const textString = this.extractTargetString(text);
-          const formattedString = textString.split("Q").join(" Q");
-          const release = ` ${PROVIDER_NAMES[provider]} ${formattedString}`;
-          resolve(release);
-        } else {
-          reject(`Error fetching: ${xhr.status}`);
+        try {
+          if (xhr.status === 200) {
+            const text = new TextDecoder("latin1").decode(xhr.response);
+            const textString = this.extractTargetString(text);
+            const formattedString = textString.split("Q").join(" Q");
+            const release = ` ${PROVIDER_NAMES[provider]} ${formattedString}`;
+            resolve(release);
+          } else {
+            reject(`Error fetching: ${xhr.status}`);
+          }
+        } catch (e) {
+          reject(`Error fetching: ${e}`);
         }
       };
       xhr.open("GET", url, true);
@@ -19286,93 +20144,79 @@ function requireLeafletSrc () {
 var leafletSrcExports = requireLeafletSrc();
 const L$1 = /*@__PURE__*/getDefaultExportFromCjs(leafletSrcExports);
 
+class VectorTileUtils {
+  static async getAttribution(token, provider, attribution, releaseDate) {
+    let result = [ATTRIBUTION];
+    if (releaseDate ? releaseDate : false) {
+      const releaseFetcher = new MapReleaseFetcher(token);
+      const release = await releaseFetcher.getRelease(provider).catch((error) => {
+        console.error("Failed to fetch release:", error);
+        return void 0;
+      });
+      if (release) {
+        result.push(release);
+      }
+    }
+    if (attribution) {
+      result.push(attribution);
+    }
+    return result.join(", ");
+  }
+}
+
 class MapTripLeafletGridLayer extends L$1.GridLayer {
-  MIN_ZOOM = MIN_ZOOM;
-  MAX_ZOOM = MAX_ZOOM;
+  static attributions = [];
   token;
   factory;
-  releaseFetcher;
   provider;
-  attribution;
-  release;
   releaseDate;
+  currentAttribution;
+  attachedMap;
+  customAttribution;
   constructor(options) {
-    super(options);
+    super({
+      ...options,
+      attribution: "",
+      minZoom: Math.max(options.minZoom ? options.minZoom : MIN_ZOOM, MIN_ZOOM),
+      maxZoom: Math.min(options.maxZoom ? options.maxZoom : MAX_ZOOM, MAX_ZOOM)
+    });
     this.token = options.token;
-    this.provider = options.provider ? options.provider?.toLowerCase() : "openstreetmap";
-    this.options.attribution = options.attribution ? options.attribution : ATTRIBUTION;
-    this.releaseFetcher = new MapReleaseFetcher(this.token);
-    this.release = "";
-    this.attribution = "";
-    this.releaseDate = options.releaseDate ? options.releaseDate : false;
-    if (this.releaseDate) {
-      this.initializeAttribution();
-      this.on("add", () => {
-        if (this._map) {
-          this._map.on(
-            "baselayerchange",
-            (event) => this.onBaseLayerChange(event)
-          );
-        }
-      });
-    }
-    this.options.minZoom = options.minZoom ? Math.max(this.MIN_ZOOM, options.minZoom) : this.MIN_ZOOM;
-    this.options.maxZoom = options.maxZoom ? Math.min(this.MAX_ZOOM, options.maxZoom) : this.MAX_ZOOM;
+    this.provider = options.provider;
+    this.customAttribution = options.attribution;
+    this.releaseDate = options.releaseDate;
+    this.currentAttribution = void 0;
+    void VectorTileUtils.getAttribution(this.token, this.provider, this.customAttribution, this.releaseDate).then((attribution) => {
+      this.updateAttribution(attribution);
+    }).catch((error) => {
+      console.error("Unable to add MapTrip attribution", error);
+    });
     this.factory = VectorTileFactory.createFactory(options);
   }
-  createTile(coords) {
-    return this.factory.getJsonTile(coords.z, coords.x, coords.y, this.token);
-  }
-  async initializeAttribution() {
-    await this.setRelease();
-    await this.setAttribution();
+  onAdd(map) {
+    this.attachedMap = map;
+    return super.onAdd(map);
   }
-  // Set an original release
-  async setRelease() {
-    const release = await this.releaseFetcher.getRelease(this.provider);
-    if (release) {
-      this.release = release;
-    }
+  onRemove(map) {
+    const result = super.onRemove(map);
+    this.attachedMap = void 0;
+    return result;
   }
-  async setAttribution() {
-    if (!this._map) return;
-    try {
-      const newRelease = await this.releaseFetcher.getRelease(this.provider);
-      if (newRelease && newRelease !== this.release) {
-        this.release = newRelease;
-      }
-      this._map.attributionControl.removeAttribution(this.options.attribution);
-      this.attribution = `${this.options.attribution} ${this.release}`;
-      this._map.attributionControl.addAttribution(this.attribution);
-      const map = this._map;
-      this._map.addEventListener("baselayerchange", () => {
-        map.attributionControl.removeAttribution(this.attribution);
-      });
-    } catch (error) {
-      console.error("Error fetching release version: ", error);
-    }
+  createTile(coords) {
+    return this.factory.getJsonTile(coords.z, coords.x, coords.y, this.token);
   }
-  async onBaseLayerChange(event) {
-    if (!this._map) {
+  updateAttribution(attribution) {
+    const previous = this.options.attribution ?? "";
+    if (previous === attribution) {
       return;
     }
-    this._map.attributionControl.removeAttribution(this.attribution);
-    const eventProvider = event.layer.options.provider;
-    let newProvider;
-    if (eventProvider) {
-      if (eventProvider.toLowerCase() === "openstreetmap") {
-        newProvider = "openstreetmap";
-      } else if (eventProvider.toLowerCase() === "tomtom") {
-        newProvider = "tomtom";
-      } else if (eventProvider.toLowerCase() === "orbis") {
-        newProvider = "orbis";
-      } else if (eventProvider.toLowerCase() === "here") {
-        newProvider = "here";
-      } else {
-        newProvider = "openstreetmap";
-      }
-      this.provider = newProvider;
-      await this.setAttribution();
+    const map = this.attachedMap;
+    const control = map?.attributionControl;
+    if (control && map.hasLayer(this)) {
+      control.removeAttribution(previous);
+    }
+    this.options.attribution = attribution;
+    if (control && map.hasLayer(this)) {
+      control.addAttribution(attribution);
     }
   }
 }