@maptrip/map-tiles 1.1.0 → 1.2.0

package/lib/core/VectorTileRenderer.js

@@ -1,826 +0,0 @@
-import { CollisionDetector } from './CollisionDetector.js';
-
-class VectorTileRenderer {
-
-	constructor(styles) {
-		this._styles = styles;
-		this._images = {};
-
-		this.preloadImages();
-	}
-
-	drawTile(layer, z, boundaries, context) {
-		context.fillStyle = this.getBackgroundColor(z);
-		context.fillRect(0, 0, 256, 256);
-
-		var collisions = new CollisionDetector();
-
-		let polygons = layer
-			.filter(it => !!it.properties && !!it.geometry.type)
-			.filter(it => it.geometry.type === 'Polygon' || it.geometry.type === 'MultiPolygon')
-			.sort((a, b) => parseInt(a.properties.sort_rank) - parseInt(b.properties.sort_rank));
-
-		let lines = layer
-			.filter(it => !!it.properties)
-			.filter(it => it.geometry.type === 'LineString' || it.geometry.type === 'MultiLineString')
-			.sort((a, b) => parseInt(a.properties.sort_rank) - parseInt(b.properties.sort_rank));
-
-		let points = layer
-			.filter(it => !!it.properties)
-			.filter(it => it.geometry.type === 'Point')
-			.sort((a, b) => parseInt(a.properties.sort_rank) - parseInt(b.properties.sort_rank));
-
-		this.drawTilePhase(polygons, z, boundaries, context, 'areas');
-		this.drawPolylineLayers(lines, z, boundaries, context);
-		this.drawTilePhase(points, z, boundaries, context, 'texts', collisions);
-		this.drawTilePhase(lines, z, boundaries, context, 'lineTexts', collisions);
-		this.drawTilePhase(polygons, z, boundaries, context, 'areaTexts', collisions); // for rivers etc (i.e. less important than the other texts)
-	}
-
-	drawPolylineLayers(lines, z, boundaries, context) {
-		let rank = lines
-			.map(it => parseInt(it.properties.sort_rank))
-			.filter((value, index, self) => self.indexOf(value) === index)
-			.sort((a, b) => a - b);
-
-		for (let i = 0; i < rank.length; i++) {
-			// select all lines with this sort rank
-			let currentRank = lines.filter(it => parseInt(it.properties.sort_rank) === rank[i]);
-
-			this.drawTilePhase(currentRank, z, boundaries, context, 'linesOutline');
-			this.drawTilePhase(currentRank, z, boundaries, context, 'lines');
-		}
-	}
-
-	drawErroredTile(canvas) {
-		var context = canvas.getContext('2d');
-		context.fillStyle = '#C8C8C8';
-		context.fillRect(0, 0, 256, 256);
-		context.fillStyle = '#AAA';
-		context.font = "15px Arial";
-		context.textAlign = "center";
-		context.fillText("Could not display map tile", canvas.width / 2, canvas.height / 2 - 10);
-		context.fillText("Please refresh", canvas.width / 2, canvas.height / 2 + 10);
-	}
-
-	drawTilePhase(layer, z, boundaries, context, phase, collisions) {
-		var texts = {};
-
-		for (var i = 0; i < layer.length; i++) {
-			var kind = layer[i].properties.kind;
-
-			// look up the renderer for this kind of data
-			var rendererName = this._styles.layers[kind];
-			if (rendererName && this._styles.renderers[rendererName]) {
-				var renderer = this._styles.renderers[rendererName];
-
-				for (var j = 0; j < renderer.length; j++) {
-					if (renderer[j].from <= z && renderer[j].to >= z) {
-						// this definition is used for the current zoom layer
-
-						if (this.accept(renderer[j], layer[i])) // apply filters 
-						{
-							if (layer[i].geometry.type === 'Polygon') {
-								if ((phase === 'areasOutline' || phase === 'areas') && renderer[j].polygon) {
-									this.drawPolygon(layer[i].geometry.coordinates, layer[i].properties, z, boundaries, renderer[j].polygon, context, phase);
-								}
-								else if (phase === 'areaTexts' && renderer[j].text) {
-									this.drawPolygon(layer[i].geometry.coordinates, layer[i].properties, z, boundaries, renderer[j].text, context, phase, collisions, texts);
-								}
-
-							}
-							else if (layer[i].geometry.type === 'MultiPolygon') {
-								if ((phase === 'areasOutline' || phase === 'areas') && renderer[j].polygon) {
-									for (let k = 0; k < layer[i].geometry.coordinates.length; k++) {
-										this.drawPolygon(layer[i].geometry.coordinates[k], layer[i].properties, z, boundaries, renderer[j].polygon, context, phase);
-									}
-								}
-								else if (phase === 'areaTexts' && renderer[j].text) {
-									for (let k = 0; k < layer[i].geometry.coordinates.length; k++) {
-										this.drawPolygon(layer[i].geometry.coordinates[k], layer[i].properties, z, boundaries, renderer[j].text, context, phase, collisions, texts);
-									}
-								}
-							}
-							else if (layer[i].geometry.type === 'LineString') {
-								if ((phase === 'linesOutline' || phase === 'lines') && renderer[j].line) {
-									this.drawPolyline(layer[i].geometry.coordinates, layer[i].properties, boundaries, renderer[j].line, context, phase);
-								}
-								else if (phase === 'lineTexts' && renderer[j].text) {
-									this.drawPolylineText(layer[i].geometry.coordinates, layer[i].properties, boundaries, renderer[j].text, context, collisions, texts);
-								}
-							}
-							else if (layer[i].geometry.type === 'MultiLineString') {
-								if ((phase === 'linesOutline' || phase === 'lines') && renderer[j].line) {
-									for (let k = 0; k < layer[i].geometry.coordinates.length; k++) {
-										this.drawPolyline(layer[i].geometry.coordinates[k], layer[i].properties, boundaries, renderer[j].line, context, phase);
-									}
-								}
-								else if (phase === 'lineTexts' && renderer[j].text) {
-									for (let k = 0; k < layer[i].geometry.coordinates.length; k++) {
-										this.drawPolylineText(layer[i].geometry.coordinates[k], layer[i].properties, boundaries, renderer[j].text, context, collisions, texts);
-									}
-								}
-							}
-							else if (layer[i].geometry.type === 'Point') {
-								if (phase === 'texts' && renderer[j].text) {
-									var text = layer[i].properties['name'] ? layer[i].properties['name'] : layer[i].properties['TEXT'];
-
-									if (text) {
-										// if there is a text and an image to render, first check for collisions and then render both of them or none
-
-										if (!this.isTextCollision(layer[i].geometry.coordinates, text, boundaries, renderer[j].text, context, collisions)) {
-											if (text.match(/([A-Z])\s?([0-9]+[a-z]*).*/)) {
-												// text is like A3, B9, B55a or L134 -> draw Autobahn and Bundesstrasse, ignore otherwise
-												if ('A' === RegExp.$1 || 'B' === RegExp.$1) {
-													// Simplify B55 to 55, B55a to 55a
-													text = RegExp.$2;
-
-													this.drawImage(layer[i].geometry.coordinates, boundaries, renderer[j].image, context);
-													this.drawText(layer[i].geometry.coordinates, text, boundaries, renderer[j].text, context, collisions);
-												}
-											}
-											else {
-												this.drawText(layer[i].geometry.coordinates, text, boundaries, renderer[j].text, context, collisions);
-											}
-										}
-									}
-									else {
-										this.drawImage(layer[i].geometry.coordinates, boundaries, renderer[j].image, context);
-									}
-								}
-							}
-						}
-					}
-				}
-			}
-			/*else
-			{
-				if (layer[i].geometry.type && layer[i].geometry.type.indexOf('Polygon') >= 0)
-				{				
-					console.log('No config found for kind', kind, 'of type', layer[i].geometry.type);
-				}
-			}*/
-		}
-	}
-
-	/**
-	 * @private
-	 */
-	getBackgroundColor(z) {
-		if (this._styles.background) {
-			for (var i = 0; i < this._styles.background.length; i++) {
-				if (this._styles.background[i].from <= z && this._styles.background[i].to >= z) {
-					return this._styles.background[i].color;
-				}
-			}
-		}
-
-		return '#ffffff';
-	}
-
-	/**
-	 * @private
-	 */
-	accept(style, layer) {
-		if (style.filters) {
-			for (var i = 0; i < style.filters.length; i++) {
-				var filter = style.filters[i];
-
-				if (filter.type == 'minimum') {
-					if (layer.properties[filter.key]) {
-						let value = layer.properties[filter.key];
-						if (value < filter.value) {
-							return false;
-						}
-					}
-				}
-				else if (filter.type == 'equals not') {
-					if (layer.properties[filter.key]) {
-						let value = layer.properties[filter.key];
-						if (value == filter.value) {
-							return false;
-						}
-					}
-				}
-			}
-		}
-
-		return true;
-	}
-
-	/**
-	 * @private
-	 */
-	drawPolygon(coordinates, properties, z, boundaries, style, context, phase, collisions, texts) {
-		var merged = { ...VectorTileRenderer.DEFAULT_STYLE.POLYGON, ...style };
-
-		for (var j = 0; j < coordinates.length; j++) {
-			var part = coordinates[j];
-
-			context.globalAlpha = merged.opacity;
-			context.beginPath();
-
-			var points = [];
-
-			for (let k = 0; k < part.length; k++) {
-				let x = 256 * (part[k][0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon);
-				let y = 256 * (part[k][1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat);
-
-				points.push({ x: x, y: y });
-
-				if (k == 0) {
-					context.moveTo(x, y);
-				}
-				else {
-					context.lineTo(x, y);
-				}
-			}
-
-			context.closePath();
-
-			// doesn't work (see comment above)
-			if ('areasOutline' === phase) {
-				if (merged.outlineColor && merged.outlineWidth) {
-					context.strokeStyle = merged.outlineColor;
-					context.lineWidth = merged.outlineWidth;
-					context.stroke();
-				}
-
-				return;
-			}
-			else if ('areas' === phase) {
-				if (merged.url) {
-					if (this._images[merged.url]) {
-						var pattern = context.createPattern(this._images[merged.url], 'repeat');
-						context.fillStyle = pattern;
-					}
-				}
-				else {
-					if (z <= 7) // draw an outline to prevent raster lines (see INWA-997)
-					{
-						context.strokeStyle = merged.color;
-						context.lineWidth = 1;
-						context.stroke();
-					}
-
-					context.fillStyle = merged.color;
-				}
-
-				context.fill();
-			}
-			else if ('areaTexts' === phase) {
-				if (properties && properties.NAME) {
-					// skip texts which already are in this tile
-					if (texts[properties.NAME]) {
-						return;
-					}
-
-					merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
-
-					context.globalAlpha = merged.opacity;
-					context.font = merged.fontStyle + ' ' + merged.fontWeight + ' ' + merged.size + 'px ' + merged.font;
-					context.textAlign = 'left';
-					context.textBaseline = 'top';
-
-					var metrics = context.measureText(properties.NAME);
-
-					var centroid = this.getCentroid(points);
-					let x = centroid.x - 0.5 * metrics.width;
-					let y = centroid.y;
-
-					let w = metrics.width;
-					let h = merged.size;
-
-					// skip texts outside a tile
-					if (x < 0 || x + w > 256 || y < 0 || y + h > 256) {
-						return;
-					}
-
-					// skip texts colliding with other texts
-					if (collisions.isCollision(x, y, w, h)) {
-						return;
-					}
-
-					if (merged.outlineColor && merged.outlineWidth) {
-						context.lineWidth = merged.outlineWidth;
-						context.strokeStyle = merged.outlineColor;
-						context.strokeText(properties.NAME, x, y);
-					}
-
-					context.fillStyle = merged.color;
-					context.fillText(properties.NAME, x, y);
-
-					collisions.insert(x, y, w, h);
-
-					texts[properties.NAME] = true;
-				}
-			}
-		}
-	}
-
-	getCentroid(vertices) {
-		var centroid = { x: 0, y: 0 };
-		var signedArea = 0.0;
-		var x0 = 0.0; // Current vertex X
-		var y0 = 0.0; // Current vertex Y
-		var x1 = 0.0; // Next vertex X
-		var y1 = 0.0; // Next vertex Y
-		var a = 0.0;  // Partial signed area
-
-		// For all vertices except last
-		for (var i = 0; i < vertices.length - 1; i++) {
-			x0 = vertices[i].x;
-			y0 = vertices[i].y;
-			x1 = vertices[i + 1].x;
-			y1 = vertices[i + 1].y;
-			a = x0 * y1 - x1 * y0;
-			signedArea += a;
-			centroid.x += (x0 + x1) * a;
-			centroid.y += (y0 + y1) * a;
-		}
-
-		// Do last vertex separately to avoid performing an expensive
-		// modulus operation in each iteration.
-		x0 = vertices[i].x;
-		y0 = vertices[i].y;
-		x1 = vertices[0].x;
-		y1 = vertices[0].y;
-		a = x0 * y1 - x1 * y0;
-		signedArea += a;
-		centroid.x += (x0 + x1) * a;
-		centroid.y += (y0 + y1) * a;
-
-		signedArea *= 0.5;
-		centroid.x /= (6.0 * signedArea);
-		centroid.y /= (6.0 * signedArea);
-
-		return centroid;
-	}
-
-	getBBox(coordinates) {
-		var bbox = {
-			min: {
-				x: coordinates[0].x,
-				y: coordinates[0].y
-			},
-			max: {
-				x: coordinates[0].x,
-				y: coordinates[0].y
-			}
-		};
-
-		for (var i = 1; i < coordinates.length; i++) {
-			bbox.min.x = Math.min(bbox.min.x, coordinates[i].x);
-			bbox.min.y = Math.min(bbox.min.y, coordinates[i].y);
-			bbox.max.x = Math.max(bbox.max.x, coordinates[i].x);
-			bbox.max.y = Math.max(bbox.max.y, coordinates[i].y);
-		}
-
-		return bbox;
-	}
-
-	/**
-	 * @private
-	 */
-	projectCoordinates(coordinates, boundaries) {
-		var lastX, lastY;
-		var points = [];
-
-		for (var j = 0; j < coordinates.length; j++) {
-			var x = Math.round(256 * (coordinates[j][0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon));
-			var y = Math.round(256 * (coordinates[j][1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat));
-
-			if (x != lastX || y != lastY) {
-				points.push({ x: x, y: y });
-			}
-
-			lastX = x;
-			lastY = y;
-		}
-
-		return points;
-	}
-
-	/**
-	 * @private
-	 */
-	drawPolyline(coordinates, properties, boundaries, style, context, phase) {
-		var merged = { ...VectorTileRenderer.DEFAULT_STYLE.LINE, ...style };
-		context.globalAlpha = merged.opacity;
-
-		if ('linesOutline' === phase) {
-			if (merged.outlineColor && merged.outlineWidth) {
-				let points = this.projectCoordinates(coordinates, boundaries);
-				this.drawPath(points, merged.outlineColor, merged.width + merged.outlineWidth * 2, context);
-			}
-
-			return;
-		}
-
-		let points = this.projectCoordinates(coordinates, boundaries);
-		this.drawPath(points, merged.color, merged.width, context, merged.url);
-
-		if (merged.dashColor && merged.dashLength) {
-			context.setLineDash([merged.dashLength, merged.dashLength]);
-			this.drawPath(points, merged.dashColor, merged.width, context);
-			context.setLineDash([]);
-		}
-
-		// draw images on the line (e.g. arrows for one-way roads)
-		if (merged.url && this._images[merged.url]) {
-			var desired = 40; // XXX config
-			var distance = Math.round(desired / 2);
-
-			for (var i = 0; i < points.length - 1; i++) {
-				// calculate angle of this section of the line
-				var dx = points[i + 1].x - points[i].x;
-				var dy = points[i + 1].y - points[i].y;
-				var angle = Math.atan2(dy, dx);
-
-				if (merged.direction != 'reverse') {
-					angle = angle + Math.PI;
-				}
-
-				// now calculate equidistant points on the polyline
-				var distanceToNext = Math.sqrt(dx * dx + dy * dy);
-				while (distance < distanceToNext) {
-					// there are more points on this section of the line
-					var f = distance / distanceToNext;
-
-					var x = points[i].x + f * dx;
-					var y = points[i].y + f * dy;
-
-					context.save();
-
-					context.translate(x, y);
-					context.rotate(angle);
-					context.translate(-x, -y);
-
-					context.drawImage(this._images[merged.url], x + merged.dx, y + merged.dy, merged.width, merged.height);
-
-					context.restore();
-
-					distance += desired;
-				}
-
-				distance = (desired - (distanceToNext - distance)) % desired;
-			}
-		}
-	}
-
-	drawPolylineText(coordinates, properties, boundaries, style, context, collisions, texts) {
-		if (!properties || !properties.NAME || coordinates.length < 2) {
-			return;
-		}
-
-		var text = properties.NAME;
-
-		if (texts[text]) {
-			// there already is a label for this street on this tile
-			return;
-		}
-
-		var merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
-
-		context.globalAlpha = merged.opacity;
-		context.font = merged.fontStyle + ' ' + merged.fontWeight + ' ' + merged.size + 'px ' + merged.font;
-
-		var points = this.projectCoordinates(coordinates, boundaries);
-		if (points.length < 2) {
-			return;
-		}
-
-		var last = points[points.length - 1];
-		var first = points[0];
-
-		var dx = last.x - first.x;
-		if (dx < 0) // if road segment goes to the left, the text should be flipped (to prevent the text being upside down)
-		{
-			points.reverse();
-		}
-
-		var positions = this.getLetterPositions(points, text, context, collisions);
-		if (positions) {
-			context.fillStyle = merged.color;
-			context.textAlign = 'center';
-			context.textBaseline = 'middle';
-
-			if (merged.outlineColor && merged.outlineWidth) {
-				context.lineWidth = merged.outlineWidth;
-				context.strokeStyle = merged.outlineColor;
-
-				for (let i = 0; i < text.length; i++) {
-					this.drawLetter(text.charAt(i), positions[i], merged.outlineWidth, context);
-				}
-			}
-
-			var avgLetterWidth = context.measureText('a').width;
-
-			for (let i = 0; i < text.length; i++) {
-				this.drawLetter(text.charAt(i), positions[i], 0, context);
-				collisions.insertPolylineText(context, text.charAt(i), positions[i], avgLetterWidth);
-			}
-
-			texts[text] = true;
-		}
-	}
-
-	getPolylineLength(points) {
-		var length = 0;
-
-		for (var i = 1; i < points.length; i++) {
-			var current = points[i];
-			var last = points[i - 1];
-			var dx = last.x - current.x;
-			var dy = last.y - current.y;
-
-			length += Math.sqrt(dx * dx + dy * dy);
-		}
-
-		return length;
-	}
-
-	getAngleAndCoordsAtLength(points, dist, width) {
-		var x, y, len = 0;
-
-		var gotxy = false;
-
-		for (var i = 1; i < points.length; i++) {
-			var current = points[i];
-			var last = points[i - 1];
-
-			var dx = current.x - last.x;
-			var dy = current.y - last.y;
-
-			var segLen = Math.sqrt(dx * dx + dy * dy);
-
-			if (!gotxy && len + segLen >= dist) {
-				let partLen = dist - len;
-				x = last.x + dx * partLen / segLen;
-				y = last.y + dy * partLen / segLen;
-
-				gotxy = true;
-			}
-
-			if (gotxy && len + segLen >= dist + width) {
-				let partLen = dist + width - len;
-				dx = last.x + dx * partLen / segLen;
-				dy = last.y + dy * partLen / segLen;
-				var angle = Math.atan2(dy - y, dx - x);
-
-				return {
-					angle: angle,
-					x: x,
-					y: y
-				};
-			}
-
-			len += segLen;
-		}
-	}
-
-	getLetterPositions(points, text, context, collisions) {
-		var pathlength = this.getPolylineLength(points);
-		var widthUsed = 0;
-
-		do {
-			var positions = [];
-
-			for (let i = 0; i < text.length; i++) {
-				var letter = text.charAt(i);
-				var letterWidth = context.measureText(letter).width;
-
-				var position = this.getAngleAndCoordsAtLength(points, widthUsed, letterWidth);
-
-				if (widthUsed < pathlength && !!position) {
-					var collision = collisions.isPolylineTextCollision(context, letter, position);
-					var deltaAngle = positions.length == 0 ? 0 : Math.abs(positions[positions.length - 1].angle - position.angle);
-
-					if (!collision && deltaAngle < Math.PI / 6) {
-						widthUsed += letterWidth;
-						positions.push(position);
-					}
-					else {
-						// there is a collision, so skip 2 letters and try again to place them 
-						widthUsed += 2 * letterWidth;
-						break;
-					}
-				}
-				else {
-					widthUsed += 2 * letterWidth;
-					break;
-				}
-			}
-
-			if (positions.length == text.length) // if all letters have been projected
-			{
-				// count the number of letters which are upside down
-				var halfPi = Math.PI / 2;
-
-				var count = 0;
-				for (let i = 0; i < positions.length; i++) {
-					if (Math.abs(positions[i].angle) > halfPi) {
-						count++;
-					}
-				}
-
-				if (count < text.length / 2) {
-					// most of the text is upside down, so discard it
-					return positions;
-				}
-			}
-		}
-		while (widthUsed < pathlength); // try as long as there is space left
-
-		return null;
-	}
-
-	/**
-	  * @private
-	  */
-	drawLetter(letter, position, outline, context) {
-		var width = context.measureText(letter).width + outline; // XXX
-
-		var x = position.x + 0.5 * Math.cos(position.angle) * width;
-		var y = position.y + 0.5 * Math.sin(position.angle) * width;
-
-		context.translate(x, y);
-		context.rotate(position.angle);
-
-		if (outline) {
-			context.strokeText(letter, 0, 0);
-		}
-		else {
-			context.fillText(letter, 0, 0);
-		}
-
-		context.rotate(-position.angle);
-		context.translate(-x, -y);
-	}
-
-	/**
-	  * @private
-	  */
-	drawPath(points, color, width, context) {
-		context.beginPath();
-
-		context.strokeStyle = color;
-		context.lineWidth = width;
-
-		context.lineCap = 'square';
-		context.lineJoin = 'miter';
-
-		context.moveTo(points[0].x, points[0].y);
-		for (var j = 1; j < points.length; j++) {
-			context.lineTo(points[j].x, points[j].y);
-		}
-		context.stroke();
-	}
-
-	drawImage(coordinate, boundaries, style, context) {
-		var merged = { ...VectorTileRenderer.DEFAULT_STYLE.IMAGE, ...style };
-
-		if (merged.url) {
-			if (this._images[merged.url]) {
-				var x = Math.round(256 * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon));
-				var y = Math.round(256 * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat));
-
-				context.drawImage(this._images[merged.url], x + merged.dx, y + merged.dy, merged.width, merged.height);
-			}
-		}
-	}
-
-	/**
- * @private
- */
-	isTextCollision(coordinate, name, boundaries, style, context, collisions) {
-		var merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
-
-		var x = Math.round(256 * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon));
-		var y = Math.round(256 * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat));
-
-		context.font = merged.fontStyle + ' ' + merged.fontWeight + ' ' + merged.size + 'px ' + merged.font;
-
-		var w = context.measureText(name).width;
-		var h = merged.size; // XXX ???
-
-		x = x - w / 2; // center on x
-
-		return collisions.isCollision(x, y, w, h);
-	}
-
-	/**
-	 * @private
-	 */
-	drawText(coordinate, name, boundaries, style, context, collisions) {
-		var merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...style };
-
-		var x = Math.round(256 * (coordinate[0] - boundaries.min.lon) / (boundaries.max.lon - boundaries.min.lon));
-		var y = Math.round(256 * (coordinate[1] - boundaries.min.lat) / (boundaries.max.lat - boundaries.min.lat));
-
-		context.globalAlpha = merged.opacity;
-		context.font = merged.fontStyle + ' ' + merged.fontWeight + ' ' + merged.size + 'px ' + merged.font;
-
-		var w = context.measureText(name).width;
-		var h = merged.size; // XXX ???
-
-		x = x - w / 2; // center on x
-
-		if (collisions.isCollision(x, y, w, h)) {
-			return;
-		}
-
-		if (merged.outlineColor && merged.outlineWidth) {
-			context.lineWidth = merged.outlineWidth;
-			context.strokeStyle = merged.outlineColor;
-			context.strokeText(name, x, y);
-		}
-
-		context.fillStyle = merged.color;
-		context.fillText(name, x, y);
-
-		collisions.insert(x, y, w, h);
-	}
-
-	preloadImages() {
-		for (var name in this._styles.renderers) {
-			for (var i = 0; i < this._styles.renderers[name].length; i++) {
-				for (var renderer in this._styles.renderers[name][i]) {
-					var config = this._styles.renderers[name][i][renderer];
-
-					if (config.url) {
-						this._images[config.url] = new Image();
-						this._images[config.url].src = config.url; // TODO wait
-
-						this._images[config.url].onerror = function(url) {
-							return function() {
-								delete this._images[url];
-							}.bind(this);
-
-						}.bind(this)(config.url);
-					}
-				}
-			}
-		}
-	}
-
-	findConfiguredFonts() {
-		let result = [];
-
-		for (let renderer in this._styles.renderers) {
-			for (let i = 0; i < this._styles.renderers[renderer].length; i++) {
-				let text = this._styles.renderers[renderer][i].text;
-				if (text) {
-					let merged = { ...VectorTileRenderer.DEFAULT_STYLE.TEXT, ...text };
-					let font = (merged.fontStyle + ' ' + merged.fontWeight + ' ' + merged.size + 'px ' + merged.font).trim();
-					result.push(font);
-				}
-			}
-		}
-		
-		return [...new Set(result)];
-	}
-
-	static DEFAULT_STYLE = {
-		POLYGON: {
-			color: '#000000',
-			url: '',
-			outlineColor: '',
-			outlineWidth: 0,
-			opacity: 1.0
-		},
-		LINE: {
-			color: '#000000',
-			url: '',
-			height: 6,
-			dx: -5,
-			dy: -3,
-			direction: 'forward',
-			width: 1,
-			outlineColor: '',
-			outlineWidth: 0,
-			dashColor: '',
-			dashLength: 0,
-			opacity: 1.0
-		},
-		IMAGE: {
-			url: '',
-			width: 33,
-			height: 20,
-			dx: 10,
-			dy: 10
-		},
-		TEXT: {
-			color: 'black',
-			outlineColor: '',
-			outlineWidth: 0,
-			font: 'sans-serif',
-			fontWeight: '',
-			fontStyle: '',
-			size: 12,
-			opacity: 1.0
-		}
-	};
-}
-
-export { VectorTileRenderer };