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

package/dist/interactive-component-library.umd.cjs

@@ -6180,174 +6180,103 @@
       )
     ] });
   }
-  class FeatureRenderer {
-    constructor() {
-      this.drawingFunction = d3Geo.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 (d3Geo.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;
@@ -6365,928 +6294,1031 @@
       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 } = hooks.useContext(MapContext);
-      const layer = hooks.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);
-      hooks.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 = d3Geo.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 } = hooks.useContext(MapContext);
-      const layer = hooks.useMemo(
-        () => VectorLayer.with(features, {
-          style: style2,
-          minZoom,
-          opacity,
-          hitDetectionEnabled
-        }),
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [features, minZoom, opacity, hitDetectionEnabled]
-      );
-      registerLayer(layer);
-      hooks.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 } = hooks.useContext(MapContext);
+      const layer = hooks.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);
+      hooks.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 (d3Geo.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 } = hooks.useContext(MapContext);
+      const layer = hooks.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);
+      hooks.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] = hooks.useState(() => {
@@ -7725,6 +7757,8 @@
   exports2.ControlChange = ControlChange;
   exports2.Dispatcher = Dispatcher;
   exports2.Dropdown = Dropdown;
+  exports2.Feature = Feature;
+  exports2.FeatureCollection = FeatureCollection;
   exports2.Fill = Fill;
   exports2.FirstPastThePostWaffle = FirstPastThePostWaffle;
   exports2.GeoJSON = GeoJSON;