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

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

@@ -327,9 +327,9 @@
       labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))
     ] });
   }
-  const svg$8 = "_svg_ihy3w_6";
-  const previous = "_previous_ihy3w_12";
-  const next = "_next_ihy3w_16";
+  const svg$8 = "_svg_8bh9o_6";
+  const previous = "_previous_8bh9o_12";
+  const next = "_next_8bh9o_16";
   const defaultStyles$u = {
     svg: svg$8,
     previous,
@@ -493,25 +493,27 @@
     circle: circle$1,
     pulse
   };
-  const CircleIcon = ({ color: color2, pulse: pulse2 = false, styles: styles2 }) => {
+  const CircleIcon = ({ color: color2, pulse: pulse2 = false, diameter = 11, styles: styles2 }) => {
     styles2 = mergeStyles(defaultStyles$r, styles2);
+    let radius = diameter / 2;
+    let padding = 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
         style: styles2.svg,
         fill: "none",
-        height: "11",
-        viewBox: "0 0 11 11",
-        width: "11",
+        height: diameter + padding,
+        viewBox: `0 0 ${diameter + padding} ${diameter + padding}`,
+        width: diameter + padding,
         xmlns: "http://www.w3.org/2000/svg",
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
+          "circle",
           {
             className: [styles2.circle, pulse2 && styles2.pulse].join(" "),
             style: { fill: color2 },
-            height: "11",
-            rx: "5.5",
-            width: "11"
+            r: radius,
+            cx: radius + padding / 2,
+            cy: radius + padding / 2
           }
         )
       }
@@ -1139,6 +1141,19 @@
       }
     ) });
   }
+  const style = {
+    "aspect-ratio-box": "_aspect-ratio-box_1e5oy_1"
+  };
+  function AspectRatioBox({ heightAsProportionOfWidth, children }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: style["aspect-ratio-box"],
+        style: { "--aspect-ratio": heightAsProportionOfWidth },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", width: "100%", height: "100%" }, children })
+      }
+    );
+  }
   const sortAscending = (accessor) => {
     return (a, b) => {
       const valueA = a[accessor];
@@ -2732,7 +2747,7 @@
     };
     return feature;
   }
-  const MapContext = preact.createContext();
+  const MapContext$1 = preact.createContext();
   function SVGMapProvider({
     id: id2,
     mapRef,
@@ -2811,20 +2826,20 @@
       findFeatureAtPoint
     };
     mapRef.current = context;
-    return /* @__PURE__ */ jsxRuntime.jsx(MapContext.Provider, { value: context, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(MapContext$1.Provider, { value: context, children });
   }
   const path = "_path_1cwd5_9";
   const defaultStyles$1 = {
     path
   };
   function CompositionBorders({ styles: styles2 }) {
-    const context = hooks.useContext(MapContext);
+    const context = hooks.useContext(MapContext$1);
     const { projection } = context;
     styles2 = mergeStyles(defaultStyles$1, styles2);
     return /* @__PURE__ */ jsxRuntime.jsx("path", { className: styles2.path, d: projection.getCompositionBorders() });
   }
   function SVGRenderer({ children }) {
-    const { id: id2, config, size, selectedFeature, padding } = hooks.useContext(MapContext);
+    const { id: id2, config, size, selectedFeature, padding } = hooks.useContext(MapContext$1);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -3262,7 +3277,7 @@
     zIndex = 0,
     styles: styles2
   }) {
-    const context = hooks.useContext(MapContext);
+    const context = hooks.useContext(MapContext$1);
     const [searchIndex, setSearchIndex] = hooks.useState();
     hooks.useEffect(() => {
       if (!context.path) return;
@@ -3320,7 +3335,7 @@
     }) });
   }
   function Line({ id: id2, features, stroke = null, strokeWidth = 1, styles: styles2 }) {
-    const context = hooks.useContext(MapContext);
+    const context = hooks.useContext(MapContext$1);
     const draw = (ctx, path2) => {
       for (const feature of features) {
         ctx.beginPath();
@@ -3361,7 +3376,7 @@
     }) });
   }
   function Prerendered({ url }) {
-    const context = hooks.useContext(MapContext);
+    const context = hooks.useContext(MapContext$1);
     const { width, height } = context.contentSize;
     return /* @__PURE__ */ jsxRuntime.jsx("image", { width, height, href: url });
   }
