@maptrip/map-tiles 1.3.2 → 1.4.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
@@ -128,7 +134,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";
@@ -164,7 +170,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 +185,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 +195,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 +211,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 +241,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 +264,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],
@@ -360,6 +351,9 @@ class VectorTileRenderer {
           }
         }
       }
+      else {
+        console.log("no renderer for kind " + kind);
+      }
     }
   }
 
@@ -435,17 +429,25 @@ class VectorTileRenderer {
         var part = coordinates[j];
 
         context.globalAlpha = merged.opacity;
-        context.beginPath();
 
+        /// XXX edit here
+        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 +468,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 +488,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 +499,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 +514,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 +618,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 });
@@ -755,14 +748,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 +895,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;
@@ -1010,12 +996,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 +1031,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 +1064,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 +1130,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;

package/lib/util/MapReleaseFetcher.ts

@@ -1,7 +1,10 @@
+import { PROVIDER_NAMES } from "../core/constants.js"
+
 export class MapReleaseFetcher {
   private _token: string;
 
   private _tomtom: Promise<string | null> | null = null;
+  private _orbis: Promise<string | null> | null = null;
   private _osm: Promise<string | null> | null = null;
   private _here: Promise<string | null> | null = null;
 
@@ -14,27 +17,34 @@ export class MapReleaseFetcher {
       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: string): Promise<string | null> {
+  async fetchAndExtractRelease(provider: string, url: string): Promise<string | null> {
     return new Promise((resolve, reject) => {
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = () => {
@@ -44,7 +54,7 @@ export 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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptrip/map-tiles",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "API to use MapTrip map tiles in other map APIs",
   "keywords": [
     "map",
@@ -21,7 +21,8 @@
     "dev": "vite src",
     "prepublish": "tsc",
     "build": "tsc && vite build",
-    "publish": "npm update && tsc && vite build && npm login --scope=@maptrip && npm publish"
+    "check-updates": "npm outdated || echo 'All dependencies are up to date'",
+    "publish": "npm run check-updates && vite build && npm login --scope=@maptrip && npm publish"
   },
   "devDependencies": {
     "@googlemaps/js-api-loader": "^1.16.2",