@maptrip/map-tiles 1.1.0 → 1.2.0

package/README.md

@@ -49,8 +49,8 @@ you create an instance of `MapTripLeafletGridLayer` and add it to the layers of
 ```js
 import { MapTripLeafletGridLayer } from "@maptrip/map-tiles";
 
-import L from 'leaflet';
-import 'leaflet/dist/leaflet.css';
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
 
 const layer = new MapTripLeafletGridLayer({
   provider: "TomTom",
@@ -237,7 +237,7 @@ You can specify a third parameter with properties when creating the factory. The
 | 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                     |
 | parallelDownloads | The number of tiles that are loaded in parallel                                                   | 12                       |
-| detourProfile     | The name of a MapTrip Detour Profile, see *MapTrip Detour*                                        |                          |
+| detourProfile     | The name of a MapTrip Detour Profile, see _MapTrip Detour_                                        |                          |
 | renderingConfig   | Set a custom rendering configuration to customize layers, colors, line widths etc.                | RENDERING_CONFIG_DEFAULT |
 
 This factory initializes a factory with TomTom data and traffic flows:
@@ -274,5 +274,7 @@ To use them, you mapping API has to be able to use both base layers and overlays
 
 ## History
 
+- 1.2.0: Added TypeScript declaration file
+- 1.1.1: Added rendering config for foot_path layer
 - 1.1.0: Added MapTrip detour profiles
 - 1.0.8: First public version

package/dist/api-extensions/google/MapTripGoogleMapType.d.ts

@@ -0,0 +1,28 @@
+import { PointXY, RENDERING_CONFIG } from '../../types/interfaces.js';
+import { VectorTileFactory } from '../../core/VectorTileFactory.js';
+
+declare class MapTripGoogleMapType {
+    tileSize: google.maps.Size;
+    alt: null;
+    maxZoom: number;
+    minZoom: number;
+    projection: null;
+    radius: number;
+    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;
+    });
+    getTile(coord: PointXY, zoom: number): HTMLCanvasElement;
+    releaseTile(): void;
+}
+export { MapTripGoogleMapType };

package/dist/api-extensions/leaflet/MapTripLeafletGridLayer.d.ts

@@ -0,0 +1,4 @@
+import { default as L } from 'leaflet';
+
+declare const MapTripLeafletGridLayer: (new (...args: any[]) => any) & typeof L.Class;
+export { MapTripLeafletGridLayer };

package/dist/api-extensions/openlayers/MapTripOpenLayersSource.d.ts

@@ -0,0 +1,19 @@
+import { RENDERING_CONFIG } from '../../types/interfaces.js';
+import { VectorTileFactory } from '../../core/VectorTileFactory.js';
+import { default as XYZ } from 'ol/source/XYZ.js';
+
+declare 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;
+    });
+}
+export { MapTripOpenLayersSource };

package/dist/core/CollisionDetector.d.ts

@@ -0,0 +1,14 @@
+import { PositionXY } from '../types/interfaces.js';
+
+declare class CollisionDetector {
+    private _tree;
+    constructor();
+    insert(x: number, y: number, w: number, h: number): void;
+    insertPolylineText(context: CanvasRenderingContext2D, text: string, position: PositionXY): void;
+    isCollision(x: number, y: number, w: number, h: number): boolean;
+    isPolylineTextCollision(context: CanvasRenderingContext2D, text: string, position: PositionXY): boolean;
+    getCollisionParams(context: CanvasRenderingContext2D, text: string, position: PositionXY, widthUsed: number): {
+        [key: string]: number;
+    };
+}
+export { CollisionDetector };

package/dist/core/VectorTileFactory.d.ts

@@ -0,0 +1,64 @@
+import { 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.
+ */
+declare class VectorTileFactory {
+    private _layers;
+    private _tileLoader;
+    private _renderer;
+    private _urls;
+    private _additionalUrls;
+    static _fonts: string | undefined;
+    static _properties: typeof VectorTileFactory.DEFAULT_PROPERTIES;
+    constructor(urls: string[], additionalUrls: string[], renderingConfig: RENDERING_CONFIG, properties: MapTilesProperties);
+    static createFactory(properties: {
+        provider?: string;
+        baseMap?: boolean;
+        traffic?: boolean;
+        timeout?: number;
+        parallelDownloads?: number;
+        detourProfile?: string;
+        renderingConfig?: RENDERING_CONFIG;
+    }): VectorTileFactory;
+    private static getUrlTemplatesForBaseLayer;
+    private static getUrlTemplatesForTrafficLayer;
+    private static getRenderingConfig;
+    getJsonTile(z: number, x: number, y: number, token: string, callback?: SuccessCallback): HTMLCanvasElement;
+    /**
+     * @private
+     */
+    private resolveTileUrl;
+    /**
+     * @private
+     */
+    private tileIndexToLatLong;
+    /**
+     * @private
+     */
+    private getTileBoundaries;
+    /**
+     * @private
+     */
+    private drawTile;
+    /**
+     * Draws an error message on the tile.
+     * @private
+     *
+     * @param canvas
+     */
+    private drawErroredTile;
+    /**
+     * @private
+     */
+    private getFeatures;
+    static DEFAULT_PROPERTIES: {
+        provider: string;
+        baseMap: boolean;
+        traffic: boolean;
+    };
+}
+export { VectorTileFactory };

package/dist/core/VectorTileLoader.d.ts

@@ -0,0 +1,40 @@
+import { SuccessCallback, TileQueueItem, Tile, MapTilesProperties } from '../types/interfaces.js';
+
+declare class VectorTileLoader {
+    private _properties;
+    private _tiles;
+    private _numLoading;
+    constructor(properties: MapTilesProperties);
+    queue(tile: Tile, successCallback: SuccessCallback, errorCallback: ErrorCallback): void;
+    loadNext(): void;
+    /**
+     * Checks if a HTTP Request is successful
+     *
+     * @param {XMLHttpRequest} httpRequest
+     *
+     * @return {boolean}
+     */
+    isHttpRequestSuccessful(httpRequest: XMLHttpRequest): boolean;
+    /**
+     * Checks if a HTTP Request has failed (there was a timeout or the status code is an error)
+     *
+     * @param {XMLHttpRequest} httpRequest
+     *
+     * @return {boolean}
+     */
+    isHttpRequestFailed(httpRequest: XMLHttpRequest): boolean;
+    /**
+     * Checks if a HTTP Request has timed out
+     *
+     * @param {XMLHttpRequest} httpRequest
+     *
+     * @return {boolean}
+     */
+    isHttpRequestTimeout(httpRequest: XMLHttpRequest): boolean;
+    loadAllUrls(tile: TileQueueItem, urls: string[]): void;
+    static DEFAULT_PROPERTIES: {
+        timeout: number;
+        parallelDownloads: number;
+    };
+}
+export { VectorTileLoader };

package/dist/core/VectorTileRenderer.d.ts

@@ -0,0 +1,123 @@
+import { Boundaries, PointXY, PolygonStyle, PolylineStyle, PolylineTextStyle, PositionXY, RENDERING_CONFIG, Renderer, Vertex } from '../types/interfaces.js';
+import { CollisionDetector } from './CollisionDetector.js';
+import { GeoJsonProperties } from 'geojson';
+
+declare class VectorTileRenderer {
+    private _styles;
+    private _images;
+    constructor(styles: RENDERING_CONFIG);
+    drawTile(layer: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[], z: number, boundaries: Boundaries, context: CanvasRenderingContext2D): void;
+    drawPolylineLayers(lines: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[], z: number, boundaries: Boundaries, context: CanvasRenderingContext2D, phase: string, collisions: CollisionDetector): void;
+    drawErroredTile(canvas: HTMLCanvasElement): void;
+    drawTilePhase(layer: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[], z: number, boundaries: Boundaries, context: CanvasRenderingContext2D, phase: string, collisions: CollisionDetector): void;
+    /**
+     * @private
+     */
+    getBackgroundColor(z: number): string;
+    /**
+     * @private
+     */
+    accept(style: Renderer, layer: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>): boolean;
+    /**
+     * @private
+     */
+    drawPolygon(coordinates: GeoJSON.Position[][], geoJsonProperties: GeoJsonProperties, z: number, boundaries: Boundaries, style: PolygonStyle, context: CanvasRenderingContext2D, phase: string, collisions?: CollisionDetector, texts?: {
+        [key: string]: any;
+    }): void;
+    getCentroid(vertices: Vertex[]): Vertex;
+    getBBox(coordinates: PointXY[]): {
+        min: {
+            x: number;
+            y: number;
+        };
+        max: {
+            x: number;
+            y: number;
+        };
+    };
+    /**
+     * @private
+     */
+    projectCoordinates(coordinates: GeoJSON.Position[], boundaries: Boundaries): {
+        x: number;
+        y: number;
+    }[];
+    /**
+     * @private
+     */
+    drawPolyline(coordinates: GeoJSON.Position[], geoJsonProperties: GeoJsonProperties, boundaries: Boundaries, style: PolylineStyle, context: CanvasRenderingContext2D, phase: "linesOutline" | "lines"): void;
+    drawPolylineText(coordinates: GeoJSON.Position[], geoJsonProperties: GeoJsonProperties, boundaries: Boundaries, style: PolylineTextStyle | undefined, context: CanvasRenderingContext2D, collisions: CollisionDetector, texts: {
+        [key: string]: any;
+    }): void;
+    getPolylineLength(points: PointXY[]): number;
+    getAngleAndCoordsAtLength(points: PointXY[], dist: number, width: number): {
+        angle: number;
+        x: number;
+        y: number;
+    } | undefined;
+    getLetterPositions(points: PointXY[], text: string, context: CanvasRenderingContext2D, collisions: CollisionDetector): {
+        angle: number;
+        x: number;
+        y: number;
+    }[] | null;
+    /**
+     * @private
+     */
+    drawLetter(letter: string, position: PositionXY, outline: number, context: CanvasRenderingContext2D): void;
+    /**
+     * @private
+     */
+    drawPath(points: PointXY[], color: string, width: number, context: CanvasRenderingContext2D): void;
+    drawImage(coordinate: number[], boundaries: Boundaries, style: PolylineStyle, context: CanvasRenderingContext2D): void;
+    /**
+     * @private
+     */
+    isTextCollision(coordinate: GeoJSON.Position, name: string, boundaries: Boundaries, style: PolylineTextStyle, context: CanvasRenderingContext2D, collisions: CollisionDetector): boolean;
+    /**
+     * @private
+     */
+    drawText(coordinate: GeoJSON.Position, name: string, boundaries: Boundaries, style: PolylineTextStyle, context: CanvasRenderingContext2D, collisions: CollisionDetector): void;
+    preloadImages(): void;
+    findConfiguredFonts(): string[];
+    static DEFAULT_STYLE: {
+        POLYGON: {
+            color: string;
+            url: undefined;
+            outlineColor: undefined;
+            outlineWidth: number;
+            opacity: number;
+        };
+        LINE: {
+            color: string;
+            url: undefined;
+            height: number;
+            dx: number;
+            dy: number;
+            direction: string;
+            width: number;
+            outlineColor: undefined;
+            outlineWidth: number;
+            dashColor: undefined;
+            dashLength: number;
+            opacity: number;
+        };
+        IMAGE: {
+            url: undefined;
+            width: number;
+            height: number;
+            dx: number;
+            dy: number;
+        };
+        TEXT: {
+            color: string;
+            outlineColor: undefined;
+            outlineWidth: number;
+            font: string;
+            fontWeight: string;
+            fontStyle: string;
+            size: number;
+            opacity: number;
+        };
+    };
+}
+export { VectorTileRenderer };

package/dist/core/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=tomtom${z}&project=${project}&projection=wgs84";
+export declare const PROVIDER_PROJECTS: {
+    [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>";