@maptrip/map-tiles 1.0.8

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,245 @@
+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 };

package/lib/core/VectorTileLoader.js

@@ -0,0 +1,127 @@
+class VectorTileLoader {
+
+	constructor(properties) {
+		this._properties = properties ? { ...VectorTileLoader.DEFAULT_PROPERTIES, ...properties } : VectorTileLoader.DEFAULT_PROPERTIES;
+
+		this._tiles = [];
+		this._numLoading = 0;
+	}
+
+	queue(tile, successCallback, errorCallback) {
+		this._tiles.push({ tile: tile, successCallback: successCallback, errorCallback: errorCallback });
+	}
+
+	loadNext() {
+		if (this._numLoading >= this._properties.parallelDownloads) {
+			return;
+		}
+
+		if (this._tiles.length > 0) {
+			// filter all files with wrong zoom levels
+			let latestZoom = this._tiles[this._tiles.length - 1].tile.z;
+			this._tiles = this._tiles.filter(function(tile) {
+				return latestZoom === tile.tile.z;
+			}.bind(this));
+
+			// load the first tile
+			var next = this._tiles.shift();
+			if (!next) {
+				return;
+			}
+
+			// load all URLs for that tile
+			this.loadAllUrls(next, next.tile.urls);
+		}
+	}
+
+	/**
+	 * Checks if a HTTP Request is successful
+	 *
+	 * @param {XMLHttpRequest} httpRequest
+	 *
+	 * @return {boolean}
+	 */
+	isHttpRequestSuccessful(httpRequest) {
+		return httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200 && httpRequest.responseText.length > 0;
+	}
+
+	/**
+	 * 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) {
+		return this.isHttpRequestTimeout(httpRequest) || httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status >= 400;
+	}
+
+	/**
+	 * Checks if a HTTP Request has timed out
+	 *
+	 * @param {XMLHttpRequest} httpRequest
+	 *
+	 * @return {boolean}
+	 */
+	isHttpRequestTimeout(httpRequest) {
+		return httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 0;
+	}
+
+	loadAllUrls(tile, urls) {
+		var url = urls.pop();
+
+		var xhr = new XMLHttpRequest();
+		xhr.onreadystatechange = function() {
+			if (xhr.readyState !== XMLHttpRequest.DONE) {
+				return;
+			}
+
+			if (this.isHttpRequestSuccessful(xhr)) {
+				var json = JSON.parse(xhr.responseText); // XXX bei Fehlern des Data Servers kommt hier kein JSON sondern XML!
+
+				if (!tile.json) {
+					tile.json = json;
+				}
+				else {
+					tile.json.features = tile.json.features.concat(json.features);
+				}
+
+				if (urls.length === 0) {
+					// no more URLs left, so call the callback
+					tile.successCallback(tile.json);
+				}
+				else {
+					// load the remaining URLs
+					this.loadAllUrls(tile, urls);
+				}
+			}
+
+			if (this.isHttpRequestFailed(xhr) || this.isHttpRequestTimeout(xhr)) {
+				tile.errorCallback(xhr.responseText);
+			}
+
+			this._numLoading--;
+			this.loadNext();
+		}.bind(this);
+
+		xhr.ontimeout = function() {
+			tile.errorCallback(xhr.responseText);
+			this._numLoading--;
+			this.loadNext();
+		}.bind(this);
+
+		xhr.open('GET', url, true);
+		xhr.setRequestHeader('Authorization', `Bearer ${tile.tile.token}`);
+		xhr.timeout = this._properties.timeout;
+		xhr.send(null);
+
+		this._numLoading++;
+	}
+
+	static DEFAULT_PROPERTIES = {
+		timeout: 5000,
+		parallelDownloads: 12
+	};
+}
+
+export { VectorTileLoader };