@maptrip/map-tiles 1.0.8

package/lib/core/VectorTileRenderer.js

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