@@ -3375,7 +3390,7 @@
     zIndex = 0,
     styles: styles2
   }) {
-    const context = hooks.useContext(MapContext);
+    const context = hooks.useContext(MapContext$1);
     hooks.useEffect(() => {
       function findFeatureAtPoint(point) {
         for (const [index, feature] of features.entries()) {
@@ -3515,10 +3530,10 @@
       );
       const containerSize = useContainerSize(containerRef);
       const containerStyle = hooks.useMemo(() => {
-        const style = {};
-        if (width > 0) style["width"] = width;
-        if (height > 0) style["height"] = height;
-        return style;
+        const style2 = {};
+        if (width > 0) style2["width"] = width;
+        if (height > 0) style2["height"] = height;
+        return style2;
       }, [width, height]);
       const renderSVG = containerSize && !config.drawToCanvas;
       const childrenArray = Array.isArray(children) ? children : [children];
@@ -3593,6 +3608,254 @@
     }
     return size;
   }
+  function bboxFeature(bounds) {
+    const minLon = bounds[0][0];
+    const minLat = bounds[0][1];
+    const maxLon = bounds[1][0];
+    const maxLat = bounds[1][1];
+    const feature = {
+      type: "Feature",
+      properties: {},
+      geometry: {
+        coordinates: [
+          [
+            [minLon, maxLat],
+            [maxLon, maxLat],
+            [maxLon, minLat],
+            [minLon, minLat],
+            [minLon, maxLat]
+          ]
+        ],
+        type: "Polygon"
+      }
+    };
+    return feature;
+  }
+  const BASE_RESOLUTION = 156543.03392;
+  function zoomLevelToZoomScale(zoomLevel, initialResolution) {
+    const resolution = BASE_RESOLUTION / Math.pow(2, zoomLevel);
+    const zoomScale = initialResolution / resolution;
+    return zoomScale;
+  }
+  function zoomLevelForResolution(currentResolution) {
+    const zoomLevel = Math.log2(BASE_RESOLUTION / currentResolution);
+    return zoomLevel;
+  }
+  function haversineDistance(lat1, lon1, lat2, lon2) {
+    const R2 = 6371e3;
+    const toRadians = (degrees2) => degrees2 * Math.PI / 180;
+    const dLat = toRadians(lat2 - lat1);
+    const dLon = toRadians(lon2 - lon1);
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    const c2 = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    return R2 * c2;
+  }
+  function resolutionForExtent(extent, viewportSize) {
+    const [lonMin, latMin, lonMax, latMax] = extent;
+    const latMid = (latMin + latMax) / 2;
+    const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
+    const resolution = distance / viewportSize[0];
+    return resolution;
+  }
+  const Projection = {
+    geoIdentity: d3Geo.geoIdentity(),
+    geoMercator: d3Geo.geoMercator(),
+    geoAlbersUS: d3Geo.geoAlbersUsa().scale(1070).translate([487.5, 305]),
+    geoAlbersUKComposite: geoAlbersUk(),
+    geoAlbersEngland: d3Geo.geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54])
+  };
+  function validateGeometries(geometries) {
+    if (!Array.isArray(geometries)) {
+      throw new Error("geometries must be an array");
+    }
+    geometries.forEach((geometry) => {
+      var _a;
+      if (!geometry.type) {
+        throw new Error("geometry must have a type");
+      }
+      if (!((_a = geometry.coordinates) == null ? void 0 : _a.length)) {
+        throw new Error("geometry must have coordinates");
+      }
+    });
+  }
+  function generateDebugUrl(feature, convertToGeoJSON = true) {
+    const featureGeoJSON = convertToGeoJSON ? feature.getGeoJSON() : feature;
+    const featureCollection = {
+      type: "FeatureCollection",
+      features: [featureGeoJSON]
+    };
+    const jsonString = encodeURIComponent(JSON.stringify(featureCollection));
+    return `https://geojson.io/#data=data:application/json,${jsonString}`;
+  }
+  class View {
+    constructor({
+      projection = Projection.geoIdentity,
+      extent,
+      minZoom = 1,
+      maxZoom = 10,
+      padding = { top: 0, right: 0, bottom: 0, left: 0 }
+    }, debug = false) {
+      this.debug = debug;
+      projection.revision = 0;
+      this.projection = projection;
+      this.extent = extent;
+      this.minZoom = minZoom;
+      this.maxZoom = maxZoom;
+      this._transform = d3Zoom.zoomIdentity;
+      this._padding = padding;
+      this._viewPortSize = [0, 0];
+      this.pixelRatio = window.devicePixelRatio;
+    }
+    set viewPortSize(size) {
+      const previousSize = this._viewPortSize;
+      this._viewPortSize = size;
+      if (previousSize !== size) {
+        if (this.extent) {
+          this.fitExtent(this.extent);
+        }
+      }
+    }
+    get viewPortSize() {
+      return this._viewPortSize;
+    }
+    set transform(transform) {
+      this._transform = transform;
+    }
+    get transform() {
+      return new d3Zoom.ZoomTransform(
+        this._transform.k,
+        this._transform.x * this.pixelRatio,
+        this._transform.y * this.pixelRatio
+      );
+    }
+    // map size in pixels (i.e. scaled by device pixel ratio)
+    get mapSize() {
+      return scaleSize(this.viewPortSize, this.pixelRatio);
+    }
+    get padding() {
+      return this._padding;
+    }
+    // padding in pixels (i.e. scaled by device pixel ratio)
+    get scaledPadding() {
+      const scaledPadding = { ...this._padding };
+      return scalePadding(scaledPadding, this.pixelRatio);
+    }
+    get baseResolution() {
+      const baseExtent = this.getVisibleExtent(d3Zoom.zoomIdentity, this.projection);
+      const baseResolution = resolutionForExtent(baseExtent, this.viewPortSize);
+      return baseResolution;
+    }
+    // calculates the upper and lower zoom scales
+    get scaleExtent() {
+      const maxScale = zoomLevelToZoomScale(this.maxZoom, this.baseResolution);
+      return [1, maxScale];
+    }
+    setProjection(projection) {
+      this.projection = projection;
+      this.fitObject(bboxFeature(this.extent));
+    }
+    // only set the raw projection when it has already been configured with projection.fitExtent()
+    setRawProjection(projection) {
+      this.projection = projection;
+    }
+    fitExtent(extent) {
+      const extentFeature = bboxFeature(extent);
+      this.fitObject(extentFeature);
+      if (this.debug) {
+        console.log("Fit extent", extent, generateDebugUrl(extentFeature, false));
+      }
+    }
+    fitObject(geoJSON) {
+      this.projection.fitExtent(this.getMapExtent(), geoJSON);
+      ++this.projection.revision;
+    }
+    // returns bounds relative to the viewport
+    boundsForExtent(extent) {
+      const SW = this.projection([extent[0], extent[1]]);
+      const NE = this.projection([extent[2], extent[3]]);
+      const minX = SW[0] / this.pixelRatio;
+      const minY = NE[1] / this.pixelRatio;
+      const maxX = NE[0] / this.pixelRatio;
+      const maxY = SW[1] / this.pixelRatio;
+      const width = maxX - minX;
+      const height = maxY - minY;
+      return [
+        [minX, minY],
+        [width, height]
+      ];
+    }
+    invert(point) {
+      const { projection, pixelRatio, transform } = this.getState();
+      const scaledPoint = [point[0] * pixelRatio, point[1] * pixelRatio];
+      const untransformedPoint = transform.invert(scaledPoint);
+      const mapCoordinate = projection.invert(untransformedPoint);
+      return mapCoordinate;
+    }
+    // bounds is defined as [[minX, minY], [maxX, maxY]]
+    invertBounds(bounds) {
+      const topLeft = bounds[0];
+      const topRight = [bounds[1][0], bounds[0][1]];
+      const bottomRight = [bounds[1][0], bounds[1][1]];
+      const bottomLeft = [bounds[0][0], bounds[1][1]];
+      const points = [topLeft, topRight, bottomRight, bottomLeft, topLeft];
+      return points.map((d2) => this.invert(d2));
+    }
+    // map resolution (meters per pixel)
+    getResolution() {
+      return resolutionForExtent(
+        this.getVisibleExtent(this.transform, this.projection),
+        this.viewPortSize
+      );
+    }
+    // map zoom level (0 = the entire world)
+    getZoomLevel() {
+      return zoomLevelForResolution(this.getResolution());
+    }
+    //
+    /**
+     * Function that returns the extent of the view in screen coordinates
+     * The extent is defined as [[minX, minY], [maxX, maxY]]
+     * @function getMapExtent
+     * @returns {[[number, number], [number, number]]}
+     */
+    getMapExtent() {
+      const mapSizeInPixels = this.mapSize;
+      const paddingInPixels = this.scaledPadding;
+      return [
+        [paddingInPixels.left, paddingInPixels.top],
+        sizeMinusPadding(mapSizeInPixels, {
+          ...paddingInPixels,
+          left: 0,
+          top: 0
+        })
+      ];
+    }
+    // visible extent in map coordinates
+    getVisibleExtent(transform, projection) {
+      if (this.projection === Projection.geoIdentity) {
+        const [width2, height2] = this.mapSize;
+        return [0, 0, width2, height2];
+      }
+      const [width, height] = this.mapSize;
+      const southWest = projection.invert(transform.invert([0, height]));
+      const northEast = projection.invert(transform.invert([width, 0]));
+      return [southWest[0], southWest[1], northEast[0], northEast[1]];
+    }
+    getState() {
+      const transform = this.transform;
+      const projection = this.projection;
+      return {
+        transform,
+        projection,
+        zoomLevel: transform.k,
+        pixelRatio: this.pixelRatio,
+        padding: this.padding,
+        viewPortSize: this.viewPortSize,
+        sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
+        visibleExtent: this.getVisibleExtent(transform, projection)
+      };
+    }
+  }
   function arrayEquals(arr1, arr2) {
     const len1 = arr1.length;
     if (len1 !== arr2.length) {
@@ -4085,11 +4348,11 @@
       this.map = map;
       this._element = document.createElement("div");
       this._element.className = "gv-layer-container";
-      const style = this._element.style;
-      style.position = "absolute";
-      style.width = "100%";
-      style.height = "100%";
-      style.zIndex = "0";
+      const style2 = this._element.style;
+      style2.position = "absolute";
+      style2.width = "100%";
+      style2.height = "100%";
+      style2.zIndex = "0";
       const container2 = map.viewPort;
       container2.insertBefore(this._element, container2.firstChild || null);
     }
@@ -5472,18 +5735,19 @@
   d3Selection.selection.prototype.interrupt = selection_interrupt;
   d3Selection.selection.prototype.transition = selection_transition;
   let Map$2 = class Map {
-    constructor(options) {
-      this.options = options;
-      this.view = options.view;
-      this.target = options.target;
+    constructor(config) {
+      if (config.debug) {
+        console.log("Map config", config);
+      }
+      this.options = config;
+      this.view = new View(config.view, config.debug);
+      this.target = config.target;
       this.layers = [];
       this.dispatcher = new Dispatcher(this);
       this._viewport = document.createElement("div");
       this._viewport.className = "gv-map";
       this._viewport.style.position = "relative";
       this._viewport.style.overflow = "hidden";
-      this._viewport.style.top = 0;
-      this._viewport.style.left = 0;
       this._viewport.style.width = "100%";
       this._viewport.style.height = "100%";
       this.target.appendChild(this._viewport);
@@ -5493,7 +5757,7 @@
       });
       this._resizeObserver.observe(this.target);
       this._viewport.addEventListener("touchmove", (event) => {
-        if (event.targetTouches.length < 2 && this.collaborativeGesturesEnabled) {
+        if (event.targetTouches.length < 2 && this._collaborativeGesturesEnabled) {
           this._filterEventCallback(true);
         }
       });
@@ -5516,6 +5780,10 @@
       return this._isTransitioning;
     }
     /** PUBLIC METHODS */
+    collaborativeGesturesEnabled(enabled) {
+      if (enabled === void 0) return this._collaborativeGesturesEnabled;
+      this._collaborativeGesturesEnabled = enabled;
+    }
     onFilterEvent(callback) {
       this._filterEventCallback = callback;
     }
@@ -5591,6 +5859,18 @@
       );
       d3Selection.select(this._viewport).transition().duration(500).call(this._zoomBehaviour.transform, newTransform, focalPoint);
     }
