@maptrip/map-tiles 1.1.1 → 1.2.0

package/lib/core/VectorTileRenderer.ts

@@ -0,0 +1,1212 @@
+import {
+  Point,
+  LineString,
+  MultiLineString,
+  Polygon,
+  MultiPolygon,
+  GeoJsonProperties,
+} from "geojson";
+import { CollisionDetector } from "./CollisionDetector.js";
+import {
+  Boundaries,
+  ImageStyle,
+  PointXY,
+  PolygonStyle,
+  PolylineStyle,
+  PolylineTextStyle,
+  PositionXY,
+  RENDERING_CONFIG,
+  Renderer,
+  Vertex,
+} from "../types/interfaces.js";
+
+class VectorTileRenderer {
+  private _styles: RENDERING_CONFIG;
+  private _images: { [key: string]: HTMLImageElement };
+  constructor(styles: RENDERING_CONFIG) {
+    this._styles = styles;
+    this._images = {};
+
+    this.preloadImages();
+  }
+
+  drawTile(
+    layer: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[],
+    z: number,
+    boundaries: Boundaries,
+    context: CanvasRenderingContext2D
+  ): void {
+    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", collisions);
+    this.drawPolylineLayers(lines, z, boundaries, context, "", collisions);
+    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: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[],
+    z: number,
+    boundaries: Boundaries,
+    context: CanvasRenderingContext2D,
+    phase: string,
+    collisions: CollisionDetector
+  ): void {
+    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",
+        collisions
+      );
+      this.drawTilePhase(
+        currentRank,
+        z,
+        boundaries,
+        context,
+        "lines",
+        collisions
+      );
+    }
+  }
+
+  drawErroredTile(canvas: HTMLCanvasElement): void {
+    var context = canvas.getContext("2d");
+    if (context != null) {
+      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: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[],
+    z: number,
+    boundaries: Boundaries,
+    context: CanvasRenderingContext2D,
+    phase: string,
+    collisions: CollisionDetector
+  ): void {
+    const texts: { [key: string]: any } = {};
+
+    for (let i = 0; i < layer.length; i++) {
+      const kind = layer[i].properties!.kind;
+      const geometry = layer[i].geometry;
+
+      // Look up the renderer for this kind of data
+      const rendererName = this._styles?.layers[kind];
+      const renderer = rendererName
+        ? this._styles?.renderers[rendererName]
+        : undefined;
+
+      if (renderer) {
+        for (let j = 0; j < renderer.length; j++) {
+          if (
+            renderer[j].from <= z &&
+            renderer[j].to >= z &&
+            this.accept(renderer[j], layer[i])
+          ) {
+            // Apply filters
+
+            if (geometry.type === "Polygon") {
+              const polygonGeometry = geometry as Polygon;
+              const coordinates = polygonGeometry.coordinates;
+              if (
+                (phase === "areasOutline" || phase === "areas") &&
+                renderer[j].polygon
+              ) {
+                this.drawPolygon(
+                  coordinates,
+                  layer[i].properties,
+                  z,
+                  boundaries,
+                  renderer[j].polygon as PolygonStyle,
+                  context,
+                  phase
+                );
+              } else if (
+                phase === "areaTexts" &&
+                renderer[j].text !== undefined
+              ) {
+                this.drawPolygon(
+                  coordinates,
+                  layer[i].properties,
+                  z,
+                  boundaries,
+                  renderer[j].text as PolygonStyle,
+                  context,
+                  phase,
+                  collisions,
+                  texts
+                );
+              }
+            } else if (geometry.type === "MultiPolygon") {
+              const multiPolygonGeometry = geometry as MultiPolygon;
+              const coordinates = multiPolygonGeometry.coordinates;
+              if (
+                (phase === "areasOutline" || phase === "areas") &&
+                renderer[j].polygon
+              ) {
+                for (let k = 0; k < coordinates.length; k++) {
+                  this.drawPolygon(
+                    coordinates[k],
+                    layer[i].properties,
+                    z,
+                    boundaries,
+                    renderer[j].polygon as PolygonStyle,
+                    context,
+                    phase
+                  );
+                }
+              } else if (phase === "areaTexts" && renderer[j].text) {
+                for (let k = 0; k < coordinates.length; k++) {
+                  this.drawPolygon(
+                    coordinates[k],
+                    layer[i].properties,
+                    z,
+                    boundaries,
+                    renderer[j].text as PolygonStyle,
+                    context,
+                    phase,
+                    collisions,
+                    texts
+                  );
+                }
+              }
+            } else if (geometry.type === "LineString") {
+              const lineStringGeometry = geometry as LineString;
+              const coordinates = lineStringGeometry.coordinates;
+              if (
+                (phase === "linesOutline" || phase === "lines") &&
+                renderer[j].line
+              ) {
+                this.drawPolyline(
+                  coordinates,
+                  layer[i].properties,
+                  boundaries,
+                  renderer[j].line as PolylineStyle,
+                  context,
+                  phase
+                );
+              } else if (phase === "lineTexts" && renderer[j].text) {
+                this.drawPolylineText(
+                  coordinates,
+                  layer[i].properties,
+                  boundaries,
+                  renderer[j].text,
+                  context,
+                  collisions,
+                  texts
+                );
+              }
+            } else if (geometry.type === "MultiLineString") {
+              const multiLineStringGeometry = geometry as MultiLineString;
+              const coordinates = multiLineStringGeometry.coordinates;
+              if (
+                (phase === "linesOutline" || phase === "lines") &&
+                renderer[j].line
+              ) {
+                for (let k = 0; k < coordinates.length; k++) {
+                  this.drawPolyline(
+                    coordinates[k],
+                    layer[i].properties,
+                    boundaries,
+                    renderer[j].line as PolylineStyle,
+                    context,
+                    phase
+                  );
+                }
+              } else if (phase === "lineTexts" && renderer[j].text) {
+                for (let k = 0; k < coordinates.length; k++) {
+                  this.drawPolylineText(
+                    coordinates[k],
+                    layer[i].properties,
+                    boundaries,
+                    renderer[j].text,
+                    context,
+                    collisions,
+                    texts
+                  );
+                }
+              }
+            } else if (geometry.type === "Point") {
+              const pointGeometry = geometry as Point;
+              const coordinates = pointGeometry.coordinates;
+              if (phase === "texts" && renderer[j].text !== undefined) {
+                let text = layer[i].properties!["name"]
+                  ? layer[i].properties!["name"]
+                  : layer[i].properties!["TEXT"];
+                if (text) {
+                  if (
+                    !this.isTextCollision(
+                      coordinates,
+                      text,
+                      boundaries,
+                      renderer[j].text as PolylineTextStyle,
+                      context,
+                      collisions
+                    )
+                  ) {
+                    const match = text.match(/([A-Z])\s?([0-9]+[a-z]*).*/);
+                    if (match) {
+                      const letter = match[1];
+                      const number = match[2];
+                      if (letter === "A" || letter === "B") {
+                        text = number;
+                        this.drawImage(
+                          coordinates,
+                          boundaries,
+                          renderer[j].image as ImageStyle,
+                          context
+                        );
+                        this.drawText(
+                          coordinates,
+                          text,
+                          boundaries,
+                          renderer[j].text as PolylineTextStyle,
+                          context,
+                          collisions
+                        );
+                      }
+                    } else {
+                      this.drawText(
+                        coordinates,
+                        text,
+                        boundaries,
+                        renderer[j].text as PolylineTextStyle,
+                        context,
+                        collisions
+                      );
+                    }
+                  }
+                } else {
+                  this.drawImage(
+                    coordinates,
+                    boundaries,
+                    renderer[j].image as ImageStyle,
+                    context
+                  );
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  getBackgroundColor(z: number): string {
+    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: Renderer,
+    layer: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>
+  ): boolean {
+    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(
+    //Collisions and texts are optional properties that are only needed when the phase === "areaTexts"
+    coordinates: GeoJSON.Position[][],
+    geoJsonProperties: GeoJsonProperties,
+    z: number,
+    boundaries: Boundaries,
+    style: PolygonStyle,
+    context: CanvasRenderingContext2D,
+    phase: string,
+    collisions?: CollisionDetector,
+    texts?: { [key: string]: any }
+  ): void {
+    if (style) {
+      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: { x: number; y: number }[] = [];
+
+        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();
+
+        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 ?? merged.color;
+            }
+          } 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 (geoJsonProperties && geoJsonProperties.NAME) {
+            // skip texts which already are in this tile
+            if (texts && texts[geoJsonProperties.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(geoJsonProperties.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 && collisions.isCollision(x, y, w, h)) {
+              return;
+            }
+
+            if (merged.outlineColor && merged.outlineWidth) {
+              context.lineWidth = merged.outlineWidth;
+              context.strokeStyle = merged.outlineColor;
+              context.strokeText(geoJsonProperties.NAME, x, y);
+            }
+
+            context.fillStyle = merged.color;
+            context.fillText(geoJsonProperties.NAME, x, y);
+
+            if (collisions) {
+              collisions.insert(x, y, w, h);
+            }
+            if (texts) {
+              texts[geoJsonProperties.NAME] = true;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  getCentroid(vertices: Vertex[]): Vertex {
+    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: PointXY[]): {
+    min: { x: number; y: number };
+    max: { x: number; y: number };
+  } {
+    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: GeoJSON.Position[],
+    boundaries: Boundaries
+  ): { x: number; y: number }[] {
+    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: GeoJSON.Position[],
+    geoJsonProperties: GeoJsonProperties,
+    boundaries: Boundaries,
+    style: PolylineStyle,
+    context: CanvasRenderingContext2D,
+    phase: "linesOutline" | "lines"
+  ) {
+    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);
+
+    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,
+            Number(merged.width),
+            Number(merged.height)
+          );
+
+          context.restore();
+
+          distance += desired;
+        }
+
+        distance = (desired - (distanceToNext - distance)) % desired;
+      }
+    }
+  }
+
+  drawPolylineText(
+    coordinates: GeoJSON.Position[],
+    geoJsonProperties: GeoJsonProperties,
+    boundaries: Boundaries,
+    style: PolylineTextStyle | undefined,
+    context: CanvasRenderingContext2D,
+    collisions: CollisionDetector,
+    texts: { [key: string]: any }
+  ) {
+    if (
+      !geoJsonProperties ||
+      !geoJsonProperties.NAME ||
+      coordinates.length < 2
+    ) {
+      return;
+    }
+
+    var text = geoJsonProperties.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();
+    }
+
+    if (collisions) {
+      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  removed as is not used in method
+          );
+        }
+        texts[text] = true;
+      }
+    }
+  }
+
+  getPolylineLength(points: PointXY[]): number {
+    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: PointXY[], dist: number, width: number) {
+    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 && y && x) {
+        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: PointXY[],
+    text: string,
+    context: CanvasRenderingContext2D,
+    collisions: CollisionDetector
+  ) {
+    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: string,
+    position: PositionXY,
+    outline: number,
+    context: CanvasRenderingContext2D
+  ): void {
+    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: PointXY[],
+    color: string,
+    width: number,
+    context: CanvasRenderingContext2D
+  ): void {
+    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: number[],
+    boundaries: Boundaries,
+    style: PolylineStyle,
+    context: CanvasRenderingContext2D
+  ): void {
+    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!)
+        );
+        if (merged.width && merged.height) {
+          merged.width = Number(merged.width);
+          merged.height = Number(merged.height);
+          context.drawImage(
+            this._images[merged.url],
+            x + merged.dx,
+            y + merged.dy,
+            merged.width,
+            merged.height
+          );
+        }
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  isTextCollision(
+    coordinate: GeoJSON.Position,
+    name: string,
+    boundaries: Boundaries,
+    style: PolylineTextStyle,
+    context: CanvasRenderingContext2D,
+    collisions: CollisionDetector
+  ): boolean {
+    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: GeoJSON.Position,
+    name: string,
+    boundaries: Boundaries,
+    style: PolylineTextStyle,
+    context: CanvasRenderingContext2D,
+    collisions: CollisionDetector
+  ): void {
+    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(): void {
+    for (const name in this._styles?.renderers) {
+      for (let i = 0; i < this._styles.renderers[name].length; i++) {
+        for (const renderer in this._styles.renderers[name][i]) {
+          const 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 = ((url: string) => {
+              return () => {
+                delete this._images[url];
+              };
+            })(config.url);
+          }
+        }
+      }
+    }
+  }
+
+  findConfiguredFonts(): string[] {
+    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: undefined,
+      outlineColor: undefined,
+      outlineWidth: 0,
+      opacity: 1.0,
+    },
+    LINE: {
+      color: "#000000",
+      url: undefined,
+      height: 6,
+      dx: -5,
+      dy: -3,
+      direction: "forward",
+      width: 1,
+      outlineColor: undefined,
+      outlineWidth: 0,
+      dashColor: undefined,
+      dashLength: 0,
+      opacity: 1.0,
+    },
+    IMAGE: {
+      url: undefined,
+      width: 33,
+      height: 20,
+      dx: 10,
+      dy: 10,
+    },
+    TEXT: {
+      color: "black",
+      outlineColor: undefined,
+      outlineWidth: 0,
+      font: "sans-serif",
+      fontWeight: "normal",
+      fontStyle: "normal",
+      size: 12,
+      opacity: 1.0,
+    },
+  };
+}
+
+export { VectorTileRenderer };