@maptrip/map-tiles 1.1.0 → 1.2.0

package/dist/types/interfaces.d.ts

@@ -0,0 +1,135 @@
+export interface MapTilesProperties {
+    provider?: string | "OpenStreetMap";
+    baseMap?: boolean;
+    traffic?: boolean;
+    timeout?: number;
+    parallelDownloads?: number;
+    detourProfile?: string;
+    renderingConfig?: RENDERING_CONFIG;
+    token?: string;
+    attribution?: string;
+    minZoom?: number;
+    maxZoom?: number;
+    name?: string;
+    NAME?: string;
+}
+export interface Renderer {
+    from: number;
+    to: number;
+    text?: {
+        size: number;
+        color: string;
+        font: string;
+        fontWeight?: string;
+        outlineColor?: string;
+        outlineWidth?: number;
+        fontStyle?: string;
+    };
+    polygon?: PolygonStyle;
+    line?: PolylineStyle;
+    image?: {
+        url: string;
+        width: number;
+        height: number;
+        dx: number;
+        dy: number;
+    };
+    filters?: Filter[];
+    [key: string]: any;
+}
+export interface Filter {
+    interface: string;
+    key: string;
+    value?: any;
+    type: string;
+}
+export interface RENDERING_CONFIG {
+    background: {
+        from: number;
+        to: number;
+        color: string;
+    }[];
+    layers: {
+        [key: string]: string;
+    };
+    renderers: {
+        [key: string]: Renderer[];
+    };
+}
+export interface PolylineTextStyle {
+    size: number;
+    color: string;
+    font?: string | undefined;
+    fontWeight?: string | undefined;
+    outlineColor?: string | undefined;
+    outlineWidth?: number | undefined;
+    fontStyle?: string | undefined;
+}
+export interface PolylineStyle {
+    color?: string | undefined;
+    width?: number | undefined;
+    url?: string | undefined;
+    height?: number | undefined;
+    dx?: number | undefined;
+    dy?: number | undefined;
+    direction?: string | undefined;
+}
+export interface PolygonStyle {
+    color: string;
+    opacity?: number | undefined;
+    outlineColor?: string | undefined;
+    outlineWidth?: number | undefined;
+    url: string;
+    font: string;
+    fontStyle?: string | undefined;
+    fontWeight?: string | undefined;
+    size?: number | undefined;
+}
+export interface ImageStyle {
+    url: string;
+    width: number;
+    height: number;
+    dx: number;
+    dy: number;
+}
+export interface Tile {
+    x: number;
+    y: number;
+    z: number;
+    urls: string[];
+    token: string;
+    json?: JSON;
+}
+export interface TileQueueItem {
+    tile: Tile;
+    successCallback: SuccessCallback;
+    errorCallback: ErrorCallback;
+}
+export interface PointXY {
+    x: number;
+    y: number;
+    z?: number;
+}
+export interface Vertex {
+    x: number;
+    y: number;
+}
+export interface PositionXY {
+    x: number;
+    y: number;
+    angle: number;
+}
+export interface Coordinates {
+    lon: number;
+    lat: number;
+}
+export interface Boundaries {
+    min: Coordinates;
+    max: Coordinates;
+}
+export interface SuccessCallback {
+    (json: any): void;
+}
+export interface ErrorCallback {
+    (error: any): void;
+}

package/lib/api-extensions/google/MapTripGoogleMapType.ts

@@ -0,0 +1,40 @@
+import { VectorTileFactory } from "../../core/VectorTileFactory.js";
+import { MIN_ZOOM, MAX_ZOOM } from "../../core/constants.js";
+import { PointXY, RENDERING_CONFIG } from "../../types/interfaces.js";
+
+class MapTripGoogleMapType {
+  tileSize = new google.maps.Size(256, 256);
+  alt = null;
+  maxZoom = MAX_ZOOM;
+  minZoom = MIN_ZOOM;
+  projection = null;
+  radius = 6378137;
+
+  name: string;
+  token: string;
+  factory: VectorTileFactory;
+
+  constructor(properties: {
+    provider?: string;
+    baseMap?: boolean;
+    traffic?: boolean;
+    timeout?: number;
+    parallelDownloads?: number;
+    detourProfile?: string;
+    renderingConfig?: RENDERING_CONFIG;
+    token?: string;
+    name?: string;
+  }) {
+    this.name = properties!.name ? properties!.name : "infoware";
+    this.token = properties!.token!;
+    this.factory = VectorTileFactory.createFactory(properties)!;
+  }
+
+  getTile(coord: PointXY, zoom: number) {
+    return this.factory.getJsonTile(zoom, coord.x, coord.y, this.token);
+  }
+
+  releaseTile() {}
+}
+
+export { MapTripGoogleMapType };

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