+    /** @param {import("./layers").Layer[]} layers */
+    hasLayers(layers) {
+      if (layers.length !== this.layers.length) {
+        return false;
+      }
+      for (let i = 0; i < layers.length; i++) {
+        if (layers[i] !== this.layers[i]) {
+          return false;
+        }
+      }
+      return true;
+    }
     async resetZoom(options) {
       return this.zoomTo(1, options);
     }
@@ -5687,201 +5967,13 @@
     _renderFrame() {
       const frameState = {
         size: this.size,
-        viewState: this.view.getState()
+        viewState: this.view.getState(),
+        debug: this.options.debug || false
       };
       this._renderer.renderFrame(frameState);
       this._animationFrameRequestID = null;
     }
   };
-  function bboxFeature(bounds) {
-    const minLon = bounds[0][0];
-    const minLat = bounds[0][1];
-    const maxLon = bounds[1][0];
-    const maxLat = bounds[1][1];
-    const feature = {
-      type: "Feature",
-      properties: {},
-      geometry: {
-        coordinates: [
-          [
-            [minLon, maxLat],
-            [maxLon, maxLat],
-            [maxLon, minLat],
-            [minLon, minLat],
-            [minLon, maxLat]
-          ]
-        ],
-        type: "Polygon"
-      }
-    };
-    return feature;
-  }
-  const BASE_RESOLUTION = 156543.03392;
-  function zoomLevelToZoomScale(zoomLevel, initialResolution) {
-    const resolution = BASE_RESOLUTION / Math.pow(2, zoomLevel);
-    const zoomScale = initialResolution / resolution;
-    return zoomScale;
-  }
-  function zoomLevelForResolution(currentResolution) {
-    const zoomLevel = Math.log2(BASE_RESOLUTION / currentResolution);
-    return zoomLevel;
-  }
-  function haversineDistance(lat1, lon1, lat2, lon2) {
-    const R2 = 6371e3;
-    const toRadians = (degrees2) => degrees2 * Math.PI / 180;
-    const dLat = toRadians(lat2 - lat1);
-    const dLon = toRadians(lon2 - lon1);
-    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
-    const c2 = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    return R2 * c2;
-  }
-  function resolutionForExtent(extent, viewportSize) {
-    const [lonMin, latMin, lonMax, latMax] = extent;
-    const latMid = (latMin + latMax) / 2;
-    const distance = haversineDistance(latMid, lonMin, latMid, lonMax);
-    const resolution = distance / viewportSize[0];
-    return resolution;
-  }
-  class View {
-    constructor({ projection, extent, minZoom, maxZoom, padding }) {
-      projection.revision = 0;
-      this.projection = projection;
-      this.extent = extent;
-      this.minZoom = minZoom;
-      this.maxZoom = maxZoom;
-      this._transform = d3Zoom.zoomIdentity;
-      this._padding = padding;
-      this._viewPortSize = [0, 0];
-      this.pixelRatio = window.devicePixelRatio;
-    }
-    set viewPortSize(size) {
-      const previousSize = this._viewPortSize;
-      this._viewPortSize = size;
-      if (previousSize !== size) {
-        this.fitObject(bboxFeature(this.extent));
-        const initialExtent = this.getVisibleExtent(d3Zoom.zoomIdentity, this.projection);
-        this.initialResolution = resolutionForExtent(initialExtent, size);
-      }
-    }
-    get viewPortSize() {
-      return this._viewPortSize;
-    }
-    set transform(transform) {
-      this._transform = transform;
-    }
-    get transform() {
-      return new d3Zoom.ZoomTransform(
-        this._transform.k,
-        this._transform.x * this.pixelRatio,
-        this._transform.y * this.pixelRatio
-      );
-    }
-    // map size in pixels (i.e. scaled by device pixel ratio)
-    get mapSize() {
-      return scaleSize(this.viewPortSize, this.pixelRatio);
-    }
-    get padding() {
-      return this._padding;
-    }
-    // padding in pixels (i.e. scaled by device pixel ratio)
-    get scaledPadding() {
-      const scaledPadding = { ...this._padding };
-      return scalePadding(scaledPadding, this.pixelRatio);
-    }
-    // calculates the upper and lower zoom scales
-    get scaleExtent() {
-      const maxScale = zoomLevelToZoomScale(this.maxZoom, this.initialResolution);
-      return [1, maxScale];
-    }
-    setProjection(projection) {
-      this.projection = projection;
-      this.fitObject(bboxFeature(this.extent));
-    }
-    // only set the raw projection when it has already been configured with projection.fitExtent()
-    setRawProjection(projection) {
-      this.projection = projection;
-    }
-    fitObject(geoJSON) {
-      this.projection.fitExtent(this.getMapExtent(), geoJSON);
-      ++this.projection.revision;
-    }
-    // returns bounds relative to the viewport
-    boundsForExtent(extent) {
-      const SW = this.projection([extent[0], extent[1]]);
-      const NE = this.projection([extent[2], extent[3]]);
-      const minX = SW[0] / this.pixelRatio;
-      const minY = NE[1] / this.pixelRatio;
-      const maxX = NE[0] / this.pixelRatio;
-      const maxY = SW[1] / this.pixelRatio;
-      const width = maxX - minX;
-      const height = maxY - minY;
-      return [
-        [minX, minY],
-        [width, height]
-      ];
-    }
-    invert(point) {
-      const { projection, pixelRatio, transform } = this.getState();
-      const scaledPoint = [point[0] * pixelRatio, point[1] * pixelRatio];
-      const untransformedPoint = transform.invert(scaledPoint);
-      const mapCoordinate = projection.invert(untransformedPoint);
-      return mapCoordinate;
-    }
-    // bounds is defined as [[minX, minY], [maxX, maxY]]
-    invertBounds(bounds) {
-      const topLeft = bounds[0];
-      const topRight = [bounds[1][0], bounds[0][1]];
-      const bottomRight = [bounds[1][0], bounds[1][1]];
-      const bottomLeft = [bounds[0][0], bounds[1][1]];
-      const points = [topLeft, topRight, bottomRight, bottomLeft, topLeft];
-      return points.map((d2) => this.invert(d2));
-    }
-    // map resolution (meters per pixel)
-    getResolution() {
-      return resolutionForExtent(
-        this.getVisibleExtent(this.transform, this.projection),
-        this.viewPortSize
-      );
-    }
-    // map zoom level (0 = the entire world)
-    getZoomLevel() {
-      return zoomLevelForResolution(this.getResolution());
-    }
-    // get extent for drawn map
-    getMapExtent() {
-      const mapSizeInPixels = this.mapSize;
-      const paddingInPixels = this.scaledPadding;
-      return [
-        [paddingInPixels.left, paddingInPixels.top],
-        sizeMinusPadding(mapSizeInPixels, {
-          ...paddingInPixels,
-          left: 0,
-          top: 0
-        })
-      ];
-    }
-    // visible extent in map coordinates
-    getVisibleExtent(transform, projection) {
-      const [width, height] = this.mapSize;
-      const southWest = projection.invert(transform.invert([0, height]));
-      const northEast = projection.invert(transform.invert([width, 0]));
-      return [southWest[0], southWest[1], northEast[0], northEast[1]];
-    }
-    getState() {
-      const transform = this.transform;
-      const projection = this.projection;
-      return {
-        transform,
-        projection,
-        zoomLevel: transform.k,
-        pixelRatio: this.pixelRatio,
-        padding: this.padding,
-        viewPortSize: this.viewPortSize,
-        sizeInPixels: scaleSize(this.viewPortSize, this.pixelRatio),
-        visibleExtent: this.getVisibleExtent(transform, projection)
-      };
-    }
-  }
   const mapContainer = "_mapContainer_1ogf3_9";
   const helpTextContainer = "_helpTextContainer_1ogf3_15";
   const helpText = "_helpText_1ogf3_15";
