@guardian/interactive-component-library 0.1.0-alpha.59 → 0.1.0

package/dist/interactive-component-library.js

@@ -6184,174 +6184,103 @@ function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
     )
   ] });
 }
-class FeatureRenderer {
-  constructor() {
-    this.drawingFunction = geoPath();
-  }
-  setStyle(style2) {
+class Feature {
+  /**
+   * Represents a feature on the map
+   * @constructor
+   * @param {Object} props - The properties for the feature.
+   * @property {string} id - The unique identifier of the feature
+   * @property {Array} geometries - The geometries of the feature
+   * @property {Object} properties - The properties of the feature
+   * @property {import("./styles").Style | import("./styles").StyleFunction} style - The style of the feature
+   */
+  constructor({ id: id2, geometries, properties, style: style2 }) {
+    this.id = id2;
+    this.geometries = geometries;
+    this.properties = properties;
     this.style = style2;
+    this.uid = createUid();
   }
-  render(frameState, feature, context) {
-    if (!this.style) {
-      return;
-    }
-    const { projection, transform, pixelRatio } = frameState.viewState;
-    const { stroke, fill } = this.style;
-    this.drawingFunction.context(context);
-    context.beginPath();
-    const geometries = feature.getProjectedGeometries(projection);
-    if (frameState.debug) {
-      try {
-        validateGeometries(geometries);
-      } catch {
-        console.error(
-          `Invalid geometry. Feature skipped during rendering. Click here to inspect geometry: ${generateDebugUrl(feature)} 
-`,
-          feature
-        );
-      }
-    }
-    for (const geometry of geometries) {
-      this.drawingFunction(geometry);
-    }
-    if (fill) {
-      context.fillStyle = fill.getRgba();
-      context.fill();
-    }
-    if (stroke) {
-      context.lineWidth = stroke.width * pixelRatio / transform.k;
-      context.strokeStyle = stroke.getRgba();
-      context.stroke();
-    }
-  }
-}
-const textPadding = {
-  top: 20,
-  right: 20,
-  bottom: 20,
-  left: 20
-};
-class TextLayerRenderer {
-  constructor(layer) {
-    this.layer = layer;
-    this.featureRenderer = new FeatureRenderer();
-    this._element = document.createElement("div");
-    this._element.className = "gv-text-layer";
-    const style2 = this._element.style;
-    style2.position = "absolute";
-    style2.width = "100%";
-    style2.height = "100%";
-    style2.pointerEvents = "none";
-    style2.overflow = "hidden";
+  getExtent() {
+    if (this._extent) return this._extent;
+    const extent = this.geometries.reduce((combinedExtent, geometries) => {
+      if (!combinedExtent) return geometries.extent;
+      return combineExtents(geometries.extent, combinedExtent);
+    }, null);
+    this._extent = extent;
+    return extent;
   }
-  renderFrame(frameState, targetElement) {
-    if (this.layer.opacity === 0) return targetElement;
-    const { declutterTree } = frameState;
-    const { projection, viewPortSize, sizeInPixels, visibleExtent, transform } = frameState.viewState;
-    this._element.style.opacity = this.layer.opacity;
-    const source = this.layer.source;
-    const features = source.getFeaturesInExtent(visibleExtent);
-    const textElements = [];
-    for (const feature of features) {
-      const geometries = feature.getProjectedGeometries(projection);
-      const point = geometries.find((d2) => d2.type === "Point");
-      if (!point) {
-        throw new Error(
-          `Expected Point geometry for feature in TextLayer: ${feature}`
-        );
-      }
-      const styleFunction2 = feature.getStyleFunction() || this.layer.getStyleFunction();
-      const featureStyle = styleFunction2(feature);
-      const textElement = this.getTextElementWithID(feature.uid);
-      textElement.innerText = featureStyle.text.content;
-      const [relativeX, relativeY] = transform.apply(point.coordinates).map((d2, i) => d2 / sizeInPixels[i]);
-      const position = {
-        left: `${relativeX * 100}%`,
-        top: `${relativeY * 100}%`
-      };
-      this.styleTextElement(textElement, featureStyle.text, position);
-      const bbox = this.getElementBBox(textElement, {
-        x: relativeX * viewPortSize[0],
-        y: relativeY * viewPortSize[1]
-      });
-      if (declutterTree.collides(bbox)) {
-        continue;
-      }
-      declutterTree.insert(bbox);
-      if (this.layer.drawCollisionBoxes) {
-        const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
-        textElements.push(collisionBoxDebugElement);
-      }
-      textElements.push(textElement);
-    }
-    replaceChildren(this._element, textElements);
-    return this._element;
+  setgeometries(geometries) {
+    this.geometries = geometries;
+    this._extent = void 0;
   }
-  getTextElementWithID(id2) {
-    const elementId = `text-feature-${id2}`;
-    let textElement = this._element.querySelector(`#${elementId}`);
-    if (!textElement) {
-      textElement = document.createElement("div");
-      textElement.id = elementId;
-    }
-    return textElement;
+  getProjectedGeometries(projection) {
+    return this.geometries.map(
+      (d2) => d2.getProjected(projection, projection.revision)
+    );
   }
-  styleTextElement(element, textStyle, position) {
-    const style2 = element.style;
-    style2.position = "absolute";
-    style2.transform = `translate(-50%, -50%)`;
-    style2.left = position.left;
-    style2.top = position.top;
-    style2.textAlign = "center";
-    style2.whiteSpace = "nowrap";
-    style2.fontFamily = textStyle.fontFamily;
-    style2.fontSize = textStyle.fontSize;
-    style2.fontWeight = textStyle.fontWeight;
-    style2.lineHeight = textStyle.lineHeight;
-    style2.color = textStyle.color;
-    style2.textShadow = textStyle.textShadow;
-    style2.padding = `${textPadding.top}px ${textPadding.right}px ${textPadding.bottom}px ${textPadding.left}px`;
+  getStyleFunction() {
+    const style2 = this.style;
+    if (!style2) return null;
+    if (typeof style2 === "function") return style2;
+    return () => {
+      return style2;
+    };
   }
-  getElementBBox(element, position) {
-    if (!element.parentElement) {
-      document.body.appendChild(element);
+  containsCoordinate(coordinate) {
+    if (!containsCoordinate(this.getExtent(), coordinate)) {
+      return false;
     }
-    const { width, height } = element.getBoundingClientRect();
-    if (element.parentElement !== this._element) {
-      element.remove();
+    for (const geometries of this.geometries) {
+      if (geoContains(geometries.getGeoJSON(), coordinate)) {
+        return true;
+      }
     }
-    return {
-      minX: Math.floor(position.x) - width / 2,
-      minY: Math.floor(position.y) - height / 2,
-      maxX: Math.ceil(position.x + width / 2),
-      maxY: Math.ceil(position.y + height / 2)
-    };
-  }
-  getCollisionBoxElement(bbox) {
-    const element = document.createElement("div");
-    const style2 = element.style;
-    style2.position = "absolute";
-    style2.left = `${bbox.minX}px`;
-    style2.top = `${bbox.minY}px`;
-    style2.width = `${bbox.maxX - bbox.minX}px`;
-    style2.height = `${bbox.maxY - bbox.minY}px`;
-    style2.border = "2px solid black";
-    return element;
-  }
-}
-class Style {
-  constructor(properties) {
-    this.stroke = properties == null ? void 0 : properties.stroke;
-    this.fill = properties == null ? void 0 : properties.fill;
-    this.text = properties == null ? void 0 : properties.text;
+    return false;
   }
   clone() {
-    return new Style({
-      stroke: this.stroke,
-      fill: this.fill,
-      text: this.text
+    return new Feature({
+      id: this.id,
+      geometries: this.geometries.map((d2) => d2.clone()),
+      properties: this.properties,
+      style: this.style
     });
   }
+  /**
+   * Returns the geometries as a GeoJSON object
+   * @returns {Object} The GeoJSON representation of the geometries
+   */
+  getGeoJSON() {
+    const geometries = this.geometries.map((d2) => d2.getGeoJSON());
+    if (geometries.length === 1) return geometries[0];
+    return {
+      type: "Feature",
+      geometry: this._getGeometryGeoJSON(),
+      properties: this.properties
+    };
+  }
+  _getGeometryGeoJSON() {
+    const geometries = this.geometries.map((d2) => d2.getGeoJSON());
+    if (geometries.length === 0) throw new Error("Feature has no geometries");
+    if (geometries.length === 1) return geometries[0];
+    if (geometries[0].type === "Polygon") {
+      return {
+        type: "MultiPolygon",
+        coordinates: geometries.map((d2) => d2.coordinates)
+      };
+    } else if (geometries[0].type === "LineString") {
+      return {
+        type: "MultiLineString",
+        coordinates: geometries.map((d2) => d2.coordinates)
+      };
+    } else if (geometries[0].type === "Point") {
+      return {
+        type: "MultiPoint",
+        coordinates: geometries.map((d2) => d2.coordinates)
+      };
+    }
+    throw new Error("Could not determine geometry type");
+  }
 }
 function memoise(fn) {
   let called = false;
@@ -6369,928 +6298,1031 @@ function memoise(fn) {
     return lastResult;
   };
 }
-function toRgba(color2, opacity = 1) {
-  color2 = color2.replace(/\s+/g, "").toLowerCase();
-  if (color2.startsWith("#")) {
-    color2 = color2.replace(/^#/, "");
-    if (color2.length === 3) {
-      color2 = color2.split("").map((char) => char + char).join("");
-    }
-    let r = parseInt(color2.substring(0, 2), 16);
-    let g = parseInt(color2.substring(2, 4), 16);
-    let b = parseInt(color2.substring(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  }
-  let rgbaMatch = color2.match(/^rgba?\((\d+),(\d+),(\d+)(?:,(\d+(\.\d+)?))?\)$/);
-  if (rgbaMatch) {
-    let r = parseInt(rgbaMatch[1], 10);
-    let g = parseInt(rgbaMatch[2], 10);
-    let b = parseInt(rgbaMatch[3], 10);
-    let a = rgbaMatch[4] !== void 0 ? parseFloat(rgbaMatch[4]) : opacity;
-    return `rgba(${r}, ${g}, ${b}, ${a})`;
-  }
-  throw new Error("Unsupported color format");
-}
-class Stroke {
-  constructor(options) {
-    this.color = (options == null ? void 0 : options.color) || "#121212";
-    this.width = (options == null ? void 0 : options.width) || 0.5;
-    this.opacity = (options == null ? void 0 : options.opacity) || 1;
-    this._getRgba = memoise(toRgba);
-  }
-  getRgba() {
-    return this._getRgba(this.color, this.opacity);
-  }
-}
-class Fill {
-  constructor(options) {
-    this.color = (options == null ? void 0 : options.color) || "#CCC";
-    this.opacity = (options == null ? void 0 : options.opacity) || 1;
-    this._getRgba = memoise(toRgba);
+class Geometry {
+  /**
+   * Represents vector geometry
+   * @constructor
+   * @param {Object} options
+   * @param {string} options.type - The type of geometry (e.g., 'Point', 'LineString', 'Polygon')
+   * @param {Array} options.extent - The extent of the geometry (e.g., [xmin, ymin, xmax, ymax])
+   * @param {Array} options.coordinates - The coordinates of the geometry (e.g., [[x1, y1], [x2, y2], ...])
+   */
+  constructor({ type, extent, coordinates }) {
+    this.type = type;
+    this.extent = extent;
+    this.coordinates = coordinates;
+    this.getProjected = memoise(this._getProjected).bind(this);
   }
-  getRgba() {
-    return this._getRgba(this.color, this.opacity);
+  /**
+   * Returns the geometry as a GeoJSON object
+   * @function
+   * @param {import("../projection").Projection} projection - The projection to use for the geometry
+   * @returns {Object} A GeoJSON representation of the projected geometry
+   * @private
+   */
+  // eslint-disable-next-line no-unused-vars
+  _getProjected(projection) {
+    throw new Error("Not implemented");
   }
-}
-class Text {
-  constructor(options) {
-    this.content = options == null ? void 0 : options.content;
-    this.fontFamily = (options == null ? void 0 : options.fontFamily) || "var(--text-sans)";
-    this.fontSize = (options == null ? void 0 : options.fontSize) || "17px";
-    this.fontWeight = (options == null ? void 0 : options.fontWeight) || "400";
-    this.lineHeight = (options == null ? void 0 : options.lineHeight) || 1.3;
-    this.color = (options == null ? void 0 : options.color) || "#121212";
-    this.textShadow = (options == null ? void 0 : options.textShadow) || "1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6";
+  /**
+   * Returns the geometry as a GeoJSON object
+   * @returns {Object} The GeoJSON representation of the geometry
+   */
+  getGeoJSON() {
+    return {
+      type: this.type,
+      coordinates: this.coordinates
+    };
   }
 }
-class TinyQueue {
-  constructor(data = [], compare = defaultCompare) {
-    this.data = data;
-    this.length = this.data.length;
-    this.compare = compare;
-    if (this.length > 0) {
-      for (let i = (this.length >> 1) - 1; i >= 0; i--) this._down(i);
-    }
-  }
-  push(item) {
-    this.data.push(item);
-    this.length++;
-    this._up(this.length - 1);
+class LineString extends Geometry {
+  constructor({ type = "LineString", extent, coordinates }) {
+    super({ type, extent, coordinates });
   }
-  pop() {
-    if (this.length === 0) return void 0;
-    const top = this.data[0];
-    const bottom = this.data.pop();
-    this.length--;
-    if (this.length > 0) {
-      this.data[0] = bottom;
-      this._down(0);
+  _getProjected(projection) {
+    const projected = [];
+    for (const point of this.coordinates) {
+      projected.push(projection(point));
     }
-    return top;
-  }
-  peek() {
-    return this.data[0];
+    return {
+      type: this.type,
+      coordinates: projected
+    };
   }
-  _up(pos) {
-    const { data, compare } = this;
-    const item = data[pos];
-    while (pos > 0) {
-      const parent = pos - 1 >> 1;
-      const current = data[parent];
-      if (compare(item, current) >= 0) break;
-      data[pos] = current;
-      pos = parent;
-    }
-    data[pos] = item;
+}
+class Polygon extends Geometry {
+  constructor({ type = "Polygon", extent, coordinates }) {
+    super({ type, extent, coordinates });
   }
-  _down(pos) {
-    const { data, compare } = this;
-    const halfLength = this.length >> 1;
-    const item = data[pos];
-    while (pos < halfLength) {
-      let left = (pos << 1) + 1;
-      let best = data[left];
-      const right = left + 1;
-      if (right < this.length && compare(data[right], best) < 0) {
-        left = right;
-        best = data[right];
+  _getProjected(projection) {
+    const projected = [];
+    const rings = this.coordinates;
+    for (const ring of rings) {
+      const projectedRing = [];
+      for (const point of ring) {
+        const projectedPoint = projection(point);
+        if (projectedPoint) {
+          projectedRing.push(projectedPoint);
+        } else {
+          break;
+        }
       }
-      if (compare(best, item) >= 0) break;
-      data[pos] = best;
-      pos = left;
-    }
-    data[pos] = item;
-  }
-}
-function defaultCompare(a, b) {
-  return a < b ? -1 : a > b ? 1 : 0;
-}
-function knn(tree, x, y, n2, predicate, maxDistance) {
-  let node = tree.data;
-  const result = [];
-  const toBBox = tree.toBBox;
-  const queue = new TinyQueue(void 0, compareDist);
-  while (node) {
-    for (let i = 0; i < node.children.length; i++) {
-      const child = node.children[i];
-      const dist = boxDist(x, y, node.leaf ? toBBox(child) : child);
-      {
-        queue.push({
-          node: child,
-          isItem: node.leaf,
-          dist
-        });
+      if (projectedRing.length > 0) {
+        projected.push(projectedRing);
       }
     }
-    while (queue.length && queue.peek().isItem) {
-      const candidate = queue.pop().node;
-      if (!predicate || predicate(candidate))
-        result.push(candidate);
-      if (result.length === n2) return result;
-    }
-    node = queue.pop();
-    if (node) node = node.node;
+    return {
+      type: this.type,
+      coordinates: projected
+    };
   }
-  return result;
-}
-function compareDist(a, b) {
-  return a.dist - b.dist;
-}
-function boxDist(x, y, box) {
-  const dx = axisDist(x, box.minX, box.maxX), dy = axisDist(y, box.minY, box.maxY);
-  return dx * dx + dy * dy;
-}
-function axisDist(k, min, max) {
-  return k < min ? min - k : k <= max ? 0 : k - max;
-}
-class VectorSource {
-  constructor({ features }) {
-    this.dispatcher = new Dispatcher(this);
-    this._featuresRtree = new RBush();
-    this.setFeatures(features);
+  getOuterRing() {
+    return this.coordinates[0];
   }
-  tearDown() {
-    this.dispatcher = null;
+  setOuterRing(coordinates) {
+    this.coordinates[0] = coordinates;
   }
-  getFeatures() {
-    return this._features;
+  setCoordinates(coordinates) {
+    this.coordinates = coordinates;
   }
-  getFeaturesAtCoordinate(coordinate) {
-    const [lon, lat] = coordinate;
-    const features = knn(
-      this._featuresRtree,
-      lon,
-      lat,
-      10,
-      (d2) => d2.feature.containsCoordinate(coordinate)
-    ).map((d2) => {
-      const midX = d2.minX + (d2.minX + d2.maxX) / 2;
-      const midY = d2.minY + (d2.minY + d2.maxY) / 2;
-      d2.distance = Math.hypot(midX - lon, midY - lat);
-      return d2;
+  clone() {
+    return new Polygon({
+      extent: this.extent,
+      coordinates: JSON.parse(JSON.stringify(this.coordinates))
     });
-    features.sort((a, b) => a.distance - b.distance);
-    return features.map((d2) => d2.feature);
   }
-  getFeaturesInExtent(extent) {
-    const [minX, minY, maxX, maxY] = extent;
-    return this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d2) => d2.feature);
+}
+class Point extends Geometry {
+  constructor({ type = "Point", coordinates }) {
+    super({ type, extent: null, coordinates });
+    this.extent = [...coordinates, ...coordinates];
   }
-  setFeatures(features) {
-    this._featuresRtree.clear();
-    for (const feature of features) {
-      const [minX, minY, maxX, maxY] = feature.getExtent();
-      this._featuresRtree.insert({
-        minX: Math.floor(minX),
-        minY: Math.floor(minY),
-        maxX: Math.ceil(maxX),
-        maxY: Math.ceil(maxY),
-        feature
-      });
-    }
-    this._features = features;
-    this.dispatcher.dispatch(MapEvent.CHANGE);
+  _getProjected(projection) {
+    return {
+      type: this.type,
+      coordinates: projection(this.coordinates)
+    };
   }
 }
-class TextLayer {
-  /** @param {TextLayerComponentProps} props */
-  static Component({
-    features,
-    style: style2,
-    minZoom,
-    opacity,
-    declutter,
-    drawCollisionBoxes
-  }) {
-    const { registerLayer } = useContext(MapContext);
-    const layer = useMemo(
-      () => TextLayer.with(features, {
-        style: style2,
-        minZoom,
-        opacity,
-        declutter,
-        drawCollisionBoxes
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [features, minZoom, opacity, declutter, drawCollisionBoxes]
-    );
-    registerLayer(layer);
-    useEffect(() => {
-      layer.style = style2;
-    }, [style2]);
+class GeoJSON {
+  readFeaturesFromObject(object) {
+    const geoJSONObject = object;
+    let features = null;
+    if (geoJSONObject["type"] === "FeatureCollection") {
+      const geoJSONFeatureCollection = object;
+      features = [];
+      const geoJSONFeatures = geoJSONFeatureCollection["features"];
+      for (let i = 0, ii = geoJSONFeatures.length; i < ii; ++i) {
+        const featureObject = this.readFeatureFromObject(geoJSONFeatures[i]);
+        if (!featureObject) {
+          continue;
+        }
+        features.push(featureObject);
+      }
+    } else if (geoJSONObject["type"] === "Feature") {
+      features = [this.readFeatureFromObject(geoJSONObject)];
+    } else if (Array.isArray(geoJSONObject)) {
+      features = [];
+      for (let i = 0, ii = geoJSONObject.length; i < ii; ++i) {
+        const featureObject = this.readFeatureFromObject(geoJSONObject[i]);
+        if (!featureObject) {
+          continue;
+        }
+        features.push(featureObject);
+      }
+    } else {
+      try {
+        const geometries = this.readGeometriesFromObject(geoJSONObject);
+        const feature = new Feature({ geometries });
+        features = [feature];
+      } catch {
+        console.warn("Unable to interpret GeoJSON:", geoJSONObject);
+        return;
+      }
+    }
+    return features.flat();
+  }
+  readFeatureFromObject(geoJSONObject) {
+    const geometries = this.readGeometriesFromObject(geoJSONObject["geometry"]);
+    if (geometries.length > 0) {
+      return new Feature({
+        id: geoJSONObject["id"],
+        geometries,
+        properties: geoJSONObject["properties"]
+      });
+    }
     return null;
   }
+  readGeometriesFromObject(geometry) {
+    const geometries = [];
+    if (geometry.type === "Polygon") {
+      const polygon = this.readPolygonForCoordinates(geometry.coordinates);
+      geometries.push(polygon);
+    } else if (geometry.type === "MultiPolygon") {
+      for (const polygonCoordinates of geometry.coordinates) {
+        const polygon = this.readPolygonForCoordinates(polygonCoordinates);
+        geometries.push(polygon);
+      }
+    } else if (geometry.type === "LineString") {
+      const lineString = this.readLineStringForCoordinates(geometry.coordinates);
+      geometries.push(lineString);
+    } else if (geometry.type === "MultiLineString") {
+      for (const lineStringCoordinates of geometry.coordinates) {
+        const lineString = this.readLineStringForCoordinates(
+          lineStringCoordinates
+        );
+        geometries.push(lineString);
+      }
+    } else if (geometry.type === "Point") {
+      const point = this.readPointForCoordinates(geometry.coordinates);
+      geometries.push(point);
+    }
+    return geometries;
+  }
+  readPolygonForCoordinates(coordinates) {
+    const outerRing = coordinates[0];
+    const extent = extentForCoordinates(outerRing);
+    return new Polygon({ extent, coordinates });
+  }
+  readLineStringForCoordinates(coordinates) {
+    const extent = extentForCoordinates(coordinates);
+    return new LineString({ extent, coordinates });
+  }
+  readPointForCoordinates(coordinates) {
+    return new Point({ coordinates });
+  }
+}
+class FeatureCollection {
   /**
-   * @param {import("../Feature").Feature[]} features
-   * @param {TextLayerOptions} options
+   * Create a feature collection from GeoJSON features.
+   * @param {Object[]} geoJSON - The GeoJSON object
+   * @returns {FeatureCollection} The feature collection
    */
-  static with(features, options) {
-    const source = new VectorSource({ features });
-    return new TextLayer({ source, ...options });
+  static fromGeoJSON(geoJSON) {
+    const features = new GeoJSON().readFeaturesFromObject(geoJSON);
+    return new FeatureCollection(features);
   }
   /**
-   * @param {Object} params
-   * @param {VectorSource} params.source
-   * @param {Style} [params.style=undefined]
-   * @param {number} [params.minZoom=0]
-   * @param {number} [params.opacity=1]
-   * @param {boolean} [params.declutter=true]
-   * @param {boolean} [params.drawCollisionBoxes=false]
+   * Create a feature collection.
+   * @constructor
+   * @param {import("./Feature").Feature[]} features - The features to put in the collection
    */
-  constructor({
-    source,
-    style: style2,
-    minZoom = 0,
-    opacity = 1,
-    declutter = true,
-    drawCollisionBoxes = false
-  }) {
-    this.source = source;
-    this._style = style2;
-    this.minZoom = minZoom;
-    this.opacity = opacity;
-    this.declutter = declutter;
-    this.drawCollisionBoxes = drawCollisionBoxes;
-    this.renderer = new TextLayerRenderer(this);
-    this.dispatcher = new Dispatcher(this);
-  }
-  tearDown() {
-    this.dispatcher = null;
-  }
-  get style() {
-    if (this._style) return this._style;
-    const defaultStyle = new Style({
-      text: new Text()
-    });
-    return defaultStyle;
-  }
-  set style(style2) {
-    this._style = style2;
-    this.dispatcher.dispatch(MapEvent.CHANGE);
+  constructor(features) {
+    this.features = features;
   }
-  getExtent() {
-    if (this._extent) return this._extent;
-    const features = this.source.getFeatures();
-    const extent = features.reduce((combinedExtent, feature) => {
-      const featureExtent = feature.getExtent();
-      if (!combinedExtent) return featureExtent;
-      return combineExtents(featureExtent, combinedExtent);
-    }, null);
-    this._extent = extent;
-    return extent;
+}
+class FeatureRenderer {
+  constructor() {
+    this.drawingFunction = geoPath();
   }
-  getStyleFunction() {
-    const style2 = this.style;
-    if (typeof style2 === "function") return style2;
-    return () => {
-      return style2;
-    };
+  setStyle(style2) {
+    this.style = style2;
   }
-  renderFrame(frameState, targetElement) {
-    return this.renderer.renderFrame(frameState, targetElement);
+  render(frameState, feature, context) {
+    if (!this.style) {
+      return;
+    }
+    const { projection, transform, pixelRatio } = frameState.viewState;
+    const { stroke, fill } = this.style;
+    this.drawingFunction.context(context);
+    context.beginPath();
+    const geometries = feature.getProjectedGeometries(projection);
+    if (frameState.debug) {
+      try {
+        validateGeometries(geometries);
+      } catch {
+        console.error(
+          `Invalid geometry. Feature skipped during rendering. Click here to inspect geometry: ${generateDebugUrl(feature)} 
+`,
+          feature
+        );
+      }
+    }
+    for (const geometry of geometries) {
+      this.drawingFunction(geometry);
+    }
+    if (fill) {
+      context.fillStyle = fill.getRgba();
+      context.fill();
+    }
+    if (stroke) {
+      context.lineWidth = stroke.width * pixelRatio / transform.k;
+      context.strokeStyle = stroke.getRgba();
+      context.stroke();
+    }
   }
 }
-class VectorLayerRenderer {
+const textPadding = {
+  top: 20,
+  right: 20,
+  bottom: 20,
+  left: 20
+};
+class TextLayerRenderer {
   constructor(layer) {
     this.layer = layer;
     this.featureRenderer = new FeatureRenderer();
+    this._element = document.createElement("div");
+    this._element.className = "gv-text-layer";
+    const style2 = this._element.style;
+    style2.position = "absolute";
+    style2.width = "100%";
+    style2.height = "100%";
+    style2.pointerEvents = "none";
+    style2.overflow = "hidden";
   }
   renderFrame(frameState, targetElement) {
     if (this.layer.opacity === 0) return targetElement;
-    const { projection, sizeInPixels, visibleExtent, transform } = frameState.viewState;
-    const container2 = this.getOrCreateContainer(targetElement, sizeInPixels);
-    const context = container2.firstElementChild.getContext("2d");
-    context.save();
-    context.translate(transform.x, transform.y);
-    context.scale(transform.k, transform.k);
-    context.lineJoin = "round";
-    context.lineCap = "round";
-    context.globalAlpha = this.layer.opacity;
+    const { declutterTree } = frameState;
+    const { projection, viewPortSize, sizeInPixels, visibleExtent, transform } = frameState.viewState;
+    this._element.style.opacity = this.layer.opacity;
     const source = this.layer.source;
     const features = source.getFeaturesInExtent(visibleExtent);
+    const textElements = [];
     for (const feature of features) {
+      const geometries = feature.getProjectedGeometries(projection);
+      const point = geometries.find((d2) => d2.type === "Point");
+      if (!point) {
+        throw new Error(
+          `Expected Point geometry for feature in TextLayer: ${feature}`
+        );
+      }
       const styleFunction2 = feature.getStyleFunction() || this.layer.getStyleFunction();
       const featureStyle = styleFunction2(feature);
-      if ((featureStyle == null ? void 0 : featureStyle.stroke) || (featureStyle == null ? void 0 : featureStyle.fill)) {
-        context.save();
-        this.featureRenderer.setStyle(featureStyle);
-        this.featureRenderer.render(frameState, feature, context);
-        context.restore();
-      }
-    }
-    if (Object.prototype.hasOwnProperty.call(projection, "getCompositionBorders")) {
-      context.beginPath();
-      context.lineWidth = 1 / transform.k;
-      context.strokeStyle = "#999";
-      projection.drawCompositionBorders(context);
-      context.stroke();
+      const textElement = this.getTextElementWithID(feature.uid);
+      textElement.innerText = featureStyle.text.content;
+      const [relativeX, relativeY] = transform.apply(point.coordinates).map((d2, i) => d2 / sizeInPixels[i]);
+      const position = {
+        left: `${relativeX * 100}%`,
+        top: `${relativeY * 100}%`
+      };
+      this.styleTextElement(textElement, featureStyle.text, position);
+      const bbox = this.getElementBBox(textElement, {
+        x: relativeX * viewPortSize[0],
+        y: relativeY * viewPortSize[1]
+      });
+      if (declutterTree.collides(bbox)) {
+        continue;
+      }
+      declutterTree.insert(bbox);
+      if (this.layer.drawCollisionBoxes) {
+        const collisionBoxDebugElement = this.getCollisionBoxElement(bbox);
+        textElements.push(collisionBoxDebugElement);
+      }
+      textElements.push(textElement);
     }
-    context.restore();
-    return container2;
+    replaceChildren(this._element, textElements);
+    return this._element;
   }
-  getOrCreateContainer(targetElement, sizeInPixels) {
-    let container2 = null;
-    let containerReused = false;
-    let canvas = targetElement && targetElement.firstElementChild;
-    if (canvas instanceof HTMLCanvasElement) {
-      container2 = targetElement;
-      containerReused = true;
-    } else if (this._container) {
-      container2 = this._container;
-    } else {
-      container2 = this.createContainer();
-    }
-    if (!containerReused) {
-      const canvas2 = container2.firstElementChild;
-      canvas2.width = sizeInPixels[0];
-      canvas2.height = sizeInPixels[1];
+  getTextElementWithID(id2) {
+    const elementId = `text-feature-${id2}`;
+    let textElement = this._element.querySelector(`#${elementId}`);
+    if (!textElement) {
+      textElement = document.createElement("div");
+      textElement.id = elementId;
     }
-    this._container = container2;
-    return container2;
+    return textElement;
   }
-  createContainer() {
-    const container2 = document.createElement("div");
-    container2.className = "gv-map-layer";
-    let style2 = container2.style;
-    style2.position = "absolute";
-    style2.width = "100%";
-    style2.height = "100%";
-    const canvas = document.createElement("canvas");
-    style2 = canvas.style;
+  styleTextElement(element, textStyle, position) {
+    const style2 = element.style;
     style2.position = "absolute";
-    style2.width = "100%";
-    style2.height = "100%";
-    container2.appendChild(canvas);
-    return container2;
-  }
-}
-class VectorLayer {
-  /** @param {VectorLayerComponentProps} props */
-  static Component({ features, style: style2, minZoom, opacity, hitDetectionEnabled }) {
-    const { registerLayer } = useContext(MapContext);
-    const layer = useMemo(
-      () => VectorLayer.with(features, {
-        style: style2,
-        minZoom,
-        opacity,
-        hitDetectionEnabled
-      }),
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [features, minZoom, opacity, hitDetectionEnabled]
-    );
-    registerLayer(layer);
-    useEffect(() => {
-      layer.style = style2;
-    }, [style2]);
-    return null;
-  }
-  /**
-   * @param {import("../Feature").Feature[]} features
-   * @param {VectorLayerOptions} options
-   */
-  static with(features, options) {
-    const source = new VectorSource({ features });
-    return new VectorLayer({ source, ...options });
-  }
-  /**
-   * @param {Object} params
-   * @param {VectorSource} params.source
-   * @param {Style | (() => Style)} [params.style=undefined]
-   * @param {number} [params.minZoom=0]
-   * @param {number} [params.opacity=1]
-   * @param {boolean} [params.hitDetectionEnabled=false]
-   */
-  constructor({
-    source,
-    style: style2,
-    minZoom = 0,
-    opacity = 1,
-    hitDetectionEnabled = true
-  }) {
-    this.dispatcher = new Dispatcher(this);
-    this.renderer = new VectorLayerRenderer(this);
-    this.source = source;
-    this._style = style2;
-    this.minZoom = minZoom;
-    this.opacity = opacity;
-    this.hitDetectionEnabled = hitDetectionEnabled;
-  }
-  get source() {
-    return this._source;
+    style2.transform = `translate(-50%, -50%)`;
+    style2.left = position.left;
+    style2.top = position.top;
+    style2.textAlign = "center";
+    style2.whiteSpace = "nowrap";
+    style2.fontFamily = textStyle.fontFamily;
+    style2.fontSize = textStyle.fontSize;
+    style2.fontWeight = textStyle.fontWeight;
+    style2.lineHeight = textStyle.lineHeight;
+    style2.color = textStyle.color;
+    style2.textShadow = textStyle.textShadow;
+    style2.padding = `${textPadding.top}px ${textPadding.right}px ${textPadding.bottom}px ${textPadding.left}px`;
   }
-  set source(source) {
-    if (this._source && source !== this._source) {
-      this._source.tearDown();
+  getElementBBox(element, position) {
+    if (!element.parentElement) {
+      document.body.appendChild(element);
     }
-    this._source = source;
-    source.on(MapEvent.CHANGE, () => {
-      this._extent = null;
-      this.dispatcher.dispatch(MapEvent.CHANGE);
-    });
+    const { width, height } = element.getBoundingClientRect();
+    if (element.parentElement !== this._element) {
+      element.remove();
+    }
+    return {
+      minX: Math.floor(position.x) - width / 2,
+      minY: Math.floor(position.y) - height / 2,
+      maxX: Math.ceil(position.x + width / 2),
+      maxY: Math.ceil(position.y + height / 2)
+    };
   }
-  setRawProjection(projection) {
-    this.projection = projection;
+  getCollisionBoxElement(bbox) {
+    const element = document.createElement("div");
+    const style2 = element.style;
+    style2.position = "absolute";
+    style2.left = `${bbox.minX}px`;
+    style2.top = `${bbox.minY}px`;
+    style2.width = `${bbox.maxX - bbox.minX}px`;
+    style2.height = `${bbox.maxY - bbox.minY}px`;
+    style2.border = "2px solid black";
+    return element;
   }
-  tearDown() {
-    this.dispatcher = null;
+}
+class Style {
+  constructor(properties) {
+    this.stroke = properties == null ? void 0 : properties.stroke;
+    this.fill = properties == null ? void 0 : properties.fill;
+    this.text = properties == null ? void 0 : properties.text;
   }
-  get style() {
-    if (this._style) return this._style;
-    const defaultStyle = new Style({
-      stroke: new Stroke()
+  clone() {
+    return new Style({
+      stroke: this.stroke,
+      fill: this.fill,
+      text: this.text
     });
-    return defaultStyle;
   }
-  set style(style2) {
-    this._style = style2;
-    this.dispatcher.dispatch(MapEvent.CHANGE);
+}
+function toRgba(color2, opacity = 1) {
+  color2 = color2.replace(/\s+/g, "").toLowerCase();
+  if (color2.startsWith("#")) {
+    color2 = color2.replace(/^#/, "");
+    if (color2.length === 3) {
+      color2 = color2.split("").map((char) => char + char).join("");
+    }
+    let r = parseInt(color2.substring(0, 2), 16);
+    let g = parseInt(color2.substring(2, 4), 16);
+    let b = parseInt(color2.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
   }
-  getStyleFunction() {
-    const style2 = this.style;
-    if (typeof style2 === "function") return style2;
-    return () => {
-      return style2;
-    };
+  let rgbaMatch = color2.match(/^rgba?\((\d+),(\d+),(\d+)(?:,(\d+(\.\d+)?))?\)$/);
+  if (rgbaMatch) {
+    let r = parseInt(rgbaMatch[1], 10);
+    let g = parseInt(rgbaMatch[2], 10);
+    let b = parseInt(rgbaMatch[3], 10);
+    let a = rgbaMatch[4] !== void 0 ? parseFloat(rgbaMatch[4]) : opacity;
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
   }
-  getExtent() {
-    if (this._extent) return this._extent;
-    const features = this.source.getFeatures();
-    const extent = features.reduce((combinedExtent, feature) => {
-      const featureExtent = feature.getExtent();
-      if (!combinedExtent) return featureExtent;
-      return combineExtents(featureExtent, combinedExtent);
-    }, null);
-    this._extent = extent;
-    return extent;
+  throw new Error("Unsupported color format");
+}
+class Stroke {
+  constructor(options) {
+    this.color = (options == null ? void 0 : options.color) || "#121212";
+    this.width = (options == null ? void 0 : options.width) || 0.5;
+    this.opacity = (options == null ? void 0 : options.opacity) || 1;
+    this._getRgba = memoise(toRgba);
   }
-  findFeatures(coordinate) {
-    if (!this.hitDetectionEnabled) return;
-    return this.source.getFeaturesAtCoordinate(coordinate);
+  getRgba() {
+    return this._getRgba(this.color, this.opacity);
   }
-  renderFrame(frameState, targetElement) {
-    return this.renderer.renderFrame(frameState, targetElement);
+}
+class Fill {
+  constructor(options) {
+    this.color = (options == null ? void 0 : options.color) || "#CCC";
+    this.opacity = (options == null ? void 0 : options.opacity) || 1;
+    this._getRgba = memoise(toRgba);
+  }
+  getRgba() {
+    return this._getRgba(this.color, this.opacity);
   }
 }
-function interpolateFeatures(currentFeatures, newFeatures, { interpolate: interpolate2, separate, combine }) {
-  if (currentFeatures.length !== newFeatures.length) {
-    throw new Error(
-      "interpolateFeatures expects an equal number of features for start and end"
-    );
+class Text {
+  constructor(options) {
+    this.content = options == null ? void 0 : options.content;
+    this.fontFamily = (options == null ? void 0 : options.fontFamily) || "var(--text-sans)";
+    this.fontSize = (options == null ? void 0 : options.fontSize) || "17px";
+    this.fontWeight = (options == null ? void 0 : options.fontWeight) || "400";
+    this.lineHeight = (options == null ? void 0 : options.lineHeight) || 1.3;
+    this.color = (options == null ? void 0 : options.color) || "#121212";
+    this.textShadow = (options == null ? void 0 : options.textShadow) || "1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6";
   }
-  const featureInterpolators = [];
-  for (let i = 0; i < currentFeatures.length; i++) {
-    const geometryInterpolators = [];
-    const currentGeometries = currentFeatures[i].geometries;
-    const newGeometries = newFeatures[i].geometries;
-    if (newGeometries.length === currentGeometries.length) {
-      for (let e = 0; e < currentGeometries.length; e++) {
-        const currentGeometry = currentGeometries[e];
-        const newGeometry = newGeometries[e];
-        if (currentGeometry.type !== "Polygon" || newGeometry.type !== "Polygon") {
-          throw new Error("interpolateFeatures expects only Polygon geometry");
-        }
-        const shapeInterpolator = interpolate2(
-          currentGeometries[e].getOuterRing(),
-          newGeometries[e].getOuterRing(),
-          { string: false }
-        );
-        geometryInterpolators.push({
-          type: "default",
-          interpolator: shapeInterpolator
-        });
-      }
-    } else if (currentGeometries.length === 1 && newGeometries.length > 1) {
-      const separationInterpolator = separate(
-        currentGeometries[0].getOuterRing(),
-        newGeometries.map((geometry) => geometry.getOuterRing()),
-        { string: false, single: true }
-      );
-      geometryInterpolators.push({
-        type: "separate",
-        interpolator: separationInterpolator
-      });
-    } else if (currentGeometries.length > 1 && newGeometries.length === 1) {
-      const combinationInterpolator = combine(
-        currentGeometries.map((geometry) => geometry.getOuterRing()),
-        newGeometries[0].getOuterRing(),
-        { string: false, single: true }
-      );
-      geometryInterpolators.push({
-        type: "combine",
-        interpolator: combinationInterpolator
-      });
-    } else {
-      throw new Error(
-        `Encountered an unexpected number of geometries: ${currentGeometries.length} and ${newGeometries.length}`
-      );
+}
+class TinyQueue {
+  constructor(data = [], compare = defaultCompare) {
+    this.data = data;
+    this.length = this.data.length;
+    this.compare = compare;
+    if (this.length > 0) {
+      for (let i = (this.length >> 1) - 1; i >= 0; i--) this._down(i);
     }
-    featureInterpolators.push(geometryInterpolators);
   }
-  return (t) => {
-    if (t >= 1) {
-      return newFeatures;
+  push(item) {
+    this.data.push(item);
+    this.length++;
+    this._up(this.length - 1);
+  }
+  pop() {
+    if (this.length === 0) return void 0;
+    const top = this.data[0];
+    const bottom = this.data.pop();
+    this.length--;
+    if (this.length > 0) {
+      this.data[0] = bottom;
+      this._down(0);
     }
-    const features = [];
-    for (let i = 0; i < featureInterpolators.length; i++) {
-      const feature = newFeatures[i].clone();
-      const geometries = [];
-      const geometryInterpolators = featureInterpolators[i];
-      for (const [
-        index,
-        { type, interpolator }
-      ] of geometryInterpolators.entries()) {
-        let geometry = feature.geometries[index].clone();
-        let interpolated;
-        switch (type) {
-          case "separate":
-          case "combine":
-            interpolated = interpolator(t);
-            interpolated.forEach((d2) => {
-              const polygon = geometry.clone();
-              polygon.setCoordinates([d2]);
-              geometries.push(polygon);
-            });
-            break;
-          default:
-            geometry.setOuterRing(interpolator(t));
-            geometries.push(geometry);
-            break;
-        }
+    return top;
+  }
+  peek() {
+    return this.data[0];
+  }
+  _up(pos) {
+    const { data, compare } = this;
+    const item = data[pos];
+    while (pos > 0) {
+      const parent = pos - 1 >> 1;
+      const current = data[parent];
+      if (compare(item, current) >= 0) break;
+      data[pos] = current;
+      pos = parent;
+    }
+    data[pos] = item;
+  }
+  _down(pos) {
+    const { data, compare } = this;
+    const halfLength = this.length >> 1;
+    const item = data[pos];
+    while (pos < halfLength) {
+      let left = (pos << 1) + 1;
+      let best = data[left];
+      const right = left + 1;
+      if (right < this.length && compare(data[right], best) < 0) {
+        left = right;
+        best = data[right];
       }
-      feature.setGeometry(geometries);
-      features.push(feature);
+      if (compare(best, item) >= 0) break;
+      data[pos] = best;
+      pos = left;
     }
-    return features;
-  };
+    data[pos] = item;
+  }
 }
-function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
-  const fillInterpolator = interpolateFill(
-    firstStyle.fill,
-    secondStyle.fill,
-    interpolateColors,
-    interpolateNumbers
-  );
-  const strokeInterpolator = interpolateStroke(
-    firstStyle.stroke,
-    secondStyle.stroke,
-    interpolateColors,
-    interpolateNumbers
-  );
-  return (t) => {
-    return new Style({
-      fill: fillInterpolator(t),
-      stroke: strokeInterpolator(t)
-    });
-  };
+function defaultCompare(a, b) {
+  return a < b ? -1 : a > b ? 1 : 0;
 }
-function interpolateFill(fillA, fillB, interpolateColors, interpolateNumbers) {
-  const colorInterpolator = interpolateColors(
-    (fillA == null ? void 0 : fillA.color) ?? "transparent",
-    (fillB == null ? void 0 : fillB.color) ?? "transparent"
-  );
-  const opacityInterpolator = interpolateNumbers(
-    (fillA == null ? void 0 : fillA.opacity) ?? 1,
-    (fillB == null ? void 0 : fillB.opacity) ?? 1
-  );
-  return (t) => {
-    return new Fill({
-      color: colorInterpolator(t),
-      opacity: opacityInterpolator(t)
-    });
-  };
+function knn(tree, x, y, n2, predicate, maxDistance) {
+  let node = tree.data;
+  const result = [];
+  const toBBox = tree.toBBox;
+  const queue = new TinyQueue(void 0, compareDist);
+  while (node) {
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      const dist = boxDist(x, y, node.leaf ? toBBox(child) : child);
+      {
+        queue.push({
+          node: child,
+          isItem: node.leaf,
+          dist
+        });
+      }
+    }
+    while (queue.length && queue.peek().isItem) {
+      const candidate = queue.pop().node;
+      if (!predicate || predicate(candidate))
+        result.push(candidate);
+      if (result.length === n2) return result;
+    }
+    node = queue.pop();
+    if (node) node = node.node;
+  }
+  return result;
 }
-function interpolateStroke(strokeA, strokeB, interpolateColors, interpolateNumbers) {
-  const colorInterpolator = interpolateColors(
-    (strokeA == null ? void 0 : strokeA.color) ?? "transparent",
-    (strokeB == null ? void 0 : strokeB.color) ?? "transparent"
-  );
-  const opacityInterpolator = interpolateNumbers(
-    (strokeA == null ? void 0 : strokeA.opacity) ?? 1,
-    (strokeB == null ? void 0 : strokeB.opacity) ?? 1
-  );
-  const widthInterpolator = interpolateNumbers(
-    (strokeA == null ? void 0 : strokeA.width) ?? 1,
-    (strokeB == null ? void 0 : strokeB.width) ?? 1
-  );
-  return (t) => {
-    return new Stroke({
-      color: colorInterpolator(t),
-      opacity: opacityInterpolator(t),
-      width: widthInterpolator(t)
+function compareDist(a, b) {
+  return a.dist - b.dist;
+}
+function boxDist(x, y, box) {
+  const dx = axisDist(x, box.minX, box.maxX), dy = axisDist(y, box.minY, box.maxY);
+  return dx * dx + dy * dy;
+}
+function axisDist(k, min, max) {
+  return k < min ? min - k : k <= max ? 0 : k - max;
+}
+class VectorSource {
+  constructor({ features }) {
+    this.dispatcher = new Dispatcher(this);
+    this._featuresRtree = new RBush();
+    this.setFeatures(features);
+  }
+  tearDown() {
+    this.dispatcher = null;
+  }
+  getFeatures() {
+    return this._features;
+  }
+  getFeaturesAtCoordinate(coordinate) {
+    const [lon, lat] = coordinate;
+    const features = knn(
+      this._featuresRtree,
+      lon,
+      lat,
+      10,
+      (d2) => d2.feature.containsCoordinate(coordinate)
+    ).map((d2) => {
+      const midX = d2.minX + (d2.minX + d2.maxX) / 2;
+      const midY = d2.minY + (d2.minY + d2.maxY) / 2;
+      d2.distance = Math.hypot(midX - lon, midY - lat);
+      return d2;
     });
-  };
+    features.sort((a, b) => a.distance - b.distance);
+    return features.map((d2) => d2.feature);
+  }
+  getFeaturesInExtent(extent) {
+    const [minX, minY, maxX, maxY] = extent;
+    return this._featuresRtree.search({ minX, minY, maxX, maxY }).map((d2) => d2.feature);
+  }
+  setFeatures(features) {
+    this._featuresRtree.clear();
+    for (const feature of features) {
+      const [minX, minY, maxX, maxY] = feature.getExtent();
+      this._featuresRtree.insert({
+        minX: Math.floor(minX),
+        minY: Math.floor(minY),
+        maxX: Math.ceil(maxX),
+        maxY: Math.ceil(maxY),
+        feature
+      });
+    }
+    this._features = features;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
+  }
 }
-class Feature {
+class TextLayer {
+  /** @param {TextLayerComponentProps} props */
+  static Component({
+    features,
+    style: style2,
+    minZoom,
+    opacity,
+    declutter,
+    drawCollisionBoxes
+  }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => TextLayer.with(features, {
+        style: style2,
+        minZoom,
+        opacity,
+        declutter,
+        drawCollisionBoxes
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [features, minZoom, opacity, declutter, drawCollisionBoxes]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style2;
+    }, [style2]);
+    return null;
+  }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   * @param {TextLayerOptions} options
+   */
+  static with(features, options) {
+    const source = new VectorSource({ features });
+    return new TextLayer({ source, ...options });
+  }
   /**
-   * Represents a feature on the map
    * @constructor
-   * @param {Object} props - The properties for the feature.
-   * @property {string} id - The unique identifier of the feature
-   * @property {Array} geometries - The geometries of the feature
-   * @property {Object} properties - The properties of the feature
-   * @property {import("./styles").Style | import("./styles").StyleFunction} style - The style of the feature
+   * @param {Object} params
+   * @param {VectorSource} params.source
+   * @param {Style | (() => Style)} [params.style=undefined]
+   * @param {number} [params.minZoom=0]
+   * @param {number} [params.opacity=1]
+   * @param {boolean} [params.declutter=true]
+   * @param {boolean} [params.drawCollisionBoxes=false]
    */
-  constructor({ id: id2, geometries, properties, style: style2 }) {
-    this.id = id2;
-    this.geometries = geometries;
-    this.properties = properties;
-    this.style = style2;
-    this.uid = createUid();
+  constructor({
+    source,
+    style: style2,
+    minZoom = 0,
+    opacity = 1,
+    declutter = true,
+    drawCollisionBoxes = false
+  }) {
+    this.source = source;
+    this._style = style2;
+    this.minZoom = minZoom;
+    this.opacity = opacity;
+    this.declutter = declutter;
+    this.drawCollisionBoxes = drawCollisionBoxes;
+    this.renderer = new TextLayerRenderer(this);
+    this.dispatcher = new Dispatcher(this);
+  }
+  tearDown() {
+    this.dispatcher = null;
+  }
+  get style() {
+    if (this._style) return this._style;
+    const defaultStyle = new Style({
+      text: new Text()
+    });
+    return defaultStyle;
+  }
+  set style(style2) {
+    this._style = style2;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
   }
   getExtent() {
     if (this._extent) return this._extent;
-    const extent = this.geometries.reduce((combinedExtent, geometries) => {
-      if (!combinedExtent) return geometries.extent;
-      return combineExtents(geometries.extent, combinedExtent);
+    const features = this.source.getFeatures();
+    const extent = features.reduce((combinedExtent, feature) => {
+      const featureExtent = feature.getExtent();
+      if (!combinedExtent) return featureExtent;
+      return combineExtents(featureExtent, combinedExtent);
     }, null);
     this._extent = extent;
     return extent;
   }
-  setgeometries(geometries) {
-    this.geometries = geometries;
-    this._extent = void 0;
-  }
-  getProjectedGeometries(projection) {
-    return this.geometries.map(
-      (d2) => d2.getProjected(projection, projection.revision)
-    );
-  }
   getStyleFunction() {
     const style2 = this.style;
-    if (!style2) return null;
     if (typeof style2 === "function") return style2;
     return () => {
       return style2;
     };
   }
-  containsCoordinate(coordinate) {
-    if (!containsCoordinate(this.getExtent(), coordinate)) {
-      return false;
-    }
-    for (const geometries of this.geometries) {
-      if (geoContains(geometries.getGeoJSON(), coordinate)) {
-        return true;
+  renderFrame(frameState, targetElement) {
+    return this.renderer.renderFrame(frameState, targetElement);
+  }
+}
+class VectorLayerRenderer {
+  constructor(layer) {
+    this.layer = layer;
+    this.featureRenderer = new FeatureRenderer();
+  }
+  renderFrame(frameState, targetElement) {
+    if (this.layer.opacity === 0) return targetElement;
+    const { projection, sizeInPixels, visibleExtent, transform } = frameState.viewState;
+    const container2 = this.getOrCreateContainer(targetElement, sizeInPixels);
+    const context = container2.firstElementChild.getContext("2d");
+    context.save();
+    context.translate(transform.x, transform.y);
+    context.scale(transform.k, transform.k);
+    context.lineJoin = "round";
+    context.lineCap = "round";
+    context.globalAlpha = this.layer.opacity;
+    const source = this.layer.source;
+    const features = source.getFeaturesInExtent(visibleExtent);
+    for (const feature of features) {
+      const styleFunction2 = feature.getStyleFunction() || this.layer.getStyleFunction();
+      const featureStyle = styleFunction2(feature);
+      if ((featureStyle == null ? void 0 : featureStyle.stroke) || (featureStyle == null ? void 0 : featureStyle.fill)) {
+        context.save();
+        this.featureRenderer.setStyle(featureStyle);
+        this.featureRenderer.render(frameState, feature, context);
+        context.restore();
       }
     }
-    return false;
-  }
-  clone() {
-    return new Feature({
-      id: this.id,
-      geometries: this.geometries.map((d2) => d2.clone()),
-      properties: this.properties,
-      style: this.style
-    });
-  }
-  /**
-   * Returns the geometries as a GeoJSON object
-   * @returns {Object} The GeoJSON representation of the geometries
-   */
-  getGeoJSON() {
-    const geometries = this.geometries.map((d2) => d2.getGeoJSON());
-    if (geometries.length === 1) return geometries[0];
-    return {
-      type: "Feature",
-      geometry: this._getGeometryGeoJSON(),
-      properties: this.properties
-    };
+    if (Object.prototype.hasOwnProperty.call(projection, "getCompositionBorders")) {
+      context.beginPath();
+      context.lineWidth = 1 / transform.k;
+      context.strokeStyle = "#999";
+      projection.drawCompositionBorders(context);
+      context.stroke();
+    }
+    context.restore();
+    return container2;
   }
-  _getGeometryGeoJSON() {
-    const geometries = this.geometries.map((d2) => d2.getGeoJSON());
-    if (geometries.length === 0) throw new Error("Feature has no geometries");
-    if (geometries.length === 1) return geometries[0];
-    if (geometries[0].type === "Polygon") {
-      return {
-        type: "MultiPolygon",
-        coordinates: geometries.map((d2) => d2.coordinates)
-      };
-    } else if (geometries[0].type === "LineString") {
-      return {
-        type: "MultiLineString",
-        coordinates: geometries.map((d2) => d2.coordinates)
-      };
-    } else if (geometries[0].type === "Point") {
-      return {
-        type: "MultiPoint",
-        coordinates: geometries.map((d2) => d2.coordinates)
-      };
+  getOrCreateContainer(targetElement, sizeInPixels) {
+    let container2 = null;
+    let containerReused = false;
+    let canvas = targetElement && targetElement.firstElementChild;
+    if (canvas instanceof HTMLCanvasElement) {
+      container2 = targetElement;
+      containerReused = true;
+    } else if (this._container) {
+      container2 = this._container;
+    } else {
+      container2 = this.createContainer();
     }
-    throw new Error("Could not determine geometry type");
+    if (!containerReused) {
+      const canvas2 = container2.firstElementChild;
+      canvas2.width = sizeInPixels[0];
+      canvas2.height = sizeInPixels[1];
+    }
+    this._container = container2;
+    return container2;
+  }
+  createContainer() {
+    const container2 = document.createElement("div");
+    container2.className = "gv-map-layer";
+    let style2 = container2.style;
+    style2.position = "absolute";
+    style2.width = "100%";
+    style2.height = "100%";
+    const canvas = document.createElement("canvas");
+    style2 = canvas.style;
+    style2.position = "absolute";
+    style2.width = "100%";
+    style2.height = "100%";
+    container2.appendChild(canvas);
+    return container2;
   }
 }
-class Geometry {
-  /**
-   * Represents vector geometry
-   * @constructor
-   * @param {Object} options
-   * @param {string} options.type - The type of geometry (e.g., 'Point', 'LineString', 'Polygon')
-   * @param {Array} options.extent - The extent of the geometry (e.g., [xmin, ymin, xmax, ymax])
-   * @param {Array} options.coordinates - The coordinates of the geometry (e.g., [[x1, y1], [x2, y2], ...])
-   */
-  constructor({ type, extent, coordinates }) {
-    this.type = type;
-    this.extent = extent;
-    this.coordinates = coordinates;
-    this.getProjected = memoise(this._getProjected).bind(this);
+class VectorLayer {
+  /** @param {VectorLayerComponentProps} props */
+  static Component({
+    features: featureCollection,
+    style: style2,
+    minZoom,
+    opacity,
+    hitDetectionEnabled = true
+  }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => {
+        const features = featureCollection instanceof FeatureCollection ? featureCollection.features : (
+          /** @type {import("../Feature").Feature[]} */
+          featureCollection
+        );
+        return VectorLayer.with(features, {
+          style: style2,
+          minZoom,
+          opacity,
+          hitDetectionEnabled
+        });
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [featureCollection, minZoom, opacity, hitDetectionEnabled]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style2;
+    }, [style2]);
+    return null;
   }
   /**
-   * Returns the geometry as a GeoJSON object
-   * @function
-   * @param {import("../projection").Projection} projection - The projection to use for the geometry
-   * @returns {Object} A GeoJSON representation of the projected geometry
-   * @private
+   * @param {import("../Feature").Feature[]} features
+   * @param {VectorLayerOptions} options
    */
-  // eslint-disable-next-line no-unused-vars
-  _getProjected(projection) {
-    throw new Error("Not implemented");
+  static with(features, options) {
+    const source = new VectorSource({ features });
+    return new VectorLayer({ source, ...options });
   }
   /**
-   * Returns the geometry as a GeoJSON object
-   * @returns {Object} The GeoJSON representation of the geometry
+   * @param {Object} params
+   * @param {VectorSource} params.source
+   * @param {Style | (() => Style)} [params.style=undefined]
+   * @param {number} [params.minZoom=0]
+   * @param {number} [params.opacity=1]
+   * @param {boolean} [params.hitDetectionEnabled=true]
    */
-  getGeoJSON() {
-    return {
-      type: this.type,
-      coordinates: this.coordinates
-    };
+  constructor({
+    source,
+    style: style2,
+    minZoom = 0,
+    opacity = 1,
+    hitDetectionEnabled = true
+  }) {
+    this.dispatcher = new Dispatcher(this);
+    this.renderer = new VectorLayerRenderer(this);
+    this.source = source;
+    this._style = style2;
+    this.minZoom = minZoom;
+    this.opacity = opacity;
+    this.hitDetectionEnabled = hitDetectionEnabled;
   }
-}
-class LineString extends Geometry {
-  constructor({ type = "LineString", extent, coordinates }) {
-    super({ type, extent, coordinates });
+  get source() {
+    return this._source;
   }
-  _getProjected(projection) {
-    const projected = [];
-    for (const point of this.coordinates) {
-      projected.push(projection(point));
+  set source(source) {
+    if (this._source && source !== this._source) {
+      this._source.tearDown();
     }
-    return {
-      type: this.type,
-      coordinates: projected
-    };
+    this._source = source;
+    source.on(MapEvent.CHANGE, () => {
+      this._extent = null;
+      this.dispatcher.dispatch(MapEvent.CHANGE);
+    });
   }
-}
-class Polygon extends Geometry {
-  constructor({ type = "Polygon", extent, coordinates }) {
-    super({ type, extent, coordinates });
+  setRawProjection(projection) {
+    this.projection = projection;
   }
-  _getProjected(projection) {
-    const projected = [];
-    const rings = this.coordinates;
-    for (const ring of rings) {
-      const projectedRing = [];
-      for (const point of ring) {
-        const projectedPoint = projection(point);
-        if (projectedPoint) {
-          projectedRing.push(projectedPoint);
-        } else {
-          break;
-        }
-      }
-      if (projectedRing.length > 0) {
-        projected.push(projectedRing);
-      }
-    }
-    return {
-      type: this.type,
-      coordinates: projected
+  tearDown() {
+    this.dispatcher = null;
+  }
+  get style() {
+    if (this._style) return this._style;
+    const defaultStyle = new Style({
+      stroke: new Stroke()
+    });
+    return defaultStyle;
+  }
+  set style(style2) {
+    this._style = style2;
+    this.dispatcher.dispatch(MapEvent.CHANGE);
+  }
+  getStyleFunction() {
+    const style2 = this.style;
+    if (typeof style2 === "function") return style2;
+    return () => {
+      return style2;
     };
   }
-  getOuterRing() {
-    return this.coordinates[0];
-  }
-  setOuterRing(coordinates) {
-    this.coordinates[0] = coordinates;
+  getExtent() {
+    if (this._extent) return this._extent;
+    const features = this.source.getFeatures();
+    const extent = features.reduce((combinedExtent, feature) => {
+      const featureExtent = feature.getExtent();
+      if (!combinedExtent) return featureExtent;
+      return combineExtents(featureExtent, combinedExtent);
+    }, null);
+    this._extent = extent;
+    return extent;
   }
-  setCoordinates(coordinates) {
-    this.coordinates = coordinates;
+  findFeatures(coordinate) {
+    if (!this.hitDetectionEnabled) return;
+    return this.source.getFeaturesAtCoordinate(coordinate);
   }
-  clone() {
-    return new Polygon({
-      extent: this.extent,
-      coordinates: JSON.parse(JSON.stringify(this.coordinates))
-    });
+  renderFrame(frameState, targetElement) {
+    return this.renderer.renderFrame(frameState, targetElement);
   }
 }
-class Point extends Geometry {
-  constructor({ type = "Point", coordinates }) {
-    super({ type, extent: null, coordinates });
-    this.extent = [...coordinates, ...coordinates];
-  }
-  _getProjected(projection) {
-    return {
-      type: this.type,
-      coordinates: projection(this.coordinates)
-    };
+function interpolateFeatures(currentFeatures, newFeatures, { interpolate: interpolate2, separate, combine }) {
+  if (currentFeatures.length !== newFeatures.length) {
+    throw new Error(
+      "interpolateFeatures expects an equal number of features for start and end"
+    );
   }
-}
-class GeoJSON {
-  readFeaturesFromObject(object) {
-    const geoJSONObject = object;
-    let features = null;
-    if (geoJSONObject["type"] === "FeatureCollection") {
-      const geoJSONFeatureCollection = object;
-      features = [];
-      const geoJSONFeatures = geoJSONFeatureCollection["features"];
-      for (let i = 0, ii = geoJSONFeatures.length; i < ii; ++i) {
-        const featureObject = this.readFeatureFromObject(geoJSONFeatures[i]);
-        if (!featureObject) {
-          continue;
-        }
-        features.push(featureObject);
-      }
-    } else if (geoJSONObject["type"] === "Feature") {
-      features = [this.readFeatureFromObject(geoJSONObject)];
-    } else if (Array.isArray(geoJSONObject)) {
-      features = [];
-      for (let i = 0, ii = geoJSONObject.length; i < ii; ++i) {
-        const featureObject = this.readFeatureFromObject(geoJSONObject[i]);
-        if (!featureObject) {
-          continue;
+  const featureInterpolators = [];
+  for (let i = 0; i < currentFeatures.length; i++) {
+    const geometryInterpolators = [];
+    const currentGeometries = currentFeatures[i].geometries;
+    const newGeometries = newFeatures[i].geometries;
+    if (newGeometries.length === currentGeometries.length) {
+      for (let e = 0; e < currentGeometries.length; e++) {
+        const currentGeometry = currentGeometries[e];
+        const newGeometry = newGeometries[e];
+        if (currentGeometry.type !== "Polygon" || newGeometry.type !== "Polygon") {
+          throw new Error("interpolateFeatures expects only Polygon geometry");
         }
-        features.push(featureObject);
+        const shapeInterpolator = interpolate2(
+          currentGeometries[e].getOuterRing(),
+          newGeometries[e].getOuterRing(),
+          { string: false }
+        );
+        geometryInterpolators.push({
+          type: "default",
+          interpolator: shapeInterpolator
+        });
       }
+    } else if (currentGeometries.length === 1 && newGeometries.length > 1) {
+      const separationInterpolator = separate(
+        currentGeometries[0].getOuterRing(),
+        newGeometries.map((geometry) => geometry.getOuterRing()),
+        { string: false, single: true }
+      );
+      geometryInterpolators.push({
+        type: "separate",
+        interpolator: separationInterpolator
+      });
+    } else if (currentGeometries.length > 1 && newGeometries.length === 1) {
+      const combinationInterpolator = combine(
+        currentGeometries.map((geometry) => geometry.getOuterRing()),
+        newGeometries[0].getOuterRing(),
+        { string: false, single: true }
+      );
+      geometryInterpolators.push({
+        type: "combine",
+        interpolator: combinationInterpolator
+      });
     } else {
-      try {
-        const geometries = this.readGeometriesFromObject(geoJSONObject);
-        const feature = new Feature({ geometries });
-        features = [feature];
-      } catch {
-        console.warn("Unable to interpret GeoJSON:", geoJSONObject);
-        return;
-      }
+      throw new Error(
+        `Encountered an unexpected number of geometries: ${currentGeometries.length} and ${newGeometries.length}`
+      );
     }
-    return features.flat();
+    featureInterpolators.push(geometryInterpolators);
   }
-  readFeatureFromObject(geoJSONObject) {
-    const geometries = this.readGeometriesFromObject(geoJSONObject["geometry"]);
-    if (geometries.length > 0) {
-      return new Feature({
-        id: geoJSONObject["id"],
-        geometries,
-        properties: geoJSONObject["properties"]
-      });
+  return (t) => {
+    if (t >= 1) {
+      return newFeatures;
     }
-    return null;
-  }
-  readGeometriesFromObject(geometry) {
-    const geometries = [];
-    if (geometry.type === "Polygon") {
-      const polygon = this.readPolygonForCoordinates(geometry.coordinates);
-      geometries.push(polygon);
-    } else if (geometry.type === "MultiPolygon") {
-      for (const polygonCoordinates of geometry.coordinates) {
-        const polygon = this.readPolygonForCoordinates(polygonCoordinates);
-        geometries.push(polygon);
-      }
-    } else if (geometry.type === "LineString") {
-      const lineString = this.readLineStringForCoordinates(geometry.coordinates);
-      geometries.push(lineString);
-    } else if (geometry.type === "MultiLineString") {
-      for (const lineStringCoordinates of geometry.coordinates) {
-        const lineString = this.readLineStringForCoordinates(
-          lineStringCoordinates
-        );
-        geometries.push(lineString);
+    const features = [];
+    for (let i = 0; i < featureInterpolators.length; i++) {
+      const feature = newFeatures[i].clone();
+      const geometries = [];
+      const geometryInterpolators = featureInterpolators[i];
+      for (const [
+        index,
+        { type, interpolator }
+      ] of geometryInterpolators.entries()) {
+        let geometry = feature.geometries[index].clone();
+        let interpolated;
+        switch (type) {
+          case "separate":
+          case "combine":
+            interpolated = interpolator(t);
+            interpolated.forEach((d2) => {
+              const polygon = geometry.clone();
+              polygon.setCoordinates([d2]);
+              geometries.push(polygon);
+            });
+            break;
+          default:
+            geometry.setOuterRing(interpolator(t));
+            geometries.push(geometry);
+            break;
+        }
       }
-    } else if (geometry.type === "Point") {
-      const point = this.readPointForCoordinates(geometry.coordinates);
-      geometries.push(point);
+      feature.setGeometry(geometries);
+      features.push(feature);
     }
-    return geometries;
-  }
-  readPolygonForCoordinates(coordinates) {
-    const outerRing = coordinates[0];
-    const extent = extentForCoordinates(outerRing);
-    return new Polygon({ extent, coordinates });
-  }
-  readLineStringForCoordinates(coordinates) {
-    const extent = extentForCoordinates(coordinates);
-    return new LineString({ extent, coordinates });
-  }
-  readPointForCoordinates(coordinates) {
-    return new Point({ coordinates });
-  }
+    return features;
+  };
+}
+function interpolateStyles(firstStyle, secondStyle, interpolateColors, interpolateNumbers) {
+  const fillInterpolator = interpolateFill(
+    firstStyle.fill,
+    secondStyle.fill,
+    interpolateColors,
+    interpolateNumbers
+  );
+  const strokeInterpolator = interpolateStroke(
+    firstStyle.stroke,
+    secondStyle.stroke,
+    interpolateColors,
+    interpolateNumbers
+  );
+  return (t) => {
+    return new Style({
+      fill: fillInterpolator(t),
+      stroke: strokeInterpolator(t)
+    });
+  };
+}
+function interpolateFill(fillA, fillB, interpolateColors, interpolateNumbers) {
+  const colorInterpolator = interpolateColors(
+    (fillA == null ? void 0 : fillA.color) ?? "transparent",
+    (fillB == null ? void 0 : fillB.color) ?? "transparent"
+  );
+  const opacityInterpolator = interpolateNumbers(
+    (fillA == null ? void 0 : fillA.opacity) ?? 1,
+    (fillB == null ? void 0 : fillB.opacity) ?? 1
+  );
+  return (t) => {
+    return new Fill({
+      color: colorInterpolator(t),
+      opacity: opacityInterpolator(t)
+    });
+  };
+}
+function interpolateStroke(strokeA, strokeB, interpolateColors, interpolateNumbers) {
+  const colorInterpolator = interpolateColors(
+    (strokeA == null ? void 0 : strokeA.color) ?? "transparent",
+    (strokeB == null ? void 0 : strokeB.color) ?? "transparent"
+  );
+  const opacityInterpolator = interpolateNumbers(
+    (strokeA == null ? void 0 : strokeA.opacity) ?? 1,
+    (strokeB == null ? void 0 : strokeB.opacity) ?? 1
+  );
+  const widthInterpolator = interpolateNumbers(
+    (strokeA == null ? void 0 : strokeA.width) ?? 1,
+    (strokeB == null ? void 0 : strokeB.width) ?? 1
+  );
+  return (t) => {
+    return new Stroke({
+      color: colorInterpolator(t),
+      opacity: opacityInterpolator(t),
+      width: widthInterpolator(t)
+    });
+  };
 }
 function useWindowSize() {
   const [windowSize, setWindowSize] = useState(() => {
@@ -7730,6 +7762,8 @@ export {
   ControlChange,
   Dispatcher,
   Dropdown,
+  Feature,
+  FeatureCollection,
   Fill,
   FirstPastThePostWaffle,
   GeoJSON,