@maptrip/map-tiles 1.1.0 → 1.2.0

package/lib/{main.js → main.ts}

@@ -1,3 +1,4 @@
+import type * as types from "./types/interfaces.js";
 import { VectorTileFactory } from "./core/VectorTileFactory.js";
 import { RENDERING_CONFIG_DEFAULT } from "./core/rendering_config_default.js";
 import { RENDERING_CONFIG_GRAYSCALE } from "./core/rendering_config_grayscale.js";
@@ -15,4 +16,5 @@ export {
   MapTripLeafletGridLayer,
   MapTripGoogleMapType,
   MapTripOpenLayersSource,
+  types,
 };

package/lib/types/interfaces.ts

@@ -0,0 +1,147 @@
+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/package.json

@@ -1,10 +1,12 @@
 {
   "name": "@maptrip/map-tiles",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "API to use MapTrip map tiles in other map APIs",
   "keywords": [
     "map",
-    "mapping"
+    "mapping",
+    "typescript",
+    "vector tiles"
   ],
   "author": "infoware GmbH",
   "license": "ISC",
@@ -13,33 +15,36 @@
     "dist",
     "lib"
   ],
-  "main": "./dist/map-tiles.js",
-  "exports": {
-    ".": {
-      "import": "./dist/map-tiles.js"
-    }
-  },
+  "main": "dist/map-tiles.js",
+  "types": "dist/map-tiles.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "vite src",
-    "build": "vite build",
-    "prepublishOnly": "npm run build"
+    "prepublish": "tsc",
+    "build": "tsc && vite build"
   },
   "devDependencies": {
-    "vite": "^4.5.0",
+    "@googlemaps/js-api-loader": "^1.16.2",
+    "@types/google.maps": "^3.55.4",
+    "@types/leaflet": "^1.9.8",
+    "@types/rtree": "^1.4.30",
     "eslint": "^8.52.0",
     "leaflet": "~1.9.x",
     "ol": "~8.2.x",
-    "@googlemaps/js-api-loader": "^1.16.2"
+    "typescript": "^5.4.5",
+    "vite": "^4.5.0"
   },
   "dependencies": {
+    "@types/geojson": "^7946.0.14",
+    "@types/webfontloader": "^1.6.38",
     "rtree": "^1.4.2",
+    "vite-plugin-dts": "^3.9.0",
     "webfontloader": "^1.6.28"
   },
   "peerDependencies": {
+    "@googlemaps/js-api-loader": "^1.16.2",
     "leaflet": "~1.9.x",
-    "ol": "~8.2.x",
-    "@googlemaps/js-api-loader": "^1.16.2"
+    "ol": "~8.2.x"
   },
   "directories": {
     "lib": "lib"

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

@@ -1,25 +0,0 @@
-import { VectorTileFactory } from "../../core/VectorTileFactory";
-import { MIN_ZOOM, MAX_ZOOM } from "../../core/constants";
-
-class MapTripGoogleMapType {
-	tileSize = new google.maps.Size(256, 256);
-	alt = null;
-	maxZoom = MAX_ZOOM;
-	minZoom = MIN_ZOOM;
-	projection = null;
-	radius = 6378137;
-
-	constructor(properties) {
-		this.name = properties.name ? properties.name : 'infoware';
-		this.token = properties.token;
-		this.factory = VectorTileFactory.createFactory(properties);
-	}
-	
-	getTile(coord, zoom) {
-		return this.factory.getJsonTile(zoom, coord.x, coord.y, this.token);
-	}
-	
-	releaseTile() {}
-}
-
-export { MapTripGoogleMapType };

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

@@ -1,24 +0,0 @@
-import L from "leaflet";
-
-import { VectorTileFactory } from "../../core/VectorTileFactory";
-import { MIN_ZOOM, MAX_ZOOM, ATTRIBUTION } from "../../core/constants";
-
-const MapTripLeafletGridLayer = L.GridLayer.extend({
-	
-	MIN_ZOOM: MIN_ZOOM,
-	MAX_ZOOM: MAX_ZOOM,
-	
-	initialize: function(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) {
-		return this.factory.getJsonTile(coords.z, coords.x, coords.y, this.token);
-	}
-});
-
-export { MapTripLeafletGridLayer };

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

@@ -1,43 +0,0 @@
-import XYZ from 'ol/source/XYZ.js';
-import { createXYZ, extentFromProjection } from 'ol/tilegrid.js';
-
-import { VectorTileFactory } from "../../core/VectorTileFactory";
-import { MIN_ZOOM, MAX_ZOOM, ATTRIBUTION } from "../../core/constants";
-
-class MapTripOpenLayersSource extends XYZ {
-	constructor(properties) {
-
-		const options = {};
-		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, () => {
-					tile.setImage(canvas);
-				})
-			},
-			attributions: ATTRIBUTION
-		});
-
-		this.token = properties.token;
-		this.factory = VectorTileFactory.createFactory(properties);
-	}
-}
-
-export { MapTripOpenLayersSource };

