@maptrip/map-tiles 1.3.3 → 1.5.0

package/dist/map-tiles.js

@@ -1107,6 +1107,30 @@ class CollisionDetector {
   }
 }
 
+const URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=tomtom${z}&project=${project}&projection=wgs84";
+const PROVIDER_PROJECTS = {
+  tomtom: "TomTom_latest",
+  orbis: "Orbis_latest",
+  here: "HERE_latest",
+  openstreetmap: "OSM_latest"
+};
+const PROVIDER_NAMES = {
+  tomtom: "TomTom",
+  orbis: "TomTom Orbis",
+  here: "HERE",
+  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
+};
+const MIN_ZOOM = 2;
+const MAX_ZOOM = 18;
+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;
+
 class VectorTileRenderer {
   _styles;
   _images;
@@ -1117,7 +1141,7 @@ class VectorTileRenderer {
   }
   drawTile(layer, z, boundaries, context) {
     context.fillStyle = this.getBackgroundColor(z);
-    context.fillRect(0, 0, 256, 256);
+    context.fillRect(0, 0, VECTOR_TILE_SIZE, VECTOR_TILE_SIZE);
     var collisions = new CollisionDetector();
     let polygons = layer.filter((it) => !!it.properties && !!it.geometry.type).filter(
       (it) => it.geometry.type === "Polygon" || it.geometry.type === "MultiPolygon"
@@ -1159,6 +1183,11 @@ class VectorTileRenderer {
         "linesOutline",
         collisions
       );
+    }
+    for (let i = 0; i < rank.length; i++) {
+      let currentRank = lines.filter(
+        (it) => parseInt(it.properties.sort_rank) === rank[i]
+      );
       this.drawTilePhase(
         currentRank,
         z,
@@ -1173,7 +1202,7 @@ class VectorTileRenderer {
     var context = canvas.getContext("2d");
     if (context != null) {
       context.fillStyle = "#C8C8C8";
-      context.fillRect(0, 0, 256, 256);
+      context.fillRect(0, 0, VECTOR_TILE_SIZE, VECTOR_TILE_SIZE);
       context.fillStyle = "#AAA";
       context.font = "15px Arial";
       context.textAlign = "center";
@@ -1322,12 +1351,12 @@ class VectorTileRenderer {
                     context,
                     collisions
                   )) {
-                    const match = text.match(/([A-Z])\s?([0-9]+[a-z]*).*/);
+                    const match = text.match(/([a-zA-Z])\s?([0-9]+[a-z]*).*/);
                     if (match) {
                       const letter = match[1];
                       const number = match[2];
-                      if (letter === "A" || letter === "B") {
-                        text = number;
+                      if (letter === "A" || letter === "B" || letter === "s") {
+                        text = letter === "A" || letter === "B" ? number : letter + number;
                         this.drawImage(
                           coordinates,
                           boundaries,
@@ -1366,6 +1395,8 @@ class VectorTileRenderer {
             }
           }
         }
+      } else {
+        console.log("no renderer for kind " + kind);
       }
     }
   }
@@ -1417,11 +1448,18 @@ class VectorTileRenderer {
       for (var j = 0; j < coordinates.length; j++) {
         var part = coordinates[j];
         context.globalAlpha = merged.opacity;
-        context.beginPath();
+        if ("areas" !== phase || j === 0) {
+          context.beginPath();
+        }
+        const width = boundaries.max.lon - boundaries.min.lon;
+        const height = boundaries.max.lat - boundaries.min.lat;
+        if (width === 0 || height === 0) {
+          return;
+        }
         var points = [];
         for (let k = 0; k < part.length; k++) {
-          let x = 256 * (part[k][0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon);
-          let y = 256 * (part[k][1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat);
+          let x = VECTOR_TILE_SIZE * (part[k][0] - boundaries.min.lon) / width;
+          let y = VECTOR_TILE_SIZE * (part[k][1] - boundaries.min.lat) / height;
           points.push({ x, y });
           if (k == 0) {
             context.moveTo(x, y);
@@ -1437,7 +1475,7 @@ class VectorTileRenderer {
             context.stroke();
           }
           return;
-        } else if ("areas" === phase) {
+        } else if ("areas" === phase && j === coordinates.length - 1) {
           if (merged.url) {
             if (this._images[merged.url]) {
               var pattern = context.createPattern(
@@ -1454,7 +1492,7 @@ class VectorTileRenderer {
             }
             context.fillStyle = merged.color;
           }
-          context.fill();
+          context.fill("evenodd");
         } else if ("areaTexts" === phase) {
           if (geoJsonProperties && geoJsonProperties.NAME) {
             if (texts && texts[geoJsonProperties.NAME]) {
@@ -1462,7 +1500,7 @@ class VectorTileRenderer {
             }
             let merged2 = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
             context.globalAlpha = merged2.opacity;
-            context.font = merged2.fontStyle + " " + merged2.fontWeight + " " + merged2.size + "px " + merged2.font;
+            context.font = `${merged2.fontStyle} ${merged2.fontWeight} ${merged2.size}px ${merged2.font}`;
             context.textAlign = "left";
             context.textBaseline = "top";
             var metrics = context.measureText(geoJsonProperties.NAME);
@@ -1471,7 +1509,7 @@ class VectorTileRenderer {
             let y = centroid.y;
             let w = metrics.width;
             let h = merged2.size;
-            if (x < 0 || x + w > 256 || y < 0 || y + h > 256) {
+            if (x < 0 || x + w > VECTOR_TILE_SIZE || y < 0 || y + h > VECTOR_TILE_SIZE) {
               return;
             }
             if (collisions && collisions.isCollision(x, y, w, h)) {
@@ -1551,13 +1589,11 @@ class VectorTileRenderer {
   projectCoordinates(coordinates, boundaries) {
     var lastX, lastY;
     var points = [];
+    const width = boundaries.max.lon - boundaries.min.lon;
+    const height = boundaries.max.lat - boundaries.min.lat;
     for (var j = 0; j < coordinates.length; j++) {
-      var x = Math.round(
-        256 * (coordinates[j][0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
-      );
-      var y = Math.round(
-        256 * (coordinates[j][1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
-      );
+      var x = Math.round(VECTOR_TILE_SIZE * (coordinates[j][0] - boundaries.min.lon) / width);
+      var y = Math.round(VECTOR_TILE_SIZE * (coordinates[j][1] - boundaries.min.lat) / height);
       if (x != lastX || y != lastY) {
         points.push({ x, y });
       }
@@ -1592,35 +1628,50 @@ class VectorTileRenderer {
       context.setLineDash([]);
     }
     if (merged.url && this._images[merged.url]) {
-      var desired = 40;
-      var distance = Math.round(desired / 2);
+      const desiredDistance = 40;
+      const margin = Math.round(desiredDistance / 2);
+      let totalLength = 0;
+      for (let i2 = 0; i2 < points.length - 1; i2++) {
+        totalLength += Math.hypot(
+          points[i2 + 1].x - points[i2].x,
+          points[i2 + 1].y - points[i2].y
+        );
+      }
+      let distance = margin;
+      let traveled = 0;
       for (var i = 0; i < points.length - 1; i++) {
-        var dx = points[i + 1].x - points[i].x;
-        var dy = points[i + 1].y - points[i].y;
-        var angle = Math.atan2(dy, dx);
+        const dx = points[i + 1].x - points[i].x;
+        const dy = points[i + 1].y - points[i].y;
+        let angle = Math.atan2(dy, dx);
         if (merged.direction != "reverse") {
           angle = angle + Math.PI;
         }
-        var distanceToNext = Math.sqrt(dx * dx + dy * dy);
+        const distanceToNext = Math.sqrt(dx * dx + dy * dy);
         while (distance < distanceToNext) {
-          var f = distance / distanceToNext;
-          var x = points[i].x + f * dx;
-          var y = points[i].y + f * dy;
-          context.save();
-          context.translate(x, y);
-          context.rotate(angle);
-          context.translate(-x, -y);
-          context.drawImage(
-            this._images[merged.url],
-            x + merged.dx,
-            y + merged.dy,
-            Number(merged.width),
-            Number(merged.height)
-          );
-          context.restore();
-          distance += desired;
+          if (traveled + distance <= totalLength - margin) {
+            const f = distance / distanceToNext;
+            const x = points[i].x + f * dx;
+            const y = points[i].y + f * dy;
+            const size = Math.max(12, 1.5 * merged.width);
+            if (x > size && y > size && x < VECTOR_TILE_SIZE - size && y < VECTOR_TILE_SIZE - size) {
+              context.save();
+              context.translate(x, y);
+              context.rotate(angle);
+              context.translate(-x, -y);
+              context.drawImage(
+                this._images[merged.url],
+                x - size / 2,
+                y - size / 2,
+                size,
+                size
+              );
+              context.restore();
+            }
+          }
+          distance += desiredDistance;
         }
-        distance = (desired - (distanceToNext - distance)) % desired;
+        traveled += distanceToNext;
+        distance -= distanceToNext;
       }
     }
   }
@@ -1634,7 +1685,7 @@ class VectorTileRenderer {
     }
     var merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
     context.globalAlpha = merged.opacity;
-    context.font = merged.fontStyle + " " + merged.fontWeight + " " + merged.size + "px " + merged.font;
+    context.font = `${merged.fontStyle} ${merged.fontWeight} ${merged.size}px ${merged.font}`;
     var points = this.projectCoordinates(coordinates, boundaries);
     if (points.length < 2) {
       return;
@@ -1808,10 +1859,10 @@ class VectorTileRenderer {
     if (merged.url) {
       if (this._images[merged.url]) {
         var x = Math.round(
-          256 * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
+          VECTOR_TILE_SIZE * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
         );
         var y = Math.round(
-          256 * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
+          VECTOR_TILE_SIZE * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
         );
         if (merged.width && merged.height) {
           merged.width = Number(merged.width);
@@ -1832,15 +1883,15 @@ class VectorTileRenderer {
    */
   isTextCollision(coordinate, name, boundaries, style, context, collisions) {
     var merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
-    var x = Math.round(
-      256 * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
+    let x = Math.round(
+      VECTOR_TILE_SIZE * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
     );
-    var y = Math.round(
-      256 * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
+    let y = Math.round(
+      VECTOR_TILE_SIZE * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
     );
-    context.font = merged.fontStyle + " " + merged.fontWeight + " " + merged.size + "px " + merged.font;
-    var w = context.measureText(name).width;
-    var h = merged.size;
+    context.font = `${merged.fontStyle} ${merged.fontWeight} ${merged.size}px ${merged.font}`;
+    const w = context.measureText(name).width;
+    const h = merged.size;
     x = x - w / 2;
     return collisions.isCollision(x, y, w, h);
   }
@@ -1850,13 +1901,13 @@ class VectorTileRenderer {
   drawText(coordinate, name, boundaries, style, context, collisions) {
     var merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
     var x = Math.round(
-      256 * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
+      VECTOR_TILE_SIZE * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon)
     );
     var y = Math.round(
-      256 * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
+      VECTOR_TILE_SIZE * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat)
     );
     context.globalAlpha = merged.opacity;
-    context.font = merged.fontStyle + " " + merged.fontWeight + " " + merged.size + "px " + merged.font;
+    context.font = `${merged.fontStyle} ${merged.fontWeight} ${merged.size}px ${merged.font}`;
     var w = context.measureText(name).width;
     var h = merged.size;
     x = x - w / 2;
@@ -1897,7 +1948,7 @@ class VectorTileRenderer {
         let text = this._styles.renderers[renderer][i].text;
         if (text) {
           let merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...text };
-          let font = (merged.fontStyle + " " + merged.fontWeight + " " + merged.size + "px " + merged.font).trim();
+          let font = `${merged.fontStyle} ${merged.fontWeight} ${merged.size}px ${merged.font}`.trim();
           result.push(font);
         }
       }
@@ -1946,21 +1997,6 @@ class VectorTileRenderer {
   };
 }
 
-const URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=tomtom${z}&project=${project}&projection=wgs84";
-const PROVIDER_PROJECTS = {
-  tomtom: "TomTom_latest",
-  here: "HERE_latest",
-  openstreetmap: "OSM_latest"
-};
-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
-};
-const MIN_ZOOM = 2;
-const MAX_ZOOM = 18;
-const ATTRIBUTION = '&#169;&nbsp;<a href="https://maptrip.de/" target="_blank">infoware GmbH</a>';
-
 var webfontloader = {exports: {}};
 
 /* Web Font Loader v1.6.28 - (c) Adobe Systems, Google. License: Apache 2.0 */
@@ -2212,7 +2248,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 1,
         to: 19,
         polygon: {
-          color: "#e6e6e6"
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     ],
@@ -2765,7 +2801,9 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 19,
         line: {
           width: 7,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2804,13 +2842,12 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "forward"
+          direction: "forward",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2849,13 +2886,12 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "reverse"
+          direction: "reverse",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -2895,7 +2931,7 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 19,
         line: {
           width: 2,
-          color: "#A5ADB8"
+          color: "#B0B9C4"
         },
         text: {
           size: 12,
@@ -2910,7 +2946,7 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 16,
         line: {
           width: 1,
-          color: "#A5ADB8"
+          color: "#B0B9C4"
         },
         text: {
           size: 12,
@@ -2925,7 +2961,7 @@ const RENDERING_CONFIG_DEFAULT = {
         to: 14,
         line: {
           width: 1,
-          color: "#A5ADB8"
+          color: "#B0B9C4"
         }
       }
     ],
@@ -2934,7 +2970,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 2,
+          width: 3,
           color: "#ffffff"
         },
         text: {
@@ -2966,12 +3002,9 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "forward"
         },
         text: {
@@ -3003,12 +3036,9 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "reverse"
         },
         text: {
@@ -3042,7 +3072,7 @@ const RENDERING_CONFIG_DEFAULT = {
         line: {
           width: 2,
           color: "rgba(1, 1, 1, 0)",
-          dashColor: "#A5ADB8",
+          dashColor: "#B0B9C4",
           dashLength: 6
         },
         text: {
@@ -3056,11 +3086,22 @@ const RENDERING_CONFIG_DEFAULT = {
     ],
     rail: [
       {
-        from: 13,
+        from: 16,
         to: 19,
+        line: {
+          width: 2,
+          color: "#8B8C8C",
+          dashColor: "#FAFAFA",
+          dashLength: 10
+        }
+      },
+      {
+        from: 12,
+        to: 15,
         line: {
           width: 1,
-          color: "#d4d4d4"
+          color: "#8B8C8C",
+          dashLength: 10
         }
       }
     ],
@@ -3069,7 +3110,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 17,
         to: 19,
         line: {
-          width: 5,
+          width: 3,
           color: "#74a8e1"
         },
         text: {
@@ -3084,7 +3125,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 14,
         to: 16,
         line: {
-          width: 3,
+          width: 2,
           color: "#74a8e1"
         },
         text: {
@@ -3099,7 +3140,7 @@ const RENDERING_CONFIG_DEFAULT = {
         from: 10,
         to: 13,
         line: {
-          width: 2,
+          width: 1,
           color: "#74a8e1"
         }
       }
@@ -3333,13 +3374,54 @@ class VectorTileFactory {
       return RENDERING_CONFIG_TRAFFIC;
     }
   }
+  createCanvas(size, padding) {
+    let canvas = document.createElement("canvas");
+    const paddedTileSize = size + 2 * padding;
+    canvas.width = paddedTileSize;
+    canvas.height = paddedTileSize;
+    canvas.style.width = paddedTileSize + "px";
+    canvas.style.height = paddedTileSize + "px";
+    canvas.style.maxWidth = paddedTileSize + "px";
+    canvas.style.maxHeight = paddedTileSize + "px";
+    canvas.style.left = -padding + "px";
+    canvas.style.top = -padding + "px";
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error("Failed to create canvas");
+    }
+    if (typeof context.setTransform === "function") {
+      context.setTransform(1, 0, 0, 1, padding, padding);
+    } else {
+      context.translate(padding, padding);
+    }
+    return canvas;
+  }
+  cropCanvas(source, target) {
+    const ctx = target.getContext("2d");
+    if (ctx) {
+      ctx.drawImage(
+        source,
+        VECTOR_TILE_RENDER_PADDING,
+        VECTOR_TILE_RENDER_PADDING,
+        // position in source
+        VECTOR_TILE_SIZE,
+        VECTOR_TILE_SIZE,
+        // size in source
+        0,
+        0,
+        // position in target
+        VECTOR_TILE_SIZE,
+        VECTOR_TILE_SIZE
+        // size in target
+      );
+    }
+  }
   getJsonTile(z, x, y, token, callback) {
     let maximumIndex = Math.pow(2, z);
     x = (x + 16 * maximumIndex) % maximumIndex;
     y = (y + 16 * maximumIndex) % maximumIndex;
-    let canvas = document.createElement("canvas");
-    canvas.width = 256;
-    canvas.height = 256;
+    let resultCanvas = this.createCanvas(VECTOR_TILE_SIZE, 0);
+    let tempCanvas = this.createCanvas(VECTOR_TILE_SIZE, VECTOR_TILE_RENDER_PADDING);
     let baseMapUrl = this.resolveTileUrl(z, x, y);
     let urls = baseMapUrl ? [baseMapUrl] : [];
     this._additionalUrls.forEach((it) => {
@@ -3348,13 +3430,14 @@ class VectorTileFactory {
       );
     });
     let tileLoadedSuccessfullyCallback = (json) => {
-      this.drawTile(json, z, x, y, canvas);
+      this.drawTile(json, z, x, y, tempCanvas);
+      this.cropCanvas(tempCanvas, resultCanvas);
       if (callback) {
-        callback(canvas);
+        callback(resultCanvas);
       }
     };
     let tile_FailedCallback = () => {
-      this.drawErroredTile(canvas);
+      this.drawErroredTile(resultCanvas);
       if (callback) {
         callback(null);
       }
@@ -3367,7 +3450,7 @@ class VectorTileFactory {
     if (VectorTileFactory._fonts === "active") {
       this._tileLoader.loadNext();
     }
-    return canvas;
+    return resultCanvas;
   }
   /**
    * @private
@@ -3674,7 +3757,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 1,
         to: 19,
         polygon: {
-          color: "#e6e6e6"
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     ],
@@ -3731,7 +3814,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
           width: 1
         },
         polygon: {
-          color: "#c5c5c5"
+          color: "#BBC5CF"
         },
         text: {
           size: 14,
@@ -4227,7 +4310,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         to: 19,
         line: {
           width: 7,
-          color: "#ffffff"
+          color: "#ffffff",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4266,13 +4351,12 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "forward"
+          direction: "forward",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4311,13 +4395,12 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 7,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
-          direction: "reverse"
+          direction: "reverse",
+          outlineColor: "#cccccc",
+          outlineWidth: 1
         },
         text: {
           size: 12,
@@ -4356,7 +4439,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 4,
+          width: 2,
           color: "#cccccc"
         },
         text: {
@@ -4394,7 +4477,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 2,
+          width: 3,
           color: "#ffffff"
         },
         text: {
@@ -4426,12 +4509,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "forward"
         },
         text: {
@@ -4463,12 +4543,9 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 10,
+          width: 3,
           color: "#ffffff",
           url: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93IiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNiIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwIDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojOUI5QTlBO308L3N0eWxlPjxwb2x5bGluZSBjbGFzcz0ic3QwIiBwb2ludHM9IjUuOSw1LjEgOS4xLDMgNS45LDAuOSIvPjxsaW5lIGNsYXNzPSJzdDAiIHgxPSI5LjEiIHkxPSIzIiB4Mj0iMC45IiB5Mj0iMyIvPjwvc3ZnPg==",
-          height: 6,
-          dx: -5,
-          dy: -3,
           direction: "reverse"
         },
         text: {
@@ -4502,7 +4579,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         line: {
           width: 2,
           color: "rgba(1, 1, 1, 0)",
-          dashColor: "#A5ADB8",
+          dashColor: "#cccccc",
           dashLength: 6
         },
         text: {
@@ -4516,11 +4593,22 @@ const RENDERING_CONFIG_GRAYSCALE = {
     ],
     rail: [
       {
-        from: 13,
+        from: 16,
         to: 19,
+        line: {
+          width: 2,
+          color: "#8B8C8C",
+          dashColor: "#FAFAFA",
+          dashLength: 10
+        }
+      },
+      {
+        from: 12,
+        to: 15,
         line: {
           width: 1,
-          color: "#d4d4d4"
+          color: "#8B8C8C",
+          dashLength: 10
         }
       }
     ],
@@ -4529,7 +4617,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 17,
         to: 19,
         line: {
-          width: 5,
+          width: 3,
           color: "#9e9e9e"
         },
         text: {
@@ -4544,7 +4632,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 14,
         to: 16,
         line: {
-          width: 3,
+          width: 2,
           color: "#9e9e9e"
         },
         text: {
@@ -4559,7 +4647,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
         from: 10,
         to: 13,
         line: {
-          width: 2,
+          width: 1,
           color: "#9e9e9e"
         }
       }
@@ -4588,6 +4676,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
 class MapReleaseFetcher {
   _token;
   _tomtom = null;
+  _orbis = null;
   _osm = null;
   _here = null;
   constructor(token) {
@@ -4597,24 +4686,31 @@ class MapReleaseFetcher {
     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(url);
+        this._tomtom = this.fetchAndExtractRelease(provider, url);
       }
       return this._tomtom;
+    }
+    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);
+      }
+      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(url);
+        this._here = this.fetchAndExtractRelease(provider, url);
       }
       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(url);
+        this._osm = this.fetchAndExtractRelease(provider, url);
       }
       return this._osm;
     }
   }
-  async fetchAndExtractRelease(url) {
+  async fetchAndExtractRelease(provider, url) {
     return new Promise((resolve, reject) => {
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = () => {
@@ -4623,7 +4719,7 @@ class MapReleaseFetcher {
           const text = new TextDecoder("latin1").decode(xhr.response);
           const textString = this.extractTargetString(text);
           const formattedString = textString.split("Q").join(" Q");
-          const release = ` ${formattedString}`;
+          const release = ` ${PROVIDER_NAMES[provider]} ${formattedString}`;
           resolve(release);
         } else {
           reject(`Error fetching: ${xhr.status}`);
@@ -19264,10 +19360,12 @@ class MapTripLeafletGridLayer extends L$1.GridLayer {
     const eventProvider = event.layer.options.provider;
     let newProvider;
     if (eventProvider) {
-      if (eventProvider.toLowerCase() === "opensreetmap") {
+      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 {
@@ -21941,7 +22039,7 @@ function getPointResolution(projection, resolution, point, units) {
     pointResolution = getter(resolution, point);
   } else {
     const projUnits = projection.getUnits();
-    if ((projUnits == 'degrees' && true) || units == 'degrees') {
+    if ((projUnits == 'degrees' && !units) || units == 'degrees') {
       pointResolution = resolution;
     } else {
       // Estimate point resolution by transforming the center pixel to EPSG:4326,