@maptrip/map-tiles 1.2.1 → 1.3.0

package/dist/types/interfaces.d.ts

@@ -12,6 +12,7 @@ export interface MapTilesProperties {
     maxZoom?: number;
     name?: string;
     NAME?: string;
+    releaseDate?: boolean | false;
 }
 export interface Renderer {
     from: number;

package/dist/util/MapReleaseFetcher.d.ts

@@ -0,0 +1,12 @@
+export declare class MapReleaseFetcher {
+    private _baseUrl;
+    private _token;
+    private _tomtom;
+    private _osm;
+    private _here;
+    constructor(token: string);
+    updateUrl(provider: string): void;
+    getRelease(provider: string): Promise<string | null>;
+    fetchAndExtractRelease(provider: string): Promise<string | null>;
+    private extractTargetString;
+}

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

@@ -1,16 +1,21 @@
 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 type { PointXY } from "../../types/interfaces.js";
-import {
-  RENDERING_CONFIG
-} from "../../types/interfaces.js";
+import { RENDERING_CONFIG } from "../../types/interfaces.js";
 
 class MapTripLeafletGridLayer extends L.GridLayer {
   MIN_ZOOM = MIN_ZOOM;
   MAX_ZOOM = MAX_ZOOM;
   token: string;
   factory: VectorTileFactory;
+  releaseFetcher: MapReleaseFetcher;
+  provider: string;
+  attribution: string;
+  release: string;
+  releaseDate: boolean;
+
   constructor(options: {
     provider?: string;
     baseMap?: boolean;
@@ -23,12 +28,33 @@ class MapTripLeafletGridLayer extends L.GridLayer {
     attribution?: string;
     minZoom?: number;
     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)
+          );
+        }
+      });
+    }
+
     //@ts-expect-error picking up LayerOptions rather than GridLayerOptions
     this.options.minZoom = options.minZoom
       ? Math.max(this.MIN_ZOOM, options.minZoom)
@@ -37,12 +63,78 @@ class MapTripLeafletGridLayer extends L.GridLayer {
     this.options.maxZoom = options.maxZoom
       ? Math.min(this.MAX_ZOOM, options.maxZoom)
       : this.MAX_ZOOM;
+
     this.factory = VectorTileFactory.createFactory(options);
   }
 
   createTile(coords: PointXY) {
     return this.factory.getJsonTile(coords.z!, coords.x, coords.y, this.token);
   }
+
+  private async initializeAttribution() {
+    await this.setRelease();
+    await this.setAttribution();
+  }
+
+  // Set an original release
+  private async setRelease() {
+    const release = await this.releaseFetcher.getRelease(this.provider);
+    if (release) {
+      this.release = release;
+    }
+  }
+
+  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;
+      }
+
+      // 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) {
+      return;
+    }
+
+    this._map.attributionControl.removeAttribution(this.attribution);
+
+    //@ts-expect-error doesn't recognize provider in options object
+    const eventProvider = event.layer.options.provider;
+    let newProvider: string;
+    if (eventProvider) {
+      if (eventProvider.toLowerCase() === "opensreetmap") {
+        newProvider = "openstreetmap";
+      } else if (eventProvider.toLowerCase() === "tomtom") {
+        newProvider = "tomtom";
+      } else if (eventProvider.toLowerCase() === "here") {
+        newProvider = "here";
+      } else {
+        newProvider = "openstreetmap";
+      }
+
+      this.provider = newProvider;
+
+      await this.setAttribution();
+    }
+  }
 }
 
 export { MapTripLeafletGridLayer };

package/lib/api-extensions/openlayers/MapTripOpenLayersSource.ts

@@ -4,10 +4,15 @@ import { XYZOptions, createXYZ, extentFromProjection } from "ol/tilegrid.js";
 import { VectorTileFactory } from "../../core/VectorTileFactory.js";
 import { MIN_ZOOM, MAX_ZOOM, ATTRIBUTION } from "../../core/constants.js";
 import { RENDERING_CONFIG } from "../../types/interfaces.js";
+import { MapReleaseFetcher } from "../../main.js";
 
 class MapTripOpenLayersSource extends XYZ {
   token: string;
   factory: VectorTileFactory;
+  release: string = "";
+  releaseFetcher: MapReleaseFetcher;
+  releaseDate: boolean;
+
   constructor(properties: {
     provider?: string;
     baseMap?: boolean;
@@ -17,8 +22,8 @@ class MapTripOpenLayersSource extends XYZ {
     detourProfile?: string;
     renderingConfig?: RENDERING_CONFIG;
     token?: string;
+    releaseDate?: boolean;
   }) {
-    super();
     const options: XYZOptions = {};
     const projection = "EPSG:3857";
 
@@ -56,6 +61,37 @@ class MapTripOpenLayersSource extends XYZ {
 
     this.token = properties.token!;
     this.factory = VectorTileFactory.createFactory(properties)!;
+    this.releaseFetcher = new MapReleaseFetcher(this.token);
+    this.releaseDate = properties.releaseDate ? properties.releaseDate : false;
+
+    if (this.releaseDate) {
+      this.fetchAndSetAttribution(properties.provider!, properties.token!);
+      this.on("change", () => this.updateAttribution(properties.provider!));
+    }
+  }
+
+  private async fetchAndSetAttribution(provider: string, token: string) {
+    try {
+      const release = await this.releaseFetcher.getRelease(provider);
+      if (release) {
+        this.release = release;
+        this.setAttributions(`${ATTRIBUTION} ${this.release}`);
+      }
+    } catch (error) {
+      console.error("Error fetching release version: ", error);
+    }
+  }
+
+  private async updateAttribution(provider: string) {
+    try {
+      const release = await this.releaseFetcher.getRelease(provider);
+      if (release && release !== this.release) {
+        this.release = release;
+        this.setAttributions(`${ATTRIBUTION} ${this.release}`);
+      }
+    } catch (error) {
+      console.error("Error updating attribution: ", error);
+    }
   }
 }
 

package/lib/core/VectorTileFactory.ts

@@ -95,7 +95,7 @@ class VectorTileFactory {
       this._properties.traffic &&
       !PROVIDER_TRAFFIC[this._properties.provider]
     ) {
-      throw new Error("There is now traffic information for this provider");
+      throw new Error("There is no traffic information for this provider");
     }
 
     // assert there is either a base map or traffic (or both)

package/lib/main.ts

@@ -3,6 +3,8 @@ import { RENDERING_CONFIG_DEFAULT } from "./core/rendering_config_default.js";
 import { RENDERING_CONFIG_GRAYSCALE } from "./core/rendering_config_grayscale.js";
 import { RENDERING_CONFIG_TRAFFIC } from "./core/rendering_config_traffic.js";
 
+import { MapReleaseFetcher } from "./util/MapReleaseFetcher.js";
+
 import { MapTripGoogleMapType } from "./api-extensions/google/MapTripGoogleMapType.js";
 import { MapTripLeafletGridLayer } from "./api-extensions/leaflet/MapTripLeafletGridLayer.js";
 import { MapTripOpenLayersSource } from "./api-extensions/openlayers/MapTripOpenLayersSource.js";
@@ -12,6 +14,7 @@ export {
   RENDERING_CONFIG_DEFAULT,
   RENDERING_CONFIG_GRAYSCALE,
   RENDERING_CONFIG_TRAFFIC,
+  MapReleaseFetcher,
   MapTripLeafletGridLayer,
   MapTripGoogleMapType,
   MapTripOpenLayersSource,

package/lib/types/interfaces.ts

@@ -12,6 +12,7 @@ export interface MapTilesProperties {
   maxZoom?: number;
   name?: string;
   NAME?: string;
+  releaseDate?: boolean | false;
 }
 
 export interface Renderer {

package/lib/util/MapReleaseFetcher.ts

@@ -0,0 +1,82 @@
+export class MapReleaseFetcher {
+  private _baseUrl: string;
+  private _token: string;
+
+  private _tomtom: Promise<string | null> | null = null;
+  private _osm: Promise<string | null> | null = null;
+  private _here: Promise<string | null> | null = null;
+
+  constructor(token: string) {
+    this._baseUrl =
+      "https://v1.maptrip.de/?CMD=GETFILE&PROJECT=${project}&RELATIVEPATH=/data/mapset/data/routing_geocoder/admin.bin&acao=true";
+    this._token = token;
+  }
+
+  updateUrl(provider: string) {
+    if (provider === "tomtom") {
+      this._baseUrl = this._baseUrl.replace("${project}", "TomTom_latest");
+    } else if (provider === "openstreetmap") {
+      this._baseUrl = this._baseUrl.replace("${project}", "OSM_latest");
+    } else {
+      this._baseUrl = this._baseUrl.replace("${project}", "HERE_latest");
+    }
+  }
+
+  async getRelease(provider: string) {
+    const providerLowercase = provider.toLowerCase();
+    if (providerLowercase === "tomtom") {
+      if (!this._tomtom) {
+        this._tomtom = this.fetchAndExtractRelease(providerLowercase);
+      }
+      return this._tomtom; 
+    } else if (providerLowercase === "here") {
+      if (!this._here) {
+        this._here = this.fetchAndExtractRelease(providerLowercase);
+      }
+      return this._here;
+    } else {
+      if (!this._osm) {
+        this._osm = this.fetchAndExtractRelease(providerLowercase);
+      }
+      return this._osm;
+    }
+  }
+
+  async fetchAndExtractRelease(provider: string): Promise<string | null> {
+    const providerVar = this.updateUrl(provider);
+    return new Promise((resolve, reject) => {
+      var xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState !== XMLHttpRequest.DONE) return;
+
+        if (xhr.status === 200) {
+          const text = new TextDecoder("latin1").decode(xhr.response);
+          const textString = this.extractTargetString(text);
+          const release = ` ${textString}`;
+
+          if (provider === "tomtom") {
+            this._tomtom = Promise.resolve(release);
+          } else if (provider === "here") {
+            this._here = Promise.resolve(release);
+          } else if (provider === "openstreetmap") {
+            this._osm = Promise.resolve(release);
+          }
+
+          resolve(release);
+        } else {
+          reject(`Error fetching: ${xhr.status}`);
+        }
+      };
+      xhr.open("GET", this._baseUrl, true);
+      xhr.setRequestHeader("Authorization", `Bearer ${this._token}`);
+      xhr.setRequestHeader("Accept", "*/*");
+      xhr.setRequestHeader("Content-Type", "application/octet-stream");
+      xhr.responseType = "arraybuffer";
+      xhr.send(null);
+    });
+  }
+  private extractTargetString(text: string): string | null {
+    const match = text.match(/2\d{3}Q[1-4]/);
+    return match ? match[0] : null;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptrip/map-tiles",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "API to use MapTrip map tiles in other map APIs",
   "keywords": [
     "map",
@@ -20,7 +20,8 @@
   "scripts": {
     "dev": "vite src",
     "prepublish": "tsc",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "publish": "tsc && vite build && npm login --scope=@maptrip && npm publish"
   },
   "devDependencies": {
     "@googlemaps/js-api-loader": "^1.16.2",