@@ -5894,18 +5986,33 @@
     desktopHelpText,
     mobileHelpText: mobileHelpText$1
   };
+  const MapContext = preact.createContext(null);
+  function MapProvider({ map, children }) {
+    const registeredLayers = [];
+    const registerLayer = (layer) => {
+      registeredLayers.push(layer);
+    };
+    hooks.useEffect(() => {
+      if (map && !map.hasLayers(registeredLayers)) {
+        map.setLayers(registeredLayers);
+      }
+    }, [map, children]);
+    return /* @__PURE__ */ jsxRuntime.jsx(MapContext.Provider, { value: { registerLayer }, children });
+  }
   const mobileHelpText = "Use two fingers to zoom";
   const Map$1 = compat.forwardRef(
     ({ config, inModalState = false, onLoad, children }, ref) => {
-      const { layers } = children;
       const targetRef = hooks.useRef();
-      const [map, setMap] = hooks.useState();
+      const [map, setMap] = hooks.useState(
+        /** @type {_Map | null} */
+        null
+      );
       const [zoomHelpText, setZoomHelpText] = hooks.useState("");
       const [showHelpText, setShowHelpText] = hooks.useState(false);
       hooks.useEffect(() => {
         var _a;
         const map2 = new Map$2({
-          view: new View(config.view),
+          ...config,
           target: targetRef.current
         });
         map2.collaborativeGesturesEnabled = true;
@@ -5921,7 +6028,7 @@
           map2.destroy();
           setMap(null);
         };
-      }, [config.view]);
+      }, [config]);
       hooks.useEffect(() => {
         if (!map) return;
         let timeoutID;
@@ -5951,27 +6058,25 @@
           }
         };
       }, [map, ref, onLoad]);