package/lib/core/CollisionDetector.js

@@ -1,65 +0,0 @@
-import RTree from 'rtree';
-
-class CollisionDetector {
-	constructor() {
-		this._tree = RTree(10);		
-	}
-
-	insert(x, y, w, h) {	
-		this._tree.insert({ x: x, y: y, w: w, h: h}, 0);
-	}
-
-	insertPolylineText(context, text, position) {
-		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, y, w, h) {
-		return this._tree.search({ x: x, y: y, w: w, h: h }).length > 0;
-	}
-	
-	isPolylineTextCollision(context, text, position) {
-		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, text, position) {
-		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.js

@@ -1,245 +0,0 @@
-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';
-
-/**
- * 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 {
-	
-	static _fonts = undefined;
-	
-	constructor(urls, additionalUrls, renderingConfig, properties)
-	{
-		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) {			
-			//console.log(this._renderer.findConfiguredFonts()); // TODO create families string like Open Sans:n4,n7,i4,i7
-	
-			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: function() {
-					VectorTileFactory._fonts = 'active';
-					this._tileLoader.loadNext();
-				}.bind(this),
-				inactive: function() {
-					// font loading failed
-					VectorTileFactory._fonts = 'active';
-					this._tileLoader.loadNext();
-				}.bind(this)
-			});
-		}
-	}
-
-	static createFactory(properties) {
-		// 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);
-	}
-	
-	static getUrlTemplatesForBaseLayer(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));
-		}
-		else {
-			return [];
-		}
-	}
-	
-	static getUrlTemplatesForTrafficLayer(properties) {
-		return properties.traffic ? [PROVIDER_TRAFFIC[properties.provider]] : [];
-	}
-	
-	static getRenderingConfig(properties) {
-		if (properties.renderingConfig) {
-			return properties.renderingConfig;
-		}
-		else if (properties.baseMap) {
-			return RENDERING_CONFIG_DEFAULT;
-		}
-		else {
-			return RENDERING_CONFIG_TRAFFIC;
-		}
-	}
-	
-	getJsonTile(z, x, y, token, callback) {
-		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 => {
-			urls.push(it.replace('${x}', x).replace('${y}', y).replace(/\$\{z\}/g, z));
-		});
-
-		let tileLoadedSuccessfullyCallback = function(json) {
-			this.drawTile(json, z, x, y, canvas);
-
-			if (callback) {
-				callback(canvas);
-			}
-		}.bind(this);
-
-		let tile_FailedCallback = function() {
-			this.drawErroredTile(canvas);
-
-			if (callback) {
-				callback(null);
-			}
-		}.bind(this);
-
-		this._tileLoader.queue(
-			{ x: x, y: y, z: z, urls: urls, token: token },
-			tileLoadedSuccessfullyCallback,
-			tile_FailedCallback
-		);
-
-		if (VectorTileFactory._fonts === 'active') {
-			this._tileLoader.loadNext();
-		}
-
-		return canvas;
-	}
-
-	/**
-	 * @private
-	 */
-	resolveTileUrl(z, x, y) {
-		if (this._urls.length > 0) {
-			var index = (x + y + z) % this._urls.length;
-	
-			return this._urls[index]
-				.replace('${x}', x)
-				.replace('${y}', y)
-				.replace(/\$\{z\}/g, z)
-				.replace('${layers}', this._layers.join(','));
-		}
-		else {
-			// there is no base map layer
-			return null;
-		}
-	}
-
-	/**
-	 * @private
-	 */
-	tileIndexToLatLong(z, x, y) {
-		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
-	 */
-	getTileBoundaries(z, x, y) {
-		return {
-			min: this.tileIndexToLatLong(z, x, y),
-			max: this.tileIndexToLatLong(z, x + 1, y + 1)
-		}
-	}
-
-	/**
-	 * @private
-	 */
-	drawTile(json, z, x, y, canvas) {
-		var features = this.getFeatures(json).sort(function(a, b) {
-			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;
-				}
-			}
-		});
-
-		this._renderer.drawTile(features, z, this.getTileBoundaries(z, x, y), canvas.getContext('2d'));
-	}
-
-	/**
-	 * Draws an error message on the tile.
-	 *
-	 * @param canvas
-	 */
-	drawErroredTile(canvas) {
-		this._renderer.drawErroredTile(canvas);
-	}
-
-	/**
-	 * @private
-	 */
-	getFeatures(json) {
-		if (json.type && json.type == 'FeatureCollection') {
-			return json.features;
-		}
-	}
-	
-	static DEFAULT_PROPERTIES = {
-		provider: 'OpenStreetmap',
-		baseMap: true,
-		traffic: false
-	};
-}
-
-export { VectorTileFactory };