@@ -0,0 +1,44 @@
+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";
+
+const MapTripLeafletGridLayer = L.GridLayer.extend({
+  MIN_ZOOM: MIN_ZOOM,
+  MAX_ZOOM: MAX_ZOOM,
+
+  initialize: function (options: {
+    provider?: string;
+    baseMap?: boolean;
+    traffic?: boolean;
+    timeout?: number;
+    parallelDownloads?: number;
+    detourProfile?: string;
+    renderingConfig?: RENDERING_CONFIG;
+    token?: string;
+    attribution?: string;
+    minZoom?: number;
+    maxZoom?: number;
+  }) {
+    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);
+    }
+  },
+
+  createTile: function (coords: PointXY) {
+    return this.factory.getJsonTile(coords.z, coords.x, coords.y, this.token);
+  },
+});
+
+export { MapTripLeafletGridLayer };

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

@@ -0,0 +1,61 @@
+import XYZ from "ol/source/XYZ.js";
+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";
+
+class MapTripOpenLayersSource extends XYZ {
+  token: string;
+  factory: VectorTileFactory;
+  constructor(properties: {
+    provider?: string;
+    baseMap?: boolean;
+    traffic?: boolean;
+    timeout?: number;
+    parallelDownloads?: number;
+    detourProfile?: string;
+    renderingConfig?: RENDERING_CONFIG;
+    token?: string;
+  }) {
+    const options: XYZOptions = {};
+    const projection = "EPSG:3857";
+
+    const tileGrid = createXYZ({
+      extent: extentFromProjection(projection),
+      maxResolution: options.maxResolution,
+      minZoom: MIN_ZOOM,
+      maxZoom: MAX_ZOOM,
+      tileSize: [256, 256],
+    });
+
+    super({
+      opaque: true,
+      minZoom: MIN_ZOOM,
+      maxZoom: MAX_ZOOM,
+      projection: projection,
+      tileGrid: tileGrid,
+      wrapX: true,
+      url: "z:{z} x:{x} y:{y}",
+      tileLoadFunction: (tile) => {
+        let coord = tile.getTileCoord();
+        let canvas = this.factory.getJsonTile(
+          coord[0],
+          coord[1],
+          coord[2],
+          this.token!,
+          () => {
+            //@ts-expect-error: 'tile' is an OL ImageTile & .setImage() is available but not exported from types
+            tile.setImage(canvas);
+          }
+        );
+      },
+      attributions: ATTRIBUTION,
+    });
+
+    this.token = properties.token!;
+    this.factory = VectorTileFactory.createFactory(properties)!;
+  }
+}
+
+export { MapTripOpenLayersSource };

package/lib/core/CollisionDetector.ts

@@ -0,0 +1,95 @@
+import RTree from "rtree";
+import { PositionXY } from "../types/interfaces.js";
+
+class CollisionDetector {
+  private _tree: any; //use 'any' type because rtree package does not have .d.ts file
+  constructor() {
+    this._tree = RTree(10);
+  }
+
+  insert(x: number, y: number, w: number, h: number) {
+    this._tree.insert({ x: x, y: y, w: w, h: h }, 0);
+  }
+
+  insertPolylineText(
+    context: CanvasRenderingContext2D,
+    text: string,
+    position: PositionXY
+  ) {
+    let widthUsed = 0;
+
+    for (let i = 0; i <= text.length; i++) {
+      let box = this.getCollisionParams(
+        context,
+        text.charAt(i),
+        position,
+        widthUsed
+      );
+      this.insert(box.x, box.y, box.w, box.h);
+
+      widthUsed += context.measureText(text.charAt(i)).width;
+    }
+  }
+
+  isCollision(x: number, y: number, w: number, h: number) {
+    return this._tree.search({ x: x, y: y, w: w, h: h }).length > 0;
+  }
+
+  isPolylineTextCollision(
+    context: CanvasRenderingContext2D,
+    text: string,
+    position: PositionXY
+  ): boolean {
+    let border = 5;
+    let widthUsed = 0;
+
+    for (let i = 0; i <= text.length; i++) {
+      var box = this.getCollisionParams(
+        context,
+        text.charAt(i),
+        position,
+        widthUsed
+      );
+
+      if (
+        box.x < border ||
+        box.y < border ||
+        box.x + box.w > 256 - border ||
+        box.y + box.h > 256 - border
+      ) {
+        return true;
+      }
+
+      if (this.isCollision(box.x, box.y, box.w, box.h)) {
+        return true;
+      }
+
+      widthUsed += context.measureText(text.charAt(i)).width;
+    }
+
+    return false;
+  }
+
+  getCollisionParams(
+    context: CanvasRenderingContext2D,
+    text: string,
+    position: PositionXY,
+    widthUsed: number
+  ): { [key: string]: number } {
+    let textWidth = context.measureText(text).width;
+    let textHeight = context.measureText(text.charAt(0)).width * 1.5;
+
+    return {
+      x: position.x + 0.5 * Math.cos(position.angle) * textWidth,
+      y: position.y + 0.5 * Math.sin(position.angle) * textWidth,
+      w:
+        Math.abs(Math.cos(position.angle) * textWidth) +
+        Math.abs(Math.sin(position.angle) * textHeight),
+      h:
+        Math.abs(Math.sin(position.angle) * textWidth) +
+        Math.abs(Math.cos(position.angle) * textHeight),
+    };
+  }
+}
+
+export { CollisionDetector };