-      hooks.useEffect(() => {
-        if (map && layers !== map.layers) {
-          map.setLayers(layers);
-        }
-      }, [map, layers]);
       hooks.useEffect(() => {
         if (!map) return;
         map.collaborativeGesturesEnabled = !inModalState;
       }, [map, inModalState]);
-      return /* @__PURE__ */ jsxRuntime.jsx("figure", { ref: targetRef, className: styles$3.mapContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: styles$3.helpTextContainer,
-          style: { opacity: showHelpText ? 1 : 0 },
-          "aria-hidden": true,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$3.helpText, styles$3.desktopHelpText].join(" "), children: zoomHelpText }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$3.helpText, styles$3.mobileHelpText].join(" "), children: mobileHelpText })
-          ]
-        }
-      ) });
+      return /* @__PURE__ */ jsxRuntime.jsxs("figure", { ref: targetRef, className: styles$3.mapContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles$3.helpTextContainer,
+            style: { opacity: showHelpText ? 1 : 0 },
+            "aria-hidden": true,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$3.helpText, styles$3.desktopHelpText].join(" "), children: zoomHelpText }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: [styles$3.helpText, styles$3.mobileHelpText].join(" "), children: mobileHelpText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(MapProvider, { map, children })
+      ] });
     }
   );
   function IconMinus() {
@@ -6075,17 +6180,12 @@
       )
     ] });
   }
