@maptrip/map-tiles 1.3.3 → 1.5.0

package/dist/util/MapReleaseFetcher.d.ts

@@ -1,10 +1,11 @@
 export declare class MapReleaseFetcher {
     private _token;
     private _tomtom;
+    private _orbis;
     private _osm;
     private _here;
     constructor(token: string);
     getRelease(provider: string): Promise<string | null | undefined>;
-    fetchAndExtractRelease(url: string): Promise<string | null>;
+    fetchAndExtractRelease(provider: string, url: string): Promise<string | null>;
     private extractTargetString;
 }

package/lib/api-extensions/leaflet/MapTripLeafletGridLayer.ts

@@ -119,10 +119,12 @@ class MapTripLeafletGridLayer extends L.GridLayer {
     const eventProvider = event.layer.options.provider;
     let newProvider: string;
     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 {

package/lib/core/VectorTileFactory.ts

@@ -6,6 +6,8 @@ import {
   URL_TEMPLATE,
   PROVIDER_PROJECTS,
   PROVIDER_TRAFFIC,
+  VECTOR_TILE_SIZE,
+  VECTOR_TILE_RENDER_PADDING
 } from "./constants.js";
 
 import WebFont from "webfontloader";
@@ -163,6 +165,49 @@ class VectorTileFactory {
     }
   }
 
+  private createCanvas(size: number, padding: number): HTMLCanvasElement {
+    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;
+  }
+
+  private cropCanvas(source: HTMLCanvasElement, target: HTMLCanvasElement): void {
+    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
+      );
+    }
+  }
+
   public getJsonTile(
     z: number,
     x: number,
@@ -174,9 +219,8 @@ class VectorTileFactory {
     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] : [];
@@ -192,15 +236,16 @@ class VectorTileFactory {
     });
 
     let tileLoadedSuccessfullyCallback = (json: GeoJSON.Feature) => {
-      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);
@@ -217,7 +262,7 @@ class VectorTileFactory {
       this._tileLoader.loadNext();
     }
 
