@maptrip/map-tiles 1.5.0 → 1.6.0

package/README.md

@@ -68,7 +68,44 @@ L.map("map", {
 `MapTripLeafletGridLayer` can be configured with all properties listed in the section _Properties_, and also with these:
 
 - `token`: A valid and non-expired token for your account, see section _Authorization_ (**required**)
-- `attribution`: The copyright notes to show in the map
+- `attribution`: Custom copyright notes to show in the map; default is empty
+- `releaseDate`: Boolean value stating whether to append the map release data to the attribution; default is false. 
+- `minZoom`: The minimum zoom level for the map (must not be smaller than 2)
+- `maxZoom`: The maximum zoom level for the map (must not be larger than 18)
+
+### MapLibre GL JS
+
+Supported versions: MapLibre GL JS 6.16 and newer
+
+Install [MapLibre](https://maplibre.org/projects/gl-js/) with `npm install maplibre-gl@~6.x`. To use MapTrip map tiles in MapLibre GL JS,
+you create an instance of `MapLibreStyleFactory` and use it to create a map style:
+
+```js
+import * as maplibregl from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
+
+import { MapLibreStyleFactory } from "@maptrip/map-tiles";
+
+maplibregl.setWorkerUrl(workerUrl);
+
+const factory = new MapLibreStyleFactory();
+
+const map = new maplibregl.Map({
+    container: "map",
+    center: [6.95988, 50.94017],
+    zoom: 13,
+    style: factory.createMapTripStyle({
+        provider: "TomTom",
+        token: "Insert your MapTrip token here"
+    })
+});
+```
+
+`MapLibreStyleFactory` can be configured with all properties listed in the section _Properties_, and also with these:
+
+- `token`: A valid and non-expired token for your account, see section _Authorization_ (**required**)
+- `attribution`: Custom copyright notes to show in the map; default is empty
 - `releaseDate`: Boolean value stating whether to append the map release data to the attribution; default is false. 
 - `minZoom`: The minimum zoom level for the map (must not be smaller than 2)
 - `maxZoom`: The maximum zoom level for the map (must not be larger than 18)
@@ -238,18 +275,21 @@ You can specify a third parameter with properties when creating the factory. The
 | ----------------- | ------------------------------------------------------------------------------------------------- | ------------------------ |
 | provider          | The map data provider (`TomTom`, `Orbis`, `HERE` or `OpenStreetmap`)                              | OpenStreetmap            |
 | baseMap           | Set to `false` for a traffic overlay which can be used on top of e.g. an aerial view              | true                     |
-| traffic           | Add traffic flows to the map tiles (only available for TomTom and HERE maps)                      | false                    |
+| traffic           | Add traffic flows to the map tiles. Use RENDERING_CONFIG_GRAYSCALE for better contrast            | 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_                                        |                          |
 | 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:
+This code initializes a factory with TomTom data and traffic flows, rendered on a grayscale map for better contrast:
 
 ```js
+import { VectorTileFactory, RENDERING_CONFIG_GRAYSCALE } from "@maptrip/map-tiles";
+
 const factory = VectorTileFactory.createFactory({
   provider: "TomTom",
   traffic: true,
+  renderingConfig: RENDERING_CONFIG_GRAYSCALE
 });
 ```
 
@@ -278,6 +318,12 @@ To use them, you mapping API has to be able to use both base layers and overlays
 
 ## History
 
+- 1.6.0
+  - Traffic flows now rendered on both sides of roads to show the situation in both directions of travel
+  - Added traffic flows for OpenStreetmap and Orbis
+  - Added MapLibre integration
+  - Increased maximum zoom level
+  - Improved rendering of minor roads and foot pathes on medium zoom levels
 - 1.5.0
   - Fixed rendering of urban green spaces
   - Improved rendering of outlines
@@ -295,7 +341,7 @@ To use them, you mapping API has to be able to use both base layers and overlays
 - 1.3.2: Updated dependencies with security vulnerabilities
 - 1.3.1: Updated all all providers to use the latest build of the project
 - 1.3.0: Added map release data for Leaflet and OpenLayers map attributions
-- 1.2.1: Fixed a bug in MapTripLeafletGridLayer type implementation 
+- 1.2.1: Fixed a bug in `MapTripLeafletGridLayer` type implementation 
 - 1.2.0: Added TypeScript declaration file
 - 1.1.1: Added rendering config for foot_path layer
 - 1.1.0: Added MapTrip detour profiles

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

@@ -1,17 +1,15 @@
 import { default as L } from 'leaflet';
 import { VectorTileFactory } from '../../core/VectorTileFactory.js';
-import { MapReleaseFetcher } from '../../util/MapReleaseFetcher.js';
 import { PointXY, RENDERING_CONFIG } from '../../types/interfaces.js';
 declare class MapTripLeafletGridLayer extends L.GridLayer {
-    MIN_ZOOM: number;
-    MAX_ZOOM: number;
+    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?;
+    private customAttribution?;
     constructor(options: {
         provider?: string;
         baseMap?: boolean;
@@ -26,10 +24,9 @@ declare class MapTripLeafletGridLayer extends L.GridLayer {
         maxZoom?: number;
         releaseDate?: boolean;
     });
+    onAdd(map: L.Map): this;
+    onRemove(map: L.Map): this;
     createTile(coords: PointXY): HTMLCanvasElement;
-    private initializeAttribution;
-    private setRelease;
-    private setAttribution;
-    private onBaseLayerChange;
+    private updateAttribution;
 }
 export { MapTripLeafletGridLayer };

package/dist/api-extensions/maplibre/MapLibreStyleFactory.d.ts

@@ -0,0 +1,21 @@
+import { StyleSpecification } from 'maplibre-gl';
+import { RENDERING_CONFIG } from '../../types/interfaces.js';
+declare class MapLibreStyleFactory {
+    private protocolId;
+    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;
+    private getTileCanvasAsync;
+}
+export { MapLibreStyleFactory };

package/dist/core/VectorTileRenderer.d.ts

@@ -41,6 +41,13 @@ declare class VectorTileRenderer {
         x: number;
         y: number;
     }[];
+    /**
+     * @private
+     */
+    translatePolyline(points: {
+        x: number;
+        y: number;
+    }[], delta: number): void;
     /**
      * @private
      */
@@ -99,6 +106,7 @@ declare class VectorTileRenderer {
             dashColor: undefined;
             dashLength: number;
             opacity: number;
+            delta: number;
         };
         IMAGE: {
             url: undefined;

package/dist/core/constants.d.ts

@@ -1,4 +1,4 @@
-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 URL_TEMPLATE = "https://v${index}.maptrip.de/?tilex=${x}&tiley=${y}&acao=true&context=level${z}&project=${project}&projection=wgs84";
 export declare const PROVIDER_PROJECTS: {
     [key: string]: string;
 };
@@ -8,8 +8,9 @@ export declare const PROVIDER_NAMES: {
 export declare const PROVIDER_TRAFFIC: {
     [key: string]: string | null;
 };
+export declare const DEFAULT_PROVIDER = "OpenStreetmap";
 export declare const MIN_ZOOM = 2;
-export declare const MAX_ZOOM = 18;
+export declare const MAX_ZOOM = 21;
 export declare const ATTRIBUTION = "&#169;&nbsp;<a href=\"https://maptrip.de/\" target=\"_blank\">infoware GmbH</a>";
 export declare const VECTOR_TILE_SIZE = 256;
 export declare const VECTOR_TILE_RENDER_PADDING = 32;

package/dist/core/rendering_config_default.d.ts

@@ -33,9 +33,15 @@ declare const RENDERING_CONFIG_DEFAULT: {
         interstateNumbers: string;
         expresswayNumbers: string;
         expresswayintersections: string;
-        trafficFlowFast: string;
-        trafficFlowMedium: string;
-        trafficFlowSlow: string;
+        trafficFlowFastHighway: string;
+        trafficFlowFastInterstate: string;
+        trafficFlowFastMinor: string;
+        trafficFlowMediumHighway: string;
+        trafficFlowMediumInterstate: string;
+        trafficFlowMediumMinor: string;
+        trafficFlowSlowHighway: string;
+        trafficFlowSlowInterstate: string;
+        trafficFlowSlowMinor: string;
         trafficJam: string;
         roadworks: string;
         dangerousSituation: string;
@@ -105,13 +111,6 @@ declare const RENDERING_CONFIG_DEFAULT: {
             };
         }[];
         forest: ({
-            from: number;
-            to: number;
-            polygon: {
-                color: string;
-            };
-            text?: undefined;
-        } | {
             from: number;
             to: number;
             polygon: {
@@ -123,15 +122,15 @@ declare const RENDERING_CONFIG_DEFAULT: {
                 font: string;
                 fontStyle: string;
             };
-        })[];
-        natural_park: ({
+        } | {
             from: number;
             to: number;
             polygon: {
                 color: string;
             };
             text?: undefined;
-        } | {
+        })[];
+        natural_park: ({
             from: number;
             to: number;
             polygon: {
@@ -143,6 +142,13 @@ declare const RENDERING_CONFIG_DEFAULT: {
                 font: string;
                 fontStyle: string;
             };
+        } | {
+            from: number;
+            to: number;
+            polygon: {
+                color: string;
+            };
+            text?: undefined;
         })[];
         water: {
             from: number;
@@ -177,28 +183,85 @@ declare const RENDERING_CONFIG_DEFAULT: {
                 outlineWidth: number;
             };
         }[];
-        trafficFlowFast: {
+        trafficFlowFastHighway: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowFastInterstate: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowFastMinor: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowMediumHighway: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowMediumInterstate: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowMediumMinor: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowSlowHighway: {
             from: number;
             to: number;
             line: {
                 color: string;
                 width: number;
+                delta: number;
             };
         }[];
-        trafficFlowMedium: {
+        trafficFlowSlowInterstate: {
             from: number;
             to: number;
             line: {
                 color: string;
                 width: number;
+                delta: number;
             };
         }[];
-        trafficFlowSlow: {
+        trafficFlowSlowMinor: {
             from: number;
             to: number;
             line: {
                 color: string;
                 width: number;
+                delta: number;
             };
         }[];
         trafficJam: {
@@ -362,22 +425,6 @@ declare const RENDERING_CONFIG_DEFAULT: {
                 outlineColor: string;
                 outlineWidth: number;
             };
-        } | {
-            from: number;
-            to: number;
-            line: {
-                width: number;
-                color: string;
-                outlineColor?: undefined;
-                outlineWidth?: undefined;
-            };
-            text: {
-                size: number;
-                color: string;
-                font: string;
-                outlineColor: string;
-                outlineWidth: number;
-            };
         } | {
             from: number;
             to: number;
@@ -413,10 +460,10 @@ declare const RENDERING_CONFIG_DEFAULT: {
             line: {
                 width: number;
                 color: string;
+                outlineColor: string;
+                outlineWidth: number;
                 url?: undefined;
                 direction?: undefined;
-                outlineColor?: undefined;
-                outlineWidth?: undefined;
             };
             text: {
                 size: number;
@@ -462,10 +509,10 @@ declare const RENDERING_CONFIG_DEFAULT: {
             line: {
                 width: number;
                 color: string;
+                outlineColor: string;
+                outlineWidth: number;
                 url?: undefined;
                 direction?: undefined;
-                outlineColor?: undefined;
-                outlineWidth?: undefined;
             };
             text: {
                 size: number;
@@ -591,7 +638,7 @@ declare const RENDERING_CONFIG_DEFAULT: {
                 outlineWidth: number;
             };
         })[];
-        foot_path: {
+        foot_path: ({
             from: number;
             to: number;
             line: {
@@ -607,7 +654,17 @@ declare const RENDERING_CONFIG_DEFAULT: {
                 outlineColor: string;
                 outlineWidth: number;
             };
-        }[];
+        } | {
+            from: number;
+            to: number;
+            line: {
+                width: number;
+                color: string;
+                dashColor: string;
+                dashLength: number;
+            };
+            text?: undefined;
+        })[];
         rail: ({
             from: number;
             to: number;

package/dist/core/rendering_config_grayscale.d.ts

@@ -33,9 +33,15 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
         interstateNumbers: string;
         expresswayNumbers: string;
         expresswayintersections: string;
-        trafficFlowFast: string;
-        trafficFlowMedium: string;
-        trafficFlowSlow: string;
+        trafficFlowFastHighway: string;
+        trafficFlowFastInterstate: string;
+        trafficFlowFastMinor: string;
+        trafficFlowMediumHighway: string;
+        trafficFlowMediumInterstate: string;
+        trafficFlowMediumMinor: string;
+        trafficFlowSlowHighway: string;
+        trafficFlowSlowInterstate: string;
+        trafficFlowSlowMinor: string;
         trafficJam: string;
         roadworks: string;
         dangerousSituation: string;
@@ -105,13 +111,6 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
             };
         }[];
         forest: ({
-            from: number;
-            to: number;
-            polygon: {
-                color: string;
-            };
-            text?: undefined;
-        } | {
             from: number;
             to: number;
             polygon: {
@@ -123,15 +122,15 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
                 font: string;
                 fontStyle: string;
             };
-        })[];
-        natural_park: ({
+        } | {
             from: number;
             to: number;
             polygon: {
                 color: string;
             };
             text?: undefined;
-        } | {
+        })[];
+        natural_park: ({
             from: number;
             to: number;
             polygon: {
@@ -143,6 +142,13 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
                 font: string;
                 fontStyle: string;
             };
+        } | {
+            from: number;
+            to: number;
+            polygon: {
+                color: string;
+            };
+            text?: undefined;
         })[];
         water: {
             from: number;
@@ -177,28 +183,85 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
                 outlineWidth: number;
             };
         }[];
-        trafficFlowFast: {
+        trafficFlowFastHighway: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowFastInterstate: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowFastMinor: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowMediumHighway: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowMediumInterstate: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowMediumMinor: {
+            from: number;
+            to: number;
+            line: {
+                color: string;
+                width: number;
+                delta: number;
+            };
+        }[];
+        trafficFlowSlowHighway: {
             from: number;
             to: number;
             line: {
                 color: string;
                 width: number;
+                delta: number;
             };
         }[];
-        trafficFlowMedium: {
+        trafficFlowSlowInterstate: {
             from: number;
             to: number;
             line: {
                 color: string;
                 width: number;
+                delta: number;
             };
         }[];
-        trafficFlowSlow: {
+        trafficFlowSlowMinor: {
             from: number;
             to: number;
             line: {
                 color: string;
                 width: number;
+                delta: number;
             };
         }[];
         trafficJam: {
@@ -362,22 +425,6 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
                 outlineColor: string;
                 outlineWidth: number;
             };
-        } | {
-            from: number;
-            to: number;
-            line: {
-                width: number;
-                color: string;
-                outlineColor?: undefined;
-                outlineWidth?: undefined;
-            };
-            text: {
-                size: number;
-                color: string;
-                font: string;
-                outlineColor: string;
-                outlineWidth: number;
-            };
         } | {
             from: number;
             to: number;
@@ -413,10 +460,10 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
             line: {
                 width: number;
                 color: string;
+                outlineColor: string;
+                outlineWidth: number;
                 url?: undefined;
                 direction?: undefined;
-                outlineColor?: undefined;
-                outlineWidth?: undefined;
             };
             text: {
                 size: number;
@@ -462,10 +509,10 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
             line: {
                 width: number;
                 color: string;
+                outlineColor: string;
+                outlineWidth: number;
                 url?: undefined;
                 direction?: undefined;
-                outlineColor?: undefined;
-                outlineWidth?: undefined;
             };
             text: {
                 size: number;
@@ -605,7 +652,7 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
                 outlineWidth: number;
             };
         })[];
-        foot_path: {
+        foot_path: ({
             from: number;
             to: number;
             line: {
@@ -621,7 +668,17 @@ declare const RENDERING_CONFIG_GRAYSCALE: {
                 outlineColor: string;
                 outlineWidth: number;
             };
-        }[];
+        } | {
+            from: number;
+            to: number;
+            line: {
+                width: number;
+                color: string;
+                dashColor: string;
+                dashLength: number;
+            };
+            text?: undefined;
+        })[];
         rail: ({
             from: number;
             to: number;