-  const Projection = {
-    geoAlbersUKComposite: geoAlbersUk(),
-    geoAlbersEngland: d3Geo.geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54]),
-    geoMercator: d3Geo.geoMercator()
-  };
   class FeatureRenderer {
     constructor() {
       this.drawingFunction = d3Geo.geoPath();
     }
-    setStyle(style) {
-      this.style = style;
+    setStyle(style2) {
+      this.style = style2;
     }
     render(frameState, feature, context) {
       if (!this.style) {
@@ -6096,6 +6196,17 @@
       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);
       }
@@ -6122,12 +6233,12 @@
       this.featureRenderer = new FeatureRenderer();
       this._element = document.createElement("div");
       this._element.className = "gv-text-layer";
-      const style = this._element.style;
-      style.position = "absolute";
-      style.width = "100%";
-      style.height = "100%";
-      style.pointerEvents = "none";
-      style.overflow = "hidden";
+      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;
@@ -6182,20 +6293,20 @@
       return textElement;
     }
     styleTextElement(element, textStyle, position) {
-      const style = element.style;
-      style.position = "absolute";
-      style.transform = `translate(-50%, -50%)`;
-      style.left = position.left;
-      style.top = position.top;
-      style.textAlign = "center";
-      style.whiteSpace = "nowrap";
-      style.fontFamily = textStyle.fontFamily;
-      style.fontSize = textStyle.fontSize;
-      style.fontWeight = textStyle.fontWeight;
-      style.lineHeight = textStyle.lineHeight;
-      style.color = textStyle.color;
-      style.textShadow = textStyle.textShadow;
-      style.padding = `${textPadding.top}px ${textPadding.right}px ${textPadding.bottom}px ${textPadding.left}px`;
+      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`;
     }
     getElementBBox(element, position) {
       if (!element.parentElement) {
@@ -6214,21 +6325,21 @@
     }
     getCollisionBoxElement(bbox) {
       const element = document.createElement("div");
-      const style = element.style;
-      style.position = "absolute";
-      style.left = `${bbox.minX}px`;
-      style.top = `${bbox.minY}px`;
-      style.width = `${bbox.maxX - bbox.minX}px`;
-      style.height = `${bbox.maxY - bbox.minY}px`;
-      style.border = "2px solid black";
+      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(options) {
-      this.stroke = options == null ? void 0 : options.stroke;
-      this.fill = options == null ? void 0 : options.fill;
-      this.text = options == null ? void 0 : options.text;
+    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;
     }
     clone() {
       return new Style({
@@ -6458,20 +6569,60 @@
     }
   }
   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 });
     }
+    /**
+     * @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]
+     */
     constructor({
       source,
-      style,
+      style: style2,
       minZoom = 0,
       opacity = 1,
       declutter = true,
       drawCollisionBoxes = false
     }) {
       this.source = source;
-      this._style = style;
+      this._style = style2;
       this.minZoom = minZoom;
       this.opacity = opacity;
       this.declutter = declutter;
@@ -6489,8 +6640,8 @@
       });
       return defaultStyle;
     }
-    set style(style) {
-      this._style = style;
+    set style(style2) {
+      this._style = style2;
       this.dispatcher.dispatch(MapEvent.CHANGE);
     }
     getExtent() {
@@ -6505,10 +6656,10 @@
       return extent;
     }
     getStyleFunction() {
-      const style = this.style;
-      if (typeof style === "function") return style;
+      const style2 = this.style;
+      if (typeof style2 === "function") return style2;
       return () => {
-        return style;
+        return style2;
       };
     }
     renderFrame(frameState, targetElement) {
@@ -6576,27 +6727,58 @@
     createContainer() {
       const container2 = document.createElement("div");
       container2.className = "gv-map-layer";
-      let style = container2.style;
-      style.position = "absolute";
-      style.width = "100%";
-      style.height = "100%";
+      let style2 = container2.style;
+      style2.position = "absolute";
+      style2.width = "100%";
+      style2.height = "100%";
       const canvas = document.createElement("canvas");
-      style = canvas.style;
-      style.position = "absolute";
-      style.width = "100%";
-      style.height = "100%";
+      style2 = canvas.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,
+      style: style2,
       minZoom = 0,
       opacity = 1,
       hitDetectionEnabled = true
@@ -6604,7 +6786,7 @@
       this.dispatcher = new Dispatcher(this);
       this.renderer = new VectorLayerRenderer(this);
       this.source = source;
-      this._style = style;
+      this._style = style2;
       this.minZoom = minZoom;
       this.opacity = opacity;
       this.hitDetectionEnabled = hitDetectionEnabled;
@@ -6635,15 +6817,15 @@
       });
       return defaultStyle;
     }
-    set style(style) {
-      this._style = style;
+    set style(style2) {
+      this._style = style2;
       this.dispatcher.dispatch(MapEvent.CHANGE);
     }
     getStyleFunction() {
-      const style = this.style;
-      if (typeof style === "function") return style;
+      const style2 = this.style;
+      if (typeof style2 === "function") return style2;
       return () => {
-        return style;
+        return style2;
       };
     }
     getExtent() {
@@ -6751,7 +6933,7 @@
               break;
           }
         }
-        feature.setGeometries(geometries);
+        feature.setGeometry(geometries);
         features.push(feature);
       }
       return features;
@@ -6815,23 +6997,32 @@
     };
   }
   class Feature {
-    constructor({ id: id2, geometries, properties, style }) {
+    /**
+     * 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 = style;
+      this.style = style2;
       this.uid = createUid();
     }
     getExtent() {
       if (this._extent) return this._extent;
-      const extent = this.geometries.reduce((combinedExtent, geometry) => {
-        if (!combinedExtent) return geometry.extent;
-        return combineExtents(geometry.extent, combinedExtent);
+      const extent = this.geometries.reduce((combinedExtent, geometries) => {
+        if (!combinedExtent) return geometries.extent;
+        return combineExtents(geometries.extent, combinedExtent);
       }, null);
       this._extent = extent;
       return extent;
     }
-    setGeometries(geometries) {
+    setgeometries(geometries) {
       this.geometries = geometries;
       this._extent = void 0;
     }
@@ -6841,19 +7032,19 @@
       );
     }
     getStyleFunction() {
-      const style = this.style;
-      if (!style) return null;
-      if (typeof style === "function") return style;
+      const style2 = this.style;
+      if (!style2) return null;
+      if (typeof style2 === "function") return style2;
       return () => {
-        return style;
+        return style2;
       };
     }
     containsCoordinate(coordinate) {
       if (!containsCoordinate(this.getExtent(), coordinate)) {
         return false;
       }
-      for (const geometry of this.geometries) {
-        if (d3Geo.geoContains(geometry.getGeoJSON(), coordinate)) {
+      for (const geometries of this.geometries) {
+        if (d3Geo.geoContains(geometries.getGeoJSON(), coordinate)) {
           return true;
         }
       }
@@ -6867,14 +7058,83 @@
         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");
+    }
   }
-  class LineString {
-    constructor({ type = "LineString", extent, coordinates }) {
+  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);
     }
+    /**
+     * 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");
+    }
+    /**
+     * Returns the geometry as a GeoJSON object
+     * @returns {Object} The GeoJSON representation of the geometry
+     */
+    getGeoJSON() {
+      return {
+        type: this.type,
+        coordinates: this.coordinates
+      };
+    }
+  }
+  class LineString extends Geometry {
+    constructor({ type = "LineString", extent, coordinates }) {
+      super({ type, extent, coordinates });
+    }
     _getProjected(projection) {
       const projected = [];
       for (const point of this.coordinates) {
@@ -6886,23 +7146,26 @@
       };
     }
   }
-  class Polygon {
+  class Polygon extends Geometry {
     constructor({ type = "Polygon", extent, coordinates }) {
-      this.type = type;
-      this.extent = extent;
-      this.coordinates = coordinates;
-      this.getProjected = memoise(this._getProjected).bind(this);
+      super({ type, extent, coordinates });
     }
-    // eslint-disable-next-line no-unused-vars
-    _getProjected(projection, _revision) {
+    _getProjected(projection) {
       const projected = [];
       const rings = this.coordinates;
       for (const ring of rings) {
         const projectedRing = [];
         for (const point of ring) {
-          projectedRing.push(projection(point));
+          const projectedPoint = projection(point);
+          if (projectedPoint) {
+            projectedRing.push(projectedPoint);
+          } else {
+            break;
+          }
+        }
+        if (projectedRing.length > 0) {
+          projected.push(projectedRing);
         }
-        projected.push(projectedRing);
       }
       return {
         type: this.type,
@@ -6918,12 +7181,6 @@
     setCoordinates(coordinates) {
       this.coordinates = coordinates;
     }
-    getGeoJSON() {
-      return {
-        type: this.type,
-        coordinates: this.coordinates
-      };
-    }
     clone() {
       return new Polygon({
         extent: this.extent,
@@ -6931,12 +7188,10 @@
       });
     }
   }
-  class Point {
+  class Point extends Geometry {
     constructor({ type = "Point", coordinates }) {
-      this.type = type;
+      super({ type, extent: null, coordinates });
       this.extent = [...coordinates, ...coordinates];
-      this.coordinates = coordinates;
-      this.getProjected = memoise(this._getProjected).bind(this);
     }
     _getProjected(projection) {
       return {
@@ -7458,6 +7713,7 @@
   }
   exports2.AdSlot = AdSlot;
   exports2.ArrowButton = ArrowButton;
+  exports2.AspectRatioBox = AspectRatioBox;
   exports2.Button = Button;
   exports2.ChangeBar = ChangeBar;
   exports2.Chevron = Chevron;