package/lib/core/VectorTileFactory.ts

@@ -0,0 +1,327 @@
+import { VectorTileLoader } from "./VectorTileLoader.js";
+
+import { VectorTileRenderer } from "./VectorTileRenderer.js";
+
+import {
+  URL_TEMPLATE,
+  PROVIDER_PROJECTS,
+  PROVIDER_TRAFFIC,
+} from "./constants.js";
+
+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";
+
+/**
+ * Creates a factory to create tiles from the provided URL templates.
+ *
+ * The templates must have variables ${x}, ${y} and ${z} for the tile index.
+ * When multiple URLs are specified, they are used round robin.
+ */
+class VectorTileFactory {
+  private _layers: string[];
+  private _tileLoader: VectorTileLoader;
+  private _renderer: VectorTileRenderer;
+  private _urls: string[];
+  private _additionalUrls: string[];
+
+  static _fonts: string | undefined = undefined;
+  static _properties: typeof VectorTileFactory.DEFAULT_PROPERTIES;
+  constructor(
+    urls: string[],
+    additionalUrls: string[],
+    renderingConfig: RENDERING_CONFIG,
+    properties: MapTilesProperties
+  ) {
+    this._urls = urls;
+    this._additionalUrls = additionalUrls;
+    this._layers = ["all"]; // could be used to load just a selection of layers from the data server
+
+    this._tileLoader = new VectorTileLoader(properties);
+    this._renderer = new VectorTileRenderer(renderingConfig);
+
+    if (!VectorTileFactory._fonts) {
+      WebFont.load({
+        custom: {
+          families: ["Open Sans:n4,n7,i4,i7"],
+          urls: ["https://maps.infoware.de/MapAPI-1.4/css/opensans.css"],
+        },
+        loading: function () {
+          VectorTileFactory._fonts = "loading";
+        },
+        active: () => {
+          VectorTileFactory._fonts = "active";
+          this._tileLoader.loadNext();
+        },
+        inactive: () => {
+          // font loading failed
+          VectorTileFactory._fonts = "active";
+          this._tileLoader.loadNext();
+        },
+      });
+    }
+  }
+
+  public static createFactory(properties: {
+    provider?: string;
+    baseMap?: boolean;
+    traffic?: boolean;
+    timeout?: number;
+    parallelDownloads?: number;
+    detourProfile?: string;
+    renderingConfig?: RENDERING_CONFIG;
+  }): VectorTileFactory {
+    // apply default properties
+    this._properties = properties
+      ? { ...VectorTileFactory.DEFAULT_PROPERTIES, ...properties }
+      : VectorTileFactory.DEFAULT_PROPERTIES;
+    this._properties.provider = this._properties.provider.toLowerCase();
+
+    // assert the provider is valid
+    if (!PROVIDER_PROJECTS[this._properties.provider]) {
+      throw new Error("Unknown provider");
+    }
+
+    // assert there is no traffic requested for a provider which does not provide traffic information
+    if (
+      this._properties.traffic &&
+      !PROVIDER_TRAFFIC[this._properties.provider]
+    ) {
+      throw new Error("There is now traffic information for this provider");
+    }
+
+    // assert there is either a base map or traffic (or both)
+    if (!this._properties.baseMap && !this._properties.traffic) {
+      throw new Error(
+        "You cannot create a factory with neither a base map nor traffic"
+      );
+    }
+    return new VectorTileFactory(
+      VectorTileFactory.getUrlTemplatesForBaseLayer(this._properties),
+      VectorTileFactory.getUrlTemplatesForTrafficLayer(this._properties),
+      VectorTileFactory.getRenderingConfig(this._properties),
+      this._properties
+    );
+  }
+
+  private static getUrlTemplatesForBaseLayer(
+    properties: GeoJSON.GeoJsonProperties
+  ): string[] | [] {
+    if (properties) {
+      if (properties.baseMap) {
+        let template = URL_TEMPLATE.replace(
+          "${project}",
+          PROVIDER_PROJECTS[properties.provider!]
+        );
+        return [0, 1, 2, 3].map((index) =>
+          template.replace("${index}", index.toString())
+        );
+      } else {
+        return [];
+      }
+    } else {
+      return [];
+    }
+  }
+
+  private static getUrlTemplatesForTrafficLayer(
+    properties: GeoJSON.GeoJsonProperties
+  ): string[] | [] {
+    if (properties) {
+      const trafficUrl = properties.traffic
+        ? PROVIDER_TRAFFIC[properties.provider!]
+        : null;
+      return trafficUrl ? [trafficUrl] : [];
+    } else {
+      return [];
+    }
+  }
+
+  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 {
+      return RENDERING_CONFIG_DEFAULT;
+    }
+  }
+
+  public getJsonTile(
+    z: number,
+    x: number,
+    y: number,
+    token: string,
+    callback?: SuccessCallback
+  ): HTMLCanvasElement {
+    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 baseMapUrl = this.resolveTileUrl(z, x, y);
+    let urls = baseMapUrl ? [baseMapUrl] : [];
+
+    // add URLs for additional data like traffic flows
+    this._additionalUrls.forEach((it: string) => {
+      urls.push(
+        it
+          .replace("${x}", String(x))
+          .replace("${y}", String(y))
+          .replace(/\$\{z\}/g, String(z))
+      );
+    });
+
+    let tileLoadedSuccessfullyCallback = (json: GeoJSON.Feature) => {
+      this.drawTile(json, z, x, y, canvas);
+
+      if (callback) {
+        callback(canvas);
+      }
+    };
+
+    let tile_FailedCallback = () => {
+      this.drawErroredTile(canvas);
+
+      if (callback) {
+        callback(null);
+      }
+    };
+
+    this._tileLoader.queue(
+      { x, y, z, urls, token },
+      tileLoadedSuccessfullyCallback,
+      tile_FailedCallback
+    );
+
+    if (VectorTileFactory._fonts === "active") {
+      this._tileLoader.loadNext();
+    }
+
+    return canvas;
+  }
+
+  /**
+   * @private
+   */
+  private resolveTileUrl(z: number, x: number, y: number): string | null {
+    if (this._urls.length > 0) {
+      var index = (x + y + z) % this._urls.length;
+
+      return this._urls[index]
+        .replace("${x}", String(x))
+        .replace("${y}", String(y))
+        .replace(/\$\{z\}/g, String(z))
+        .replace("${layers}", this._layers.join(","));
+    } else {
+      // there is no base map layer
+      return null;
+    }
+  }
+
+  /**
+   * @private
+   */
+  private tileIndexToLatLong(z: number, x: number, y: number): Coordinates {
+    var n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
+
+    return {
+      lat: (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))),
+      lon: (x / Math.pow(2, z)) * 360 - 180,
+    };
+  }
+
+  /**
+   * @private
+   */
+  private getTileBoundaries(z: number, x: number, y: number): Boundaries {
+    return {
+      min: this.tileIndexToLatLong(z, x, y),
+      max: this.tileIndexToLatLong(z, x + 1, y + 1),
+    };
+  }
+
+  /**
+   * @private
+   */
+  private drawTile(
+    json: GeoJSON.GeoJsonObject,
+    z: number,
+    x: number,
+    y: number,
+    canvas: HTMLCanvasElement
+  ): void {
+    var features = this.getFeatures(json)!.sort(function (a: any, b: any) {
+      if (a.properties && a.properties.sort_rank) {
+        if (b.properties && b.properties.sort_rank) {
+          return a.properties.sort_rank - b.properties.sort_rank;
+        } else {
+          return -1;
+        }
+      } else {
+        if (b.properties && b.properties.sort_rank) {
+          return 1;
+        } else {
+          return 0;
+        }
+      }
+    });
+
+    const context = canvas.getContext("2d");
+    if (context) {
+      this._renderer.drawTile(
+        features,
+        z,
+        this.getTileBoundaries(z, x, y),
+        context
+      );
+    } else {
+      console.error("Failed to create canvas context");
+    }
+  }
+
+  /**
+   * Draws an error message on the tile.
+   * @private
+   *
+   * @param canvas
+   */
+  private drawErroredTile(canvas: HTMLCanvasElement): void {
+    this._renderer.drawErroredTile(canvas);
+  }
+
+  /**
+   * @private
+   */
+  private getFeatures(json: GeoJSON.GeoJsonObject): GeoJSON.Feature[] | void {
+    if (json.type && json.type == "FeatureCollection") {
+      const featureCollection = json as GeoJSON.FeatureCollection;
+      return featureCollection.features;
+    } else {
+      return;
+    }
+  }
+
+  static DEFAULT_PROPERTIES = {
+    provider: "OpenStreetmap",
+    baseMap: true,
+    traffic: false,
+  };
+}
+
+export { VectorTileFactory };