@maptrip/map-tiles 1.3.2 → 1.4.0

package/README.md

@@ -38,6 +38,7 @@ The response body will include the key `token` in the schema:
 ```
 
 ## Integration in your mapping API
+To see the subsequent code examples in action, visit our [map tiles demo page](https://demo.infoware.de/examples/npm/map-tiles/).
 
 ### LeafletJS
 
@@ -187,7 +188,7 @@ Please refer to the documentation of your API to see how you can implement your
 ## Map Data Providers
 
 The maps can be rendered with map data from various providers. To do this, set the property `provider`
-to one of the strings `TomTom`, `HERE` or `OpenStreetmap` when creating a factory:
+to one of the strings `TomTom`, `Orbis`, `HERE` or `OpenStreetmap` when creating a factory:
 
 ```js
 const factory = VectorTileFactory.createFactory({
@@ -235,7 +236,7 @@ You can specify a third parameter with properties when creating the factory. The
 
 | Property          | Description                                                                                       | Default Value            |
 | ----------------- | ------------------------------------------------------------------------------------------------- | ------------------------ |
-| provider          | The map data provider (`TomTom`, `HERE` or `OpenStreetmap`)                                       | OpenStreetmap            |
+| provider          | The map data provider (`TomTom`, `Orbis`, `HERE` or `OpenStreetmap`)                              | OpenStreetmap            |
 | baseMap           | Set to `false` for a traffic overlay which can be used on top of e.g. an aerial view              | true                     |
 | traffic           | Add traffic flows to the map tiles (only available for TomTom and HERE maps)                      | false                    |
 | timeout           | Load timeout for tiles in milliseconds. Increase this if you have a very slow internet connection | 5000                     |
@@ -277,6 +278,12 @@ To use them, you mapping API has to be able to use both base layers and overlays
 
 ## History
 
+- 1.4.0:
+  - Added map data provider `Orbis`
+  - Added map data provider name to attribution
+  - Fixed rendering of polygons with rings (esp. small islands)
+  - Updated dependencies with security vulnerabilities
+- 1.3.3: Added a link for demo apps to README.md
 - 1.3.2: Updated dependencies with security vulnerabilities
 - 1.3.1: Updated all all providers to use the latest build of the project
 - 1.3.0: Added map release data for Leaflet and OpenLayers map attributions

package/dist/core/VectorTileFactory.d.ts

@@ -26,6 +26,8 @@ declare class VectorTileFactory {
     private static getUrlTemplatesForBaseLayer;
     private static getUrlTemplatesForTrafficLayer;
     private static getRenderingConfig;
+    private createCanvas;
+    private cropCanvas;
     getJsonTile(z: number, x: number, y: number, token: string, callback?: SuccessCallback): HTMLCanvasElement;
     /**
      * @private

package/dist/core/constants.d.ts

@@ -2,9 +2,14 @@ export declare const URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&ti
 export declare const PROVIDER_PROJECTS: {
     [key: string]: string;
 };
+export declare const PROVIDER_NAMES: {
+    [key: string]: string;
+};
 export declare const PROVIDER_TRAFFIC: {
     [key: string]: string | null;
 };
 export declare const MIN_ZOOM = 2;
 export declare const MAX_ZOOM = 18;
 export declare const ATTRIBUTION = "&#169;&nbsp;<a href=\"https://maptrip.de/\" target=\"_blank\">infoware GmbH</a>";
+export declare const VECTOR_TILE_SIZE = 256;
+export declare const VECTOR_TILE_RENDER_PADDING = 32;

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"
@@ -1173,7 +1197,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";
@@ -1366,6 +1390,8 @@ class VectorTileRenderer {
             }
           }
         }
+      } else {
+        console.log("no renderer for kind " + kind);
       }
     }
   }
@@ -1417,11 +1443,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 +1470,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 +1487,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 +1495,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 +1504,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 +1584,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 });
       }
@@ -1634,7 +1665,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 +1839,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 +1863,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 +1881,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 +1928,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 +1977,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 */
@@ -3333,13 +3349,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 +3405,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 +3425,7 @@ class VectorTileFactory {
     if (VectorTileFactory._fonts === "active") {
       this._tileLoader.loadNext();
     }
-    return canvas;
+    return resultCanvas;
   }
   /**
    * @private
@@ -4588,6 +4646,7 @@ const RENDERING_CONFIG_GRAYSCALE = {
 class MapReleaseFetcher {
   _token;
   _tomtom = null;
+  _orbis = null;
   _osm = null;
   _here = null;
   constructor(token) {
@@ -4597,24 +4656,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 +4689,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 +19330,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 +22009,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,