-    return canvas;
+    return resultCanvas;
   }
 
   /**

package/lib/core/VectorTileRenderer.ts

@@ -6,7 +6,9 @@ import {
   MultiPolygon,
   GeoJsonProperties,
 } from "geojson";
+
 import { CollisionDetector } from "./CollisionDetector.js";
+
 import {
   Boundaries,
   ImageStyle,
@@ -19,7 +21,11 @@ import {
   Vertex,
 } from "../types/interfaces.js";
 
-import { RENDERING_CONFIG} from "../types/interfaces.js"
+import {
+  VECTOR_TILE_SIZE
+} from "./constants.js"
+
+import { RENDERING_CONFIG } from "../types/interfaces.js"
 
 class VectorTileRenderer {
   private _styles: RENDERING_CONFIG;
@@ -38,7 +44,7 @@ class VectorTileRenderer {
     context: CanvasRenderingContext2D
   ): void {
     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
@@ -73,6 +79,7 @@ class VectorTileRenderer {
       );
 
     this.drawTilePhase(polygons, z, boundaries, context, "areas", collisions);
+    // add phase areasOutline here if polygon outlines should be rendered
     this.drawPolylineLayers(lines, z, boundaries, context, "", collisions);
     this.drawTilePhase(points, z, boundaries, context, "texts", collisions);
     this.drawTilePhase(lines, z, boundaries, context, "lineTexts", collisions);
@@ -113,6 +120,14 @@ class VectorTileRenderer {
         "linesOutline",
         collisions
       );
+    }
+
+    for (let i = 0; i < rank.length; i++) {
+      // select all lines with this sort rank
+      let currentRank = lines.filter(
+        (it) => parseInt(it.properties!.sort_rank) === rank[i]
+      );
+
       this.drawTilePhase(
         currentRank,
         z,
@@ -123,12 +138,12 @@ class VectorTileRenderer {
       );
     }
   }
-
+  
   drawErroredTile(canvas: HTMLCanvasElement): void {
     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";
@@ -164,7 +179,7 @@ class VectorTileRenderer {
       const rendererName = this._styles.layers[kind];
       const renderer = rendererName
         ? //@ts-ignore
-          this._styles?.renderers[rendererName]
+        this._styles?.renderers[rendererName]
         : undefined;
 
       if (renderer) {
@@ -179,10 +194,7 @@ class VectorTileRenderer {
             if (geometry.type === "Polygon") {
               const polygonGeometry = geometry as Polygon;
               const coordinates = polygonGeometry.coordinates;
-              if (
-                (phase === "areasOutline" || phase === "areas") &&
-                renderer[j].polygon
-              ) {
+              if ((phase === "areasOutline" || phase === "areas") && renderer[j].polygon) {
                 this.drawPolygon(
                   coordinates,
                   layer[i].properties,
@@ -192,10 +204,7 @@ class VectorTileRenderer {
                   context,
                   phase
                 );
-              } else if (
-                phase === "areaTexts" &&
-                renderer[j].text !== undefined
-              ) {
+              } else if (phase === "areaTexts" && renderer[j].text !== undefined) {
                 this.drawPolygon(
                   coordinates,
                   layer[i].properties,
@@ -211,10 +220,7 @@ class VectorTileRenderer {
             } else if (geometry.type === "MultiPolygon") {
               const multiPolygonGeometry = geometry as MultiPolygon;
               const coordinates = multiPolygonGeometry.coordinates;
-              if (
-                (phase === "areasOutline" || phase === "areas") &&
-                renderer[j].polygon
-              ) {
+              if ((phase === "areasOutline" || phase === "areas") && renderer[j].polygon) {
                 for (let k = 0; k < coordinates.length; k++) {
                   this.drawPolygon(
                     coordinates[k],
@@ -244,10 +250,7 @@ class VectorTileRenderer {
             } else if (geometry.type === "LineString") {
               const lineStringGeometry = geometry as LineString;
               const coordinates = lineStringGeometry.coordinates;
-              if (
-                (phase === "linesOutline" || phase === "lines") &&
-                renderer[j].line
-              ) {
+              if ((phase === "linesOutline" || phase === "lines") && renderer[j].line) {
                 this.drawPolyline(
                   coordinates,
                   layer[i].properties,
@@ -270,10 +273,7 @@ class VectorTileRenderer {
             } else if (geometry.type === "MultiLineString") {
               const multiLineStringGeometry = geometry as MultiLineString;
               const coordinates = multiLineStringGeometry.coordinates;
-              if (
-                (phase === "linesOutline" || phase === "lines") &&
-                renderer[j].line
-              ) {
+              if ((phase === "linesOutline" || phase === "lines") && renderer[j].line) {
                 for (let k = 0; k < coordinates.length; k++) {
                   this.drawPolyline(
                     coordinates[k],
@@ -315,12 +315,18 @@ class VectorTileRenderer {
                       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;
+
+                      // Stadsroutes are major roads in some cities in the Netherlands and start with s.
+                      // Adding them here will render them like Bundesstraßen in Germany.
+                      // If country-dependent rendering is added, it should be a white box with black border and text.
+
+                      if (letter === "A" || letter === "B" || letter === "s") {
+                        text = letter === "A" || letter === "B" ? number : letter + number;
+
                         this.drawImage(
                           coordinates,
                           boundaries,
@@ -360,6 +366,9 @@ class VectorTileRenderer {
           }
         }
       }
+      else {
+        console.log("no renderer for kind " + kind);
+      }
     }
   }
 
@@ -435,17 +444,24 @@ class VectorTileRenderer {
         var part = coordinates[j];
 
         context.globalAlpha = merged.opacity;
-        context.beginPath();
 
+        if ('areas' !== phase || j === 0) {
+          // when rendering areas, only the first part of a polygon should begin a path
+          // (otherwise especially islands are clipped on some zoom levels)
+          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: { x: number; y: number }[] = [];
 
         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: x, y: y });
 
@@ -466,7 +482,7 @@ class VectorTileRenderer {
           }
 
           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(
@@ -486,7 +502,7 @@ class VectorTileRenderer {
             context.fillStyle = merged.color;
           }
 
-          context.fill();
+          context.fill('evenodd');
         } else if ("areaTexts" === phase) {
           if (geoJsonProperties && geoJsonProperties.NAME) {
             // skip texts which already are in this tile
@@ -497,14 +513,8 @@ class VectorTileRenderer {
             let 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}`;
+
             context.textAlign = "left";
             context.textBaseline = "top";
 
@@ -518,7 +528,7 @@ class VectorTileRenderer {
             let h = merged.size!;
 
             // skip texts outside a tile
-            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;
             }
 
@@ -622,15 +632,12 @@ class VectorTileRenderer {
     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: x, y: y });
@@ -682,48 +689,69 @@ class VectorTileRenderer {
 
     // draw images on the line (e.g. arrows for one-way roads)
     if (merged.url && this._images[merged.url]) {
-      var desired = 40; // XXX config
-      var distance = Math.round(desired / 2);
+      const desiredDistance: number = 40;
+      const margin: number = Math.round(desiredDistance / 2);
+
+      let totalLength = 0;
+      for (let i = 0; i < points.length - 1; i++) {
+        totalLength += Math.hypot(
+          points[i + 1].x - points[i].x,
+          points[i + 1].y - points[i].y
+        );
+      }
+
+      let distance: number = margin;
+      let traveled: number = 0;
 
       for (var i = 0; i < points.length - 1; i++) {
         // calculate angle of this section of the line
-        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: number = points[i + 1].x - points[i].x;
+        const dy: number = points[i + 1].y - points[i].y;
+        let angle: number = Math.atan2(dy, dx);
 
         if (merged.direction != "reverse") {
           angle = angle + Math.PI;
         }
 
         // now calculate equidistant points on the polyline
-        var distanceToNext = Math.sqrt(dx * dx + dy * dy);
+        const distanceToNext: number = Math.sqrt(dx * dx + dy * dy);
         while (distance < distanceToNext) {
           // there are more points on this section of the line
-          var f = distance / distanceToNext;
 
-          var x = points[i].x + f * dx;
-          var y = points[i].y + f * dy;
+          if (traveled + distance <= totalLength - margin) {
 
-          context.save();
+            const f: number = distance / distanceToNext;
 
-          context.translate(x, y);
-          context.rotate(angle);
-          context.translate(-x, -y);
+            const x: number = points[i].x + f * dx;
+            const y: number = points[i].y + f * dy;
+            
+            const size: number = Math.max(12, 1.5 * merged.width);
 
-          context.drawImage(
-            this._images[merged.url],
-            x + merged.dx,
-            y + merged.dy,
-            Number(merged.width),
-            Number(merged.height)
-          );
+            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();
+              context.restore();
+            }
 
-          distance += desired;
+          }
+          distance += desiredDistance;
         }
 
-        distance = (desired - (distanceToNext - distance)) % desired;
+        traveled += distanceToNext;
+        distance -= distanceToNext;
+        // distance = (desiredDistance - (distanceToNext - distance)) % desiredDistance;
       }
     }
   }
@@ -755,14 +783,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) {
@@ -909,8 +930,8 @@ class VectorTileRenderer {
             positions.length == 0
               ? 0
               : Math.abs(
-                  positions[positions.length - 1].angle - position.angle
-                );
+                positions[positions.length - 1].angle - position.angle
+              );
 
           if (!collision && deltaAngle < Math.PI / 6) {
             widthUsed += letterWidth;
@@ -957,7 +978,7 @@ class VectorTileRenderer {
     outline: number,
     context: CanvasRenderingContext2D
   ): void {
-    var width = context.measureText(letter).width + outline; // XXX
+    var width = context.measureText(letter).width + outline;
 
     var x = position.x + 0.5 * Math.cos(position.angle) * width;
     var y = position.y + 0.5 * Math.sin(position.angle) * width;
@@ -1010,12 +1031,12 @@ 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);
@@ -1045,26 +1066,19 @@ class VectorTileRenderer {
   ): boolean {
     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;
+    context.font = `${merged.fontStyle} ${merged.fontWeight} ${merged.size}px ${merged.font}`;
 
-    var w = context.measureText(name).width;
-    var h = merged.size; // XXX ???
+    const w = context.measureText(name).width;
+    const h = merged.size; // XXX ???
 
     x = x - w / 2; // center on x
 
@@ -1085,23 +1099,16 @@ class VectorTileRenderer {
     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; // XXX ???
@@ -1158,15 +1165,8 @@ 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);
         }
       }

package/lib/core/constants.ts

@@ -1,13 +1,21 @@
 export const URL_TEMPLATE =
   "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=tomtom${z}&project=${project}&projection=wgs84";
 
-
+  
 export const PROVIDER_PROJECTS: { [key: string]: string } = {
   tomtom: "TomTom_latest",
+  orbis: "Orbis_latest",
   here: "HERE_latest",
   openstreetmap: "OSM_latest",
 };
 
+export const PROVIDER_NAMES: { [key: string]: string } = {
+  tomtom: "TomTom",
+  orbis: "TomTom Orbis",
+  here: "HERE",
+  openstreetmap: "OpenStreetMap",
+};
+
 export const PROVIDER_TRAFFIC: { [key: string]: string | null } = {
   tomtom:
     "https://v0.maptrip.de/tiles?project=TrafficMobileTomTom_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic${z}&projection=wgs84",
@@ -20,3 +28,6 @@ export const MAX_ZOOM = 18;
 
 export const ATTRIBUTION =
   '&#169;&nbsp;<a href="https://maptrip.de/" target="_blank">infoware GmbH</a>';
+
+export const VECTOR_TILE_SIZE = 256;
+export const VECTOR_TILE_RENDER_PADDING = 32;