@maptrip/map-tiles 1.4.0 → 1.6.0

package/dist/util/MapReleaseFetcher.d.ts

@@ -5,7 +5,8 @@ export declare class MapReleaseFetcher {
     private _osm;
     private _here;
     constructor(token: string);
-    getRelease(provider: string): Promise<string | null | undefined>;
-    fetchAndExtractRelease(provider: string, url: string): Promise<string | null>;
+    getRelease(provider?: string): Promise<string | null>;
+    private getUrl;
+    fetchAndExtractRelease(provider: string): Promise<string | null>;
     private extractTargetString;
 }

package/dist/util/VectorTileUtils.d.ts

@@ -0,0 +1,4 @@
+declare class VectorTileUtils {
+    static getAttribution(token: string, provider?: string, attribution?: string, releaseDate?: boolean): Promise<string>;
+}
+export { VectorTileUtils };

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

@@ -1,20 +1,19 @@
 import L from "leaflet";
 import { VectorTileFactory } from "../../core/VectorTileFactory.js";
-import { MIN_ZOOM, MAX_ZOOM, ATTRIBUTION } from "../../core/constants.js";
-import { MapReleaseFetcher } from "../../util/MapReleaseFetcher.js";
+import { VectorTileUtils } from "../../util/VectorTileUtils.js"
 import type { PointXY } from "../../types/interfaces.js";
+import { MIN_ZOOM, MAX_ZOOM } from "../../core/constants.js";
 import { RENDERING_CONFIG } from "../../types/interfaces.js";
 
 class MapTripLeafletGridLayer extends L.GridLayer {
-  MIN_ZOOM = MIN_ZOOM;
-  MAX_ZOOM = MAX_ZOOM;
+  static attributions: string[] = [];
   token: string;
   factory: VectorTileFactory;
-  releaseFetcher: MapReleaseFetcher;
-  provider: string;
-  attribution: string;
-  release: string;
-  releaseDate: boolean;
+  provider?: string;
+  releaseDate?: boolean;
+  currentAttribution?: string;
+  private attachedMap?: L.Map;
+  private customAttribution?: string;
 
   constructor(options: {
     provider?: string;
@@ -30,110 +29,64 @@ class MapTripLeafletGridLayer extends L.GridLayer {
     maxZoom?: number;
     releaseDate?: boolean;
   }) {
-    super(options as L.GridLayerOptions);
-    this.token = options.token!;
-    this.provider = options.provider
-      ? options.provider?.toLowerCase()
-      : "openstreetmap";
-
-    this.options.attribution = options.attribution
-      ? options.attribution
-      : ATTRIBUTION;
-    this.releaseFetcher = new MapReleaseFetcher(this.token);
-    this.release = "";
-    this.attribution = "";
-
-    this.releaseDate = options.releaseDate ? options.releaseDate : false;
-    if (this.releaseDate) {
-      this.initializeAttribution();
-      this.on("add", () => {
-        if (this._map) {
-          this._map.on("baselayerchange", (event) =>
-            this.onBaseLayerChange(event)
-          );
-        }
-      });
-    }
+    super({
+      ...options,
+      attribution: '',
+      minZoom: Math.max(options.minZoom ? options.minZoom : MIN_ZOOM, MIN_ZOOM),
+      maxZoom: Math.min(options.maxZoom ? options.maxZoom : MAX_ZOOM, MAX_ZOOM)
+    });
 
-    //@ts-expect-error picking up LayerOptions rather than GridLayerOptions
-    this.options.minZoom = options.minZoom
-      ? Math.max(this.MIN_ZOOM, options.minZoom)
-      : this.MIN_ZOOM;
-    //@ts-expect-error
-    this.options.maxZoom = options.maxZoom
-      ? Math.min(this.MAX_ZOOM, options.maxZoom)
-      : this.MAX_ZOOM;
+    this.token = options.token!;
+    this.provider = options.provider;
+    this.customAttribution = options.attribution;
+    this.releaseDate = options.releaseDate;
+    this.currentAttribution = undefined;
+
+    void VectorTileUtils.getAttribution(this.token, this.provider, this.customAttribution, this.releaseDate)
+    .then(attribution => {
+      this.updateAttribution(attribution);
+    }).catch(error => {
+      console.error('Unable to add MapTrip attribution', error);
+    });
 
     this.factory = VectorTileFactory.createFactory(options);
   }
 
-  createTile(coords: PointXY) {
-    return this.factory.getJsonTile(coords.z!, coords.x, coords.y, this.token);
+  override onAdd(map: L.Map): this {
+    this.attachedMap = map;
+    return super.onAdd(map);
   }
 
-  private async initializeAttribution() {
-    await this.setRelease();
-    await this.setAttribution();
+  override onRemove(map: L.Map): this {
+    const result = super.onRemove(map);
+    this.attachedMap = undefined;
+    return result;
   }
 
-  // Set an original release
-  private async setRelease() {
-    const release = await this.releaseFetcher.getRelease(this.provider);
-    if (release) {
-      this.release = release;
-    }
+  createTile(coords: PointXY) {
+    return this.factory.getJsonTile(coords.z!, coords.x, coords.y, this.token);
   }
 
-  private async setAttribution() {
-    if (!this._map) return;
-    try {
-      // check if base layer changes to a new provider
-      const newRelease = await this.releaseFetcher.getRelease(this.provider);
-      if (newRelease && newRelease !== this.release) {
-        this.release = newRelease;
-      }
+  private updateAttribution(attribution: string): void {
+    const previous = this.options.attribution ?? '';
 
-      // remove the original attribution in order to append the release date
-      this._map.attributionControl.removeAttribution(this.options.attribution!);
-      this.attribution = `${this.options.attribution} ${this.release}`;
-      this._map.attributionControl.addAttribution(this.attribution!);
-
-      // remove the attribution with release date from map for instances where different layers have different preferences for setting release date
-      const map = this._map;
-      this._map.addEventListener("baselayerchange", () => {
-        map.attributionControl.removeAttribution(this.attribution);
-      });
-    } catch (error) {
-      console.error("Error fetching release version: ", error);
-    }
-  }
-
-  private async onBaseLayerChange(event: L.LayersControlEvent) {
-    if (!this._map) {
+    if (previous === attribution) {
       return;
     }
 
-    this._map.attributionControl.removeAttribution(this.attribution);
+    const map = this.attachedMap;
+    const control = map?.attributionControl;
 
-    //@ts-expect-error doesn't recognize provider in options object
-    const eventProvider = event.layer.options.provider;
-    let newProvider: string;
-    if (eventProvider) {
-      if (eventProvider.toLowerCase() === "openstreetmap") {
-        newProvider = "openstreetmap";
-      } else if (eventProvider.toLowerCase() === "tomtom") {
-        newProvider = "tomtom";
-      } else if (eventProvider.toLowerCase() === "orbis") {
-        newProvider = "orbis";
-      } else if (eventProvider.toLowerCase() === "here") {
-        newProvider = "here";
-      } else {
-        newProvider = "openstreetmap";
-      }
+    // remove existing attribution
+    if (control && map.hasLayer(this)) {
+      control.removeAttribution(previous);
+    }
 
-      this.provider = newProvider;
+    // set attribution and update control
+    this.options.attribution = attribution;
 
-      await this.setAttribution();
+    if (control && map.hasLayer(this)) {
+      control.addAttribution(attribution);
     }
   }
 }

package/lib/api-extensions/maplibre/MapLibreStyleFactory.ts

@@ -0,0 +1,114 @@
+import { addProtocol, type StyleSpecification } from 'maplibre-gl';
+
+import { VectorTileFactory } from "../../core/VectorTileFactory.js";
+import { VectorTileUtils } from "../../util/VectorTileUtils.js"
+import { MIN_ZOOM, MAX_ZOOM } from "../../core/constants.js";
+import { RENDERING_CONFIG } from "../../types/interfaces.js";
+
+class MapLibreStyleFactory {
+
+    private protocolId = 0;
+
+    public createMapTripStyle(options: {
+        provider?: string;
+        baseMap?: boolean;
+        traffic?: boolean;
+        timeout?: number;
+        parallelDownloads?: number;
+        detourProfile?: string;
+        renderingConfig?: RENDERING_CONFIG;
+        token?: string;
+        attribution?: string;
+        minZoom?: number;
+        maxZoom?: number;
+        releaseDate?: boolean;
+    }): StyleSpecification {
+
+        const token = options.token!;
+        const factory = VectorTileFactory.createFactory(options);
+        const protocol = `maptrip${++this.protocolId}`;
+        let attributionPromise: Promise<string> | undefined;
+
+        addProtocol(protocol, async (params) => {
+
+            if (params.url === `${protocol}://metadata`) {
+
+                const attribution = await (
+                    attributionPromise ??= VectorTileUtils.getAttribution(token, options.provider, options.attribution, options.releaseDate)
+                );
+
+                return {
+                    data: {
+                        tilejson: '2.2.0',
+                        tileSize: 256,
+                        tiles: [`${protocol}://{z}/{x}/{y}`],
+                        minzoom: Math.max(options.minZoom ? options.minZoom : MIN_ZOOM, MIN_ZOOM),
+                        maxzoom: Math.min(options.maxZoom ? options.maxZoom : MAX_ZOOM, MAX_ZOOM),
+                        attribution: attribution
+                    }
+                };
+            }
+
+            const match = params.url.match(
+                /^maptrip\d+:\/\/(\d+)\/(\d+)\/(\d+)$/
+            );
+
+            if (!match) {
+                throw new Error(`Invalid tile URL: ${params.url}`);
+            }
+
+            const z = Number(match[1]);
+            const x = Number(match[2]);
+            const y = Number(match[3]);
+
+            const canvas = await this.getTileCanvasAsync(factory, z, x, y, token);
+
+            return {
+                data: await createImageBitmap(canvas)
+            };
+        });
+
+        return {
+            version: 8,
+            name: "MapTrip Map",
+            sources: {
+                maptrip: {
+                    type: 'raster',
+                    url: `${protocol}://metadata`,
+                }
+            },
+            layers: [
+                {
+                    id: 'maptrip-layer',
+                    type: 'raster',
+                    source: 'maptrip'
+                }
+            ],
+        }
+    };
+
+    private getTileCanvasAsync(
+        factory: VectorTileFactory,
+        z: number,
+        x: number,
+        y: number,
+        token: string
+    ): Promise<HTMLCanvasElement> {
+        return new Promise((resolve, reject) => {
+
+            try {
+                const canvas = factory.getJsonTile(z, x, y, token, () => {
+                    resolve(canvas);
+                });
+
+                if (!canvas) {
+                    reject(new Error('getJsonTile returned no canvas'));
+                }
+            } catch (err) {
+                reject(err);
+            }
+        });
+    }
+}
+
+export { MapLibreStyleFactory };

package/lib/core/VectorTileFactory.ts

@@ -7,7 +7,8 @@ import {
   PROVIDER_PROJECTS,
   PROVIDER_TRAFFIC,
   VECTOR_TILE_SIZE,
-  VECTOR_TILE_RENDER_PADDING
+  VECTOR_TILE_RENDER_PADDING,
+  DEFAULT_PROVIDER
 } from "./constants.js";
 
 import WebFont from "webfontloader";
@@ -367,7 +368,7 @@ class VectorTileFactory {
   }
 
   static DEFAULT_PROPERTIES = {
-    provider: "OpenStreetmap",
+    provider: DEFAULT_PROVIDER,
     baseMap: true,
     traffic: false,
   };

package/lib/core/VectorTileRenderer.ts

@@ -43,6 +43,10 @@ class VectorTileRenderer {
     boundaries: Boundaries,
     context: CanvasRenderingContext2D
   ): void {
+    
+    context.lineJoin = 'round';
+    context.lineCap = 'round';
+    
     context.fillStyle = this.getBackgroundColor(z);
     context.fillRect(0, 0, VECTOR_TILE_SIZE, VECTOR_TILE_SIZE);
 
@@ -79,6 +83,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);
@@ -119,6 +124,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,
@@ -306,12 +319,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,
@@ -430,7 +449,6 @@ class VectorTileRenderer {
 
         context.globalAlpha = merged.opacity;
 
-        /// 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)
@@ -438,11 +456,11 @@ class VectorTileRenderer {
         }
 
         const width = boundaries.max.lon - boundaries.min.lon;
-	      const height = boundaries.max.lat - boundaries.min.lat;
+        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++) {
@@ -636,6 +654,37 @@ class VectorTileRenderer {
     return points;
   }
 
+  /**
+   * @private
+   */
+  translatePolyline(points: { x: number; y: number }[], delta: number): void {
+    for (let i = 0; i < points.length - 1; i++) {
+      const direction = {
+        x: points[i + 1].x - points[i].x,
+        y: points[i + 1].y - points[i].y
+      };
+
+      const length = Math.sqrt(Math.pow(direction.x, 2) + Math.pow(direction.y, 2));
+
+      const normal = {
+        x: direction.y / length,
+        y: -direction.x / length
+      };
+
+      points[i] = {
+        x: points[i].x - delta * normal.x,
+        y: points[i].y - delta * normal.y
+      };
+
+      if (i === points.length - 2) {
+        points[i + 1] = {
+          x: points[i + 1].x - delta * normal.x,
+          y: points[i + 1].y - delta * normal.y
+        };
+      }
+    }
+  }
+
   /**
    * @private
    */
@@ -650,9 +699,15 @@ class VectorTileRenderer {
     var merged = { ...VectorTileRenderer.DEFAULT_STYLE.LINE, ...style };
     context.globalAlpha = merged.opacity;
 
+    let points = this.projectCoordinates(coordinates, boundaries);
+
+    if (merged.delta > 0) {
+      // translate traffic flow polylines to the right
+      this.translatePolyline(points, merged.delta);
+    }
+
     if ("linesOutline" === phase) {
       if (merged.outlineColor && merged.outlineWidth) {
-        let points = this.projectCoordinates(coordinates, boundaries);
         this.drawPath(
           points,
           merged.outlineColor,
@@ -664,7 +719,6 @@ class VectorTileRenderer {
       return;
     }
 
-    let points = this.projectCoordinates(coordinates, boundaries);
     this.drawPath(points, merged.color, merged.width, context);
 
     if (merged.dashColor && merged.dashLength) {
@@ -675,48 +729,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;
 
-          context.drawImage(
-            this._images[merged.url],
-            x + merged.dx,
-            y + merged.dy,
-            Number(merged.width),
-            Number(merged.height)
-          );
+            const size: number = Math.max(12, 1.5 * merged.width);
 
-          context.restore();
+            if (x > size && y > size && x < VECTOR_TILE_SIZE - size && y < VECTOR_TILE_SIZE - size) {
+              context.save();
 
-          distance += desired;
+              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;
+        // distance = (desiredDistance - (distanceToNext - distance)) % desiredDistance;
       }
     }
   }
@@ -943,7 +1018,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;
@@ -974,10 +1049,7 @@ class VectorTileRenderer {
 
     context.strokeStyle = color;
     context.lineWidth = width;
-
-    context.lineCap = "square";
-    context.lineJoin = "miter";
-
+    
     context.moveTo(points[0].x, points[0].y);
     for (var j = 1; j < points.length; j++) {
       context.lineTo(points[j].x, points[j].y);
@@ -1131,7 +1203,7 @@ class VectorTileRenderer {
         if (text) {
           let merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...text };
           let font = `${merged.fontStyle} ${merged.fontWeight} ${merged.size}px ${merged.font}`.trim();
-          
+
           result.push(font);
         }
       }
@@ -1161,6 +1233,7 @@ class VectorTileRenderer {
       dashColor: undefined,
       dashLength: 0,
       opacity: 1.0,
+      delta: 0,
     },
     IMAGE: {
       url: undefined,

package/lib/core/constants.ts

@@ -1,5 +1,5 @@
 export const URL_TEMPLATE =
-  "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=tomtom${z}&project=${project}&projection=wgs84";
+  "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=level${z}&project=${project}&projection=wgs84";
 
   
 export const PROVIDER_PROJECTS: { [key: string]: string } = {
@@ -18,13 +18,16 @@ export const PROVIDER_NAMES: { [key: string]: string } = {
 
 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",
-  here: "https://v0.maptrip.de/tiles?project=TrafficMobileHere_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic${z}&projection=wgs84",
-  openstreetmap: null,
+    "https://v0.maptrip.de/tiles?project=TrafficMobileTomTom_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
+  here: "https://v0.maptrip.de/tiles?project=TrafficMobileHere_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
+  openstreetmap: "https://v0.maptrip.de/tiles?project=TrafficMobileOSM_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
+  orbis: "https://v0.maptrip.de/tiles?project=TrafficMobileORBIS_EUROPE&tilex=${x}&tiley=${y}&acao=true&context=traffic_${z}&projection=wgs84",
 };
 
+export const DEFAULT_PROVIDER = "OpenStreetmap";
+
 export const MIN_ZOOM = 2;
-export const MAX_ZOOM = 18;
+export const MAX_ZOOM = 21;
 
 export const ATTRIBUTION =
   '&#169;&nbsp;<a href="https://maptrip.de/" target="_blank">infoware GmbH</a>';