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

package/dist/interactive-component-library.js

@@ -3,9 +3,9 @@ import { useRef, useMemo, useId, useState, useLayoutEffect, useEffect, useCallba
 import { forwardRef, createPortal } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
 import { toChildArray, createElement, cloneElement, createContext } from "preact";
-import { geoStream, geoAlbers, geoPath, geoContains, geoMercator } from "d3-geo";
-import { zoomIdentity, zoom, ZoomTransform } from "d3-zoom";
-import { namespace, matcher, selector, selectorAll, selection, style, select } from "d3-selection";
+import { geoStream, geoAlbers, geoPath, geoContains, geoMercator, geoIdentity, geoAlbersUsa } from "d3-geo";
+import { zoomIdentity, ZoomTransform, zoom } from "d3-zoom";
+import { namespace, matcher, selector, selectorAll, selection, style as style$1, select } from "d3-selection";
 const svg$9 = "_svg_b5io0_1";
 const group = "_group_b5io0_5";
 const rotated = "_rotated_b5io0_10";
@@ -331,9 +331,9 @@ function StackedBar({
     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,
@@ -497,25 +497,27 @@ const defaultStyles$r = {
   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__ */ 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__ */ 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
         }
       )
     }
@@ -1143,6 +1145,19 @@ function AdSlot({ name: name2, sizeMapping, styles: styles2 }) {
     }
   ) });
 }
+const style = {
+  "aspect-ratio-box": "_aspect-ratio-box_1e5oy_1"
+};
+function AspectRatioBox({ heightAsProportionOfWidth, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style["aspect-ratio-box"],
+      style: { "--aspect-ratio": heightAsProportionOfWidth },
+      children: /* @__PURE__ */ jsx("div", { style: { position: "absolute", width: "100%", height: "100%" }, children })
+    }
+  );
+}
 const sortAscending = (accessor) => {
   return (a, b) => {
     const valueA = a[accessor];
@@ -2736,7 +2751,7 @@ function bboxFeature$1(bounds) {
   };
   return feature;
 }
-const MapContext = createContext();
+const MapContext$1 = createContext();
 function SVGMapProvider({
   id: id2,
   mapRef,
@@ -2815,20 +2830,20 @@ function SVGMapProvider({
     findFeatureAtPoint
   };
   mapRef.current = context;
-  return /* @__PURE__ */ jsx(MapContext.Provider, { value: context, children });
+  return /* @__PURE__ */ jsx(MapContext$1.Provider, { value: context, children });
 }
 const path = "_path_1cwd5_9";
 const defaultStyles$1 = {
   path
 };
 function CompositionBorders({ styles: styles2 }) {
-  const context = useContext(MapContext);
+  const context = useContext(MapContext$1);
   const { projection } = context;
   styles2 = mergeStyles(defaultStyles$1, styles2);
   return /* @__PURE__ */ jsx("path", { className: styles2.path, d: projection.getCompositionBorders() });
 }
 function SVGRenderer({ children }) {
-  const { id: id2, config, size, selectedFeature, padding } = useContext(MapContext);
+  const { id: id2, config, size, selectedFeature, padding } = useContext(MapContext$1);
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -3266,7 +3281,7 @@ function Polygon$1({
   zIndex = 0,
   styles: styles2
 }) {
-  const context = useContext(MapContext);
+  const context = useContext(MapContext$1);
   const [searchIndex, setSearchIndex] = useState();
   useEffect(() => {
     if (!context.path) return;
@@ -3324,7 +3339,7 @@ function Polygon$1({
   }) });
 }
 function Line({ id: id2, features, stroke = null, strokeWidth = 1, styles: styles2 }) {
-  const context = useContext(MapContext);
+  const context = useContext(MapContext$1);
   const draw = (ctx, path2) => {
     for (const feature of features) {
       ctx.beginPath();
@@ -3365,7 +3380,7 @@ function Line({ id: id2, features, stroke = null, strokeWidth = 1, styles: style
   }) });
 }
 function Prerendered({ url }) {
-  const context = useContext(MapContext);
+  const context = useContext(MapContext$1);
   const { width, height } = context.contentSize;
   return /* @__PURE__ */ jsx("image", { width, height, href: url });
 }
@@ -3379,7 +3394,7 @@ function Point$1({
   zIndex = 0,
   styles: styles2
 }) {
-  const context = useContext(MapContext);
+  const context = useContext(MapContext$1);
   useEffect(() => {
     function findFeatureAtPoint(point) {
       for (const [index, feature] of features.entries()) {
@@ -3597,6 +3612,254 @@ function sizeForElement(element) {
   }
   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: geoIdentity(),
+  geoMercator: geoMercator(),
+  geoAlbersUS: geoAlbersUsa().scale(1070).translate([487.5, 305]),
+  geoAlbersUKComposite: geoAlbersUk(),
+  geoAlbersEngland: 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 = 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 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(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) {
@@ -5265,7 +5528,7 @@ function transition_selection() {
 function styleNull(name2, interpolate2) {
   var string00, string10, interpolate0;
   return function() {
-    var string0 = style(this, name2), string1 = (this.style.removeProperty(name2), style(this, name2));
+    var string0 = style$1(this, name2), string1 = (this.style.removeProperty(name2), style$1(this, name2));
     return string0 === string1 ? null : string0 === string00 && string1 === string10 ? interpolate0 : interpolate0 = interpolate2(string00 = string0, string10 = string1);
   };
 }
@@ -5277,15 +5540,15 @@ function styleRemove(name2) {
 function styleConstant(name2, interpolate2, value1) {
   var string00, string1 = value1 + "", interpolate0;
   return function() {
-    var string0 = style(this, name2);
+    var string0 = style$1(this, name2);
     return string0 === string1 ? null : string0 === string00 ? interpolate0 : interpolate0 = interpolate2(string00 = string0, value1);
   };
 }
 function styleFunction(name2, interpolate2, value) {
   var string00, string10, interpolate0;
   return function() {
-    var string0 = style(this, name2), value1 = value(this), string1 = value1 + "";
-    if (value1 == null) string1 = value1 = (this.style.removeProperty(name2), style(this, name2));
+    var string0 = style$1(this, name2), value1 = value(this), string1 = value1 + "";
+    if (value1 == null) string1 = value1 = (this.style.removeProperty(name2), style$1(this, name2));
     return string0 === string1 ? null : string0 === string00 && string1 === string10 ? interpolate0 : (string10 = string1, interpolate0 = interpolate2(string00 = string0, value1));
   };
 }
@@ -5476,18 +5739,19 @@ function selection_transition(name2) {
 selection.prototype.interrupt = selection_interrupt;
 selection.prototype.transition = selection_transition;
 let Map$2 = class Map2 {
-  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);
@@ -5497,7 +5761,7 @@ let Map$2 = class Map2 {
     });
     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);
       }
     });
@@ -5520,6 +5784,10 @@ let Map$2 = class Map2 {
     return this._isTransitioning;
   }
   /** PUBLIC METHODS */
+  collaborativeGesturesEnabled(enabled) {
+    if (enabled === void 0) return this._collaborativeGesturesEnabled;
+    this._collaborativeGesturesEnabled = enabled;
+  }
   onFilterEvent(callback) {
     this._filterEventCallback = callback;
   }
@@ -5595,6 +5863,18 @@ let Map$2 = class Map2 {
     );
     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);
   }
@@ -5691,201 +5971,13 @@ let Map$2 = class Map2 {
   _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 = 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(zoomIdentity, this.projection);
-      this.initialResolution = resolutionForExtent(initialExtent, size);
-    }
-  }
-  get viewPortSize() {
-    return this._viewPortSize;
-  }
-  set transform(transform) {
-    this._transform = transform;
-  }
-  get transform() {
-    return new 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";
@@ -5898,18 +5990,33 @@ const styles$3 = {
   desktopHelpText,
   mobileHelpText: mobileHelpText$1
 };
+const MapContext = createContext(null);
+function MapProvider({ map, children }) {
+  const registeredLayers = [];
+  const registerLayer = (layer) => {
+    registeredLayers.push(layer);
+  };
+  useEffect(() => {
+    if (map && !map.hasLayers(registeredLayers)) {
+      map.setLayers(registeredLayers);
+    }
+  }, [map, children]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: { registerLayer }, children });
+}
 const mobileHelpText = "Use two fingers to zoom";
 const Map$1 = forwardRef(
   ({ config, inModalState = false, onLoad, children }, ref) => {
-    const { layers } = children;
     const targetRef = useRef();
-    const [map, setMap] = useState();
+    const [map, setMap] = useState(
+      /** @type {_Map | null} */
+      null
+    );
     const [zoomHelpText, setZoomHelpText] = useState("");
     const [showHelpText, setShowHelpText] = useState(false);
     useEffect(() => {
       var _a;
       const map2 = new Map$2({
-        view: new View(config.view),
+        ...config,
         target: targetRef.current
       });
       map2.collaborativeGesturesEnabled = true;
@@ -5925,7 +6032,7 @@ const Map$1 = forwardRef(
         map2.destroy();
         setMap(null);
       };
-    }, [config.view]);
+    }, [config]);
     useEffect(() => {
       if (!map) return;
       let timeoutID;
@@ -5955,27 +6062,25 @@ const Map$1 = forwardRef(
         }
       };
     }, [map, ref, onLoad]);
-    useEffect(() => {
-      if (map && layers !== map.layers) {
-        map.setLayers(layers);
-      }
-    }, [map, layers]);
     useEffect(() => {
       if (!map) return;
       map.collaborativeGesturesEnabled = !inModalState;
     }, [map, inModalState]);
-    return /* @__PURE__ */ jsx("figure", { ref: targetRef, className: styles$3.mapContainer, children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: styles$3.helpTextContainer,
-        style: { opacity: showHelpText ? 1 : 0 },
-        "aria-hidden": true,
-        children: [
-          /* @__PURE__ */ jsx("p", { className: [styles$3.helpText, styles$3.desktopHelpText].join(" "), children: zoomHelpText }),
-          /* @__PURE__ */ jsx("p", { className: [styles$3.helpText, styles$3.mobileHelpText].join(" "), children: mobileHelpText })
-        ]
-      }
-    ) });
+    return /* @__PURE__ */ jsxs("figure", { ref: targetRef, className: styles$3.mapContainer, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$3.helpTextContainer,
+          style: { opacity: showHelpText ? 1 : 0 },
+          "aria-hidden": true,
+          children: [
+            /* @__PURE__ */ jsx("p", { className: [styles$3.helpText, styles$3.desktopHelpText].join(" "), children: zoomHelpText }),
+            /* @__PURE__ */ jsx("p", { className: [styles$3.helpText, styles$3.mobileHelpText].join(" "), children: mobileHelpText })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(MapProvider, { map, children })
+    ] });
   }
 );
 function IconMinus() {
@@ -6079,11 +6184,6 @@ function ZoomControl({ resetEnabled, onZoomIn, onZoomOut, onReset }) {
     )
   ] });
 }
-const Projection = {
-  geoAlbersUKComposite: geoAlbersUk(),
-  geoAlbersEngland: geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54]),
-  geoMercator: geoMercator()
-};
 class FeatureRenderer {
   constructor() {
     this.drawingFunction = geoPath();
@@ -6100,6 +6200,17 @@ class FeatureRenderer {
     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);
     }
@@ -6229,10 +6340,10 @@ class TextLayerRenderer {
   }
 }
 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({
@@ -6462,10 +6573,50 @@ class VectorSource {
   }
 }
 class TextLayer {
+  /** @param {TextLayerComponentProps} props */
+  static Component({
+    features,
+    style: style2,
+    minZoom,
+    opacity,
+    declutter,
+    drawCollisionBoxes
+  }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => TextLayer.with(features, {
+        style: style2,
+        minZoom,
+        opacity,
+        declutter,
+        drawCollisionBoxes
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [features, minZoom, opacity, declutter, drawCollisionBoxes]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style2;
+    }, [style2]);
+    return null;
+  }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   * @param {TextLayerOptions} options
+   */
   static with(features, options) {
     const source = new VectorSource({ features });
     return new TextLayer({ source, ...options });
   }
+  /**
+   * @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: style2,
@@ -6594,10 +6745,41 @@ class VectorLayerRenderer {
   }
 }
 class VectorLayer {
+  /** @param {VectorLayerComponentProps} props */
+  static Component({ features, style: style2, minZoom, opacity, hitDetectionEnabled }) {
+    const { registerLayer } = useContext(MapContext);
+    const layer = useMemo(
+      () => VectorLayer.with(features, {
+        style: style2,
+        minZoom,
+        opacity,
+        hitDetectionEnabled
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [features, minZoom, opacity, hitDetectionEnabled]
+    );
+    registerLayer(layer);
+    useEffect(() => {
+      layer.style = style2;
+    }, [style2]);
+    return null;
+  }
+  /**
+   * @param {import("../Feature").Feature[]} features
+   * @param {VectorLayerOptions} options
+   */
   static with(features, options) {
     const source = new VectorSource({ features });
     return new VectorLayer({ source, ...options });
   }
+  /**
+   * @param {Object} params
+   * @param {VectorSource} params.source
+   * @param {Style | (() => Style)} [params.style=undefined]
+   * @param {number} [params.minZoom=0]
+   * @param {number} [params.opacity=1]
+   * @param {boolean} [params.hitDetectionEnabled=false]
+   */
   constructor({
     source,
     style: style2,
@@ -6755,7 +6937,7 @@ function interpolateFeatures(currentFeatures, newFeatures, { interpolate: interp
             break;
         }
       }
-      feature.setGeometries(geometries);
+      feature.setGeometry(geometries);
       features.push(feature);
     }
     return features;
@@ -6819,6 +7001,15 @@ function interpolateStroke(strokeA, strokeB, interpolateColors, interpolateNumbe
   };
 }
 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;
@@ -6828,14 +7019,14 @@ class Feature {
   }
   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;
   }
@@ -6856,8 +7047,8 @@ class Feature {
     if (!containsCoordinate(this.getExtent(), coordinate)) {
       return false;
     }
-    for (const geometry of this.geometries) {
-      if (geoContains(geometry.getGeoJSON(), coordinate)) {
+    for (const geometries of this.geometries) {
+      if (geoContains(geometries.getGeoJSON(), coordinate)) {
         return true;
       }
     }
@@ -6871,14 +7062,83 @@ class Feature {
       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) {
@@ -6890,23 +7150,26 @@ class LineString {
     };
   }
 }
-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,
@@ -6922,12 +7185,6 @@ class Polygon {
   setCoordinates(coordinates) {
     this.coordinates = coordinates;
   }
-  getGeoJSON() {
-    return {
-      type: this.type,
-      coordinates: this.coordinates
-    };
-  }
   clone() {
     return new Polygon({
       extent: this.extent,
@@ -6935,12 +7192,10 @@ class Polygon {
     });
   }
 }
-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 {
@@ -7463,6 +7718,7 @@ function useTouchOrHover() {
 export {
   AdSlot,
   ArrowButton,
+  AspectRatioBox,
   Button,
   ChangeBar,
   Chevron,