@maptrip/map-tiles 1.2.0 → 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;
@@ -35,13 +36,6 @@ export interface Renderer {
         dy: number;
     };
     filters?: Filter[];
-    [key: string]: any;
-}
-export interface Filter {
-    interface: string;
-    key: string;
-    value?: any;
-    type: string;
 }
 export interface RENDERING_CONFIG {
     background: {
@@ -56,6 +50,12 @@ export interface RENDERING_CONFIG {
         [key: string]: Renderer[];
     };
 }
+export interface Filter {
+    interface: string;
+    key: string;
+    value?: any;
+    type: string;
+}
 export interface PolylineTextStyle {
     size: number;
     color: string;
@@ -79,8 +79,8 @@ export interface PolygonStyle {
     opacity?: number | undefined;
     outlineColor?: string | undefined;
     outlineWidth?: number | undefined;
-    url: string;
-    font: string;
+    url?: string | undefined;
+    font?: string | undefined;
     fontStyle?: string | undefined;
     fontWeight?: string | undefined;
     size?: number | undefined;

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/google/MapTripGoogleMapType.ts

@@ -1,6 +1,9 @@
 import { VectorTileFactory } from "../../core/VectorTileFactory.js";
 import { MIN_ZOOM, MAX_ZOOM } from "../../core/constants.js";
-import { PointXY, RENDERING_CONFIG } from "../../types/interfaces.js";
+import {
+  RENDERING_CONFIG
+} from "../../types/interfaces.js";
+import { PointXY } from "../../types/interfaces.js";
 
 class MapTripGoogleMapType {
   tileSize = new google.maps.Size(256, 256);

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

@@ -1,14 +1,22 @@
 import L from "leaflet";
-
 import { VectorTileFactory } from "../../core/VectorTileFactory.js";
 import { MIN_ZOOM, MAX_ZOOM, ATTRIBUTION } from "../../core/constants.js";
-import type { PointXY, RENDERING_CONFIG } from "../../types/interfaces.js";
+import { MapReleaseFetcher } from "../../util/MapReleaseFetcher.js";
+import type { PointXY } from "../../types/interfaces.js";
+import { RENDERING_CONFIG } from "../../types/interfaces.js";
 
-const MapTripLeafletGridLayer = L.GridLayer.extend({
-  MIN_ZOOM: MIN_ZOOM,
-  MAX_ZOOM: MAX_ZOOM,
+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;
 
-  initialize: function (options: {
+  constructor(options: {
     provider?: string;
     baseMap?: boolean;
     traffic?: boolean;
@@ -20,25 +28,113 @@ const MapTripLeafletGridLayer = L.GridLayer.extend({
     attribution?: string;
     minZoom?: number;
     maxZoom?: number;
+    releaseDate?: boolean;
   }) {
-    if (options) {
-      this.token = options.token;
-      this.options.attribution = options.attribution
-        ? options.attribution
-        : ATTRIBUTION;
-      this.options.minZoom = options.minZoom
-        ? Math.max(this.MIN_ZOOM, options.minZoom)
-        : this.MIN_ZOOM;
-      this.options.maxZoom = options.maxZoom
-        ? Math.min(this.MAX_ZOOM, options.maxZoom)
-        : this.MAX_ZOOM;
-      this.factory = VectorTileFactory.createFactory(options);
+    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)
+      : this.MIN_ZOOM;
+    //@ts-expect-error
+    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;
     }
-  },
 
-  createTile: function (coords: PointXY) {
-    return this.factory.getJsonTile(coords.z, coords.x, coords.y, this.token);
-  },
-});
+    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,6 +22,7 @@ class MapTripOpenLayersSource extends XYZ {
     detourProfile?: string;
     renderingConfig?: RENDERING_CONFIG;
     token?: string;
+    releaseDate?: boolean;
   }) {
     const options: XYZOptions = {};
     const projection = "EPSG:3857";
@@ -55,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

@@ -8,18 +8,18 @@ import {
   PROVIDER_TRAFFIC,
 } from "./constants.js";
 
+import WebFont from "webfontloader";
 import { RENDERING_CONFIG_DEFAULT } from "./rendering_config_default.js";
 import { RENDERING_CONFIG_TRAFFIC } from "./rendering_config_traffic.js";
 
-import WebFont from "webfontloader";
 import {
   Boundaries,
   Coordinates,
-  RENDERING_CONFIG,
   SuccessCallback,
   MapTilesProperties,
 } from "../types/interfaces.js";
 
+import { RENDERING_CONFIG } from "../types/interfaces.js"
 /**
  * Creates a factory to create tiles from the provided URL templates.
  *
@@ -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)
@@ -145,17 +145,21 @@ class VectorTileFactory {
     }
   }
 
-  private static getRenderingConfig(properties: MapTilesProperties) {
-    if (properties) {
-      if (properties.renderingConfig) {
-        return properties.renderingConfig;
-      } else if (properties.baseMap) {
-        return RENDERING_CONFIG_DEFAULT;
-      } else {
-        return RENDERING_CONFIG_TRAFFIC;
-      }
-    } else {
+  private static getRenderingConfig(properties: {
+    provider?: string;
+    baseMap?: boolean;
+    traffic?: boolean;
+    timeout?: number;
+    parallelDownloads?: number;
+    detourProfile?: string;
+    renderingConfig?: RENDERING_CONFIG;
+  }) {
+    if (properties.renderingConfig) {
+      return properties.renderingConfig;
+    } else if (properties.baseMap) {
       return RENDERING_CONFIG_DEFAULT;
+    } else {
+      return RENDERING_CONFIG_TRAFFIC;
     }
   }
 

package/lib/core/VectorTileRenderer.ts

@@ -15,11 +15,12 @@ import {
   PolylineStyle,
   PolylineTextStyle,
   PositionXY,
-  RENDERING_CONFIG,
   Renderer,
   Vertex,
 } from "../types/interfaces.js";
 
+import { RENDERING_CONFIG} from "../types/interfaces.js"
+
 class VectorTileRenderer {
   private _styles: RENDERING_CONFIG;
   private _images: { [key: string]: HTMLImageElement };
@@ -159,9 +160,11 @@ class VectorTileRenderer {
       const geometry = layer[i].geometry;
 
       // Look up the renderer for this kind of data
-      const rendererName = this._styles?.layers[kind];
+      //@ts-ignore
+      const rendererName = this._styles.layers[kind];
       const renderer = rendererName
-        ? this._styles?.renderers[rendererName]
+        ? //@ts-ignore
+          this._styles?.renderers[rendererName]
         : undefined;
 
       if (renderer) {
@@ -426,7 +429,7 @@ class VectorTileRenderer {
     texts?: { [key: string]: any }
   ): void {
     if (style) {
-      var merged = { ...VectorTileRenderer.DEFAULT_STYLE.POLYGON, ...style };
+      let merged = { ...VectorTileRenderer.DEFAULT_STYLE.POLYGON, ...style };
 
       for (var j = 0; j < coordinates.length; j++) {
         var part = coordinates[j];
@@ -491,7 +494,7 @@ class VectorTileRenderer {
               return;
             }
 
-            merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
+            let merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
 
             context.globalAlpha = merged.opacity;
             context.font =
@@ -1123,8 +1126,11 @@ class VectorTileRenderer {
 
   preloadImages(): void {
     for (const name in this._styles?.renderers) {
+      //@ts-ignore not allowing for bracket notation
       for (let i = 0; i < this._styles.renderers[name].length; i++) {
+        //@ts-ignore not allowing for bracket notation
         for (const renderer in this._styles.renderers[name][i]) {
+          //@ts-ignore not allowing for bracket notation
           const config = this._styles.renderers[name][i][renderer];
 
           if (config.url) {
@@ -1146,7 +1152,9 @@ class VectorTileRenderer {
     let result = [];
 
     for (let renderer in this._styles?.renderers) {
+      //@ts-ignore not allowing for bracket notation
       for (let i = 0; i < this._styles.renderers[renderer].length; i++) {
+        //@ts-ignore not allowing for bracket notation
         let text = this._styles.renderers[renderer][i].text;
         if (text) {
           let merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...text };