From e8f3e818e7197d21d60fe4402d5087400ad3c523 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 22 Jul 2024 11:04:47 -0400
Subject: [PATCH 01/10] CDC #248 - Fixing a bug with GeoJsonLayer component and
 map styles

---
 .../geospatial/src/components/GeoJsonLayer.js | 59 +++++++------------
 packages/geospatial/src/utils/MapStyles.js    | 47 ++++++---------
 2 files changed, 41 insertions(+), 65 deletions(-)

diff --git a/packages/geospatial/src/components/GeoJsonLayer.js b/packages/geospatial/src/components/GeoJsonLayer.js
index e6c1e4e3..76013f55 100644
--- a/packages/geospatial/src/components/GeoJsonLayer.js
+++ b/packages/geospatial/src/components/GeoJsonLayer.js
@@ -15,43 +15,28 @@ type Props = {
   url?: string
 };
 
-const GeoJsonLayer = (props: Props) => {
-  const [data, setData] = useState(props.data);
-
-  /**
-   * If the data is passed as a URL, fetches the passed URL and sets the response on the state.
-   */
-  useEffect(() => {
-    if (props.url) {
-      fetch(props.url)
-        .then((response) => response.json())
-        .then((json) => setData(json));
-    }
-  }, [props.url]);
-
-  return (
-    <Source
-      data={data}
-      type='geojson'
-    >
-      <Layer
-        filter={['!=', '$type', 'Point']}
-        paint={props.fillStyle}
-        type='fill'
-      />
-      <Layer
-        filter={['!=', '$type', 'Point']}
-        paint={props.lineStyle}
-        type='line'
-      />
-      <Layer
-        filter={['==', '$type', 'Point']}
-        paint={props.pointStyle}
-        type='circle'
-      />
-    </Source>
-  );
-};
+const GeoJsonLayer = (props: Props) => (
+  <Source
+    data={props.data || props.url}
+    type='geojson'
+  >
+    <Layer
+      filter={['!=', '$type', 'Point']}
+      paint={props.fillStyle}
+      type='fill'
+    />
+    <Layer
+      filter={['!=', '$type', 'Point']}
+      paint={props.lineStyle}
+      type='line'
+    />
+    <Layer
+      filter={['==', '$type', 'Point']}
+      paint={props.pointStyle}
+      type='circle'
+    />
+  </Source>
+);
 
 GeoJsonLayer.defaultProps = {
   fillStyle: MapStyles.fill,
diff --git a/packages/geospatial/src/utils/MapStyles.js b/packages/geospatial/src/utils/MapStyles.js
index 0ad47a7d..9d044069 100644
--- a/packages/geospatial/src/utils/MapStyles.js
+++ b/packages/geospatial/src/utils/MapStyles.js
@@ -1,40 +1,31 @@
 // @flow
 
 const point = {
-  type: 'circle',
-  paint: {
-    'circle-radius': [
-      'interpolate',
-      ['linear'],
-      ['number', ['get', 'point_count'], 1],
-      0, 4,
-      10, 14
-    ],
-    'circle-stroke-width': 1,
-    'circle-color': [
-      'case',
-      ['boolean', ['feature-state', 'hover'], false],
-      '#3b62ff',
-      '#ff623b'
-    ],
-    'circle-stroke-color': '#8d260c'
-  }
+  'circle-radius': [
+    'interpolate',
+    ['linear'],
+    ['number', ['get', 'point_count'], 1],
+    0, 4,
+    10, 14
+  ],
+  'circle-stroke-width': 1,
+  'circle-color': [
+    'case',
+    ['boolean', ['feature-state', 'hover'], false],
+    '#3b62ff',
+    '#ff623b'
+  ],
+  'circle-stroke-color': '#8d260c'
 };
 
 const fill = {
-  type: 'fill',
-  paint: {
-    'fill-color': '#ff623b',
-    'fill-opacity': 0.2
-  }
+  'fill-color': '#ff623b',
+  'fill-opacity': 0.2
 };
 
 const stroke = {
-  type: 'line',
-  paint: {
-    'line-color': '#ff623b',
-    'line-opacity': 0.6
-  }
+  'line-color': '#ff623b',
+  'line-opacity': 0.6
 };
 
 export default {

From 3ce619c23e7b3a502c901ef23f10c672441d31c3 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 22 Jul 2024 11:07:44 -0400
Subject: [PATCH 02/10] CDC #248 - Adding WarpedImageLayer component and
 stories; Updating OverlayLayers component to include "georeference" layer
 type

---
 .../core-data/src/components/OverlayLayers.js |  19 +-
 packages/geospatial/package.json              |   3 +-
 .../src/components/WarpedImageLayer.js        |  65 +++++
 packages/geospatial/src/index.js              |   1 +
 .../geospatial/WarpedImageLayer.stories.js    |  44 +++
 yarn.lock                                     | 264 +++++++++++++++++-
 6 files changed, 391 insertions(+), 5 deletions(-)
 create mode 100644 packages/geospatial/src/components/WarpedImageLayer.js
 create mode 100644 packages/storybook/src/geospatial/WarpedImageLayer.stories.js

diff --git a/packages/core-data/src/components/OverlayLayers.js b/packages/core-data/src/components/OverlayLayers.js
index 8a0d0a72..8cc0aa8d 100644
--- a/packages/core-data/src/components/OverlayLayers.js
+++ b/packages/core-data/src/components/OverlayLayers.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { MapStyles } from '@performant-software/geospatial';
+import { MapStyles, WarpedImageLayer } from '@performant-software/geospatial';
 import { GeoJSONLayer, RasterLayer } from '@peripleo/maplibre';
 import React from 'react';
 import _ from 'underscore';
@@ -9,7 +9,7 @@ type Layer = {
   /**
    * The type of layer to render.
    */
-  layer_type: 'geojson' | 'raster',
+  layer_type: 'geojson' | 'raster' | 'georeference',
 
   /**
    * (Optional) GeoJSON data to pass to the layer.
@@ -21,6 +21,11 @@ type Layer = {
    */
   name: string,
 
+  /**
+   * (Optional) Layer opacity.
+   */
+  opacity?: number,
+
   /**
    * (Optional) URL that contains the layer. This can be a URL to GeoJSON data or a Raster tile set.
    */
@@ -61,6 +66,16 @@ const OverlayLayer = (props: OverlayLayerProps) => {
     );
   }
 
+  if (overlay.layer_type === 'georeference') {
+    return (
+      <WarpedImageLayer
+        id={overlay.name}
+        opacity={overlay.opacity}
+        url={overlay.url}
+      />
+    );
+  }
+
   return null;
 };
 
diff --git a/packages/geospatial/package.json b/packages/geospatial/package.json
index 52ba623a..446b141b 100644
--- a/packages/geospatial/package.json
+++ b/packages/geospatial/package.json
@@ -18,6 +18,7 @@
     "build": "vite build && flow-copy-source -v src types"
   },
   "dependencies": {
+    "@allmaps/maplibre": "^1.0.0-beta.25",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@maptiler/geocoding-control": "^1.2.2",
     "@turf/turf": "^6.5.0",
@@ -39,4 +40,4 @@
     "react-dom": "^18.2.0",
     "vite": "^5.1.4"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/geospatial/src/components/WarpedImageLayer.js b/packages/geospatial/src/components/WarpedImageLayer.js
new file mode 100644
index 00000000..2c626338
--- /dev/null
+++ b/packages/geospatial/src/components/WarpedImageLayer.js
@@ -0,0 +1,65 @@
+// @flow
+
+import { WarpedMapLayer } from '@allmaps/maplibre';
+import { useLoadedMap } from '@peripleo/maplibre';
+import { useEffect } from 'react';
+
+type Props = {
+  /**
+   * ID of the new layer.
+   */
+  id: string,
+
+  /**
+   * (Optional) IIIF manifest content containing the image and geo-reference annotations.
+   */
+  manifest?: string,
+
+  /**
+   * (Optional) layer opacity.
+   */
+  opacity?: number,
+
+  /**
+   * (Optional) URL to the IIIF manifest.
+   */
+  url?: string
+};
+
+const WarpedImageLayer = (props: Props) => {
+  const map = useLoadedMap();
+
+  /**
+   * Adds the WarpedMapLayer object to the map as a new layer.
+   */
+  useEffect(() => {
+    if (!map) {
+      return undefined;
+    }
+
+    const warpedMapLayer = new WarpedMapLayer(props.id);
+    map.addLayer(warpedMapLayer);
+
+    if (props.url) {
+      warpedMapLayer.addGeoreferenceAnnotationByUrl(props.url);
+    } else if (props.manifest) {
+      warpedMapLayer.addGeoreferenceAnnotation(props.manifest);
+    }
+
+    warpedMapLayer.setOpacity(props.opacity);
+
+    return () => {
+      if (map) {
+        map.removeLayer(props.id);
+      }
+    };
+  }, [map]);
+
+  return null;
+};
+
+WarpedImageLayer.defaultProps = {
+  opacity: 0.5
+};
+
+export default WarpedImageLayer;
diff --git a/packages/geospatial/src/index.js b/packages/geospatial/src/index.js
index 99263ae7..69d2a544 100644
--- a/packages/geospatial/src/index.js
+++ b/packages/geospatial/src/index.js
@@ -9,6 +9,7 @@ export { default as LocationMarkers } from './components/LocationMarkers';
 export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';
+export { default as WarpedImageLayer } from './components/WarpedImageLayer';
 
 // Utils
 export { default as Map } from './utils/Map';
diff --git a/packages/storybook/src/geospatial/WarpedImageLayer.stories.js b/packages/storybook/src/geospatial/WarpedImageLayer.stories.js
new file mode 100644
index 00000000..b34d32a6
--- /dev/null
+++ b/packages/storybook/src/geospatial/WarpedImageLayer.stories.js
@@ -0,0 +1,44 @@
+// @flow
+
+import { Map, Zoom } from '@peripleo/maplibre';
+import { Controls, Peripleo } from '@peripleo/peripleo';
+import React from 'react';
+import WarpedImageLayer from '../../../geospatial/src/components/WarpedImageLayer';
+import Env from '../utils/Environment';
+
+export default {
+  title: 'Components/Geospatial/WarpedImageLayer',
+  component: WarpedImageLayer
+};
+
+const mapTilerKey = Env.getMapTilerKey();
+const mapStyle = `https://api.maptiler.com/maps/basic-v2/style.json?key=${mapTilerKey}`;
+
+export const Default = () => (
+  <Peripleo>
+    <Map
+      defaultBounds={[
+        [-74.123501, 40.679546],
+        [-73.796486, 40.805444]
+      ]}
+      style={mapStyle}
+    >
+      <Controls
+        position='topright'
+      >
+        <Zoom />
+      </Controls>
+      <div
+        style={{
+          width: '100%',
+          height: '500px'
+        }}
+      >
+        <WarpedImageLayer
+          id='nyc'
+          url='https://annotations.allmaps.org/images/d180902cb93d5bf2'
+        />
+      </div>
+    </Map>
+  </Peripleo>
+);
diff --git a/yarn.lock b/yarn.lock
index 77a9da22..de80ee6d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,6 +12,91 @@
   resolved "https://registry.yarnpkg.com/@algolia/events/-/events-4.0.1.tgz#fd39e7477e7bc703d7f893b556f676c032af3950"
   integrity sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==
 
+"@allmaps/annotation@^1.0.0-beta.27":
+  version "1.0.0-beta.27"
+  resolved "https://registry.yarnpkg.com/@allmaps/annotation/-/annotation-1.0.0-beta.27.tgz#306d8b019a500ca69eb45033021643b83144c1fb"
+  integrity sha512-Dwe8zBoknN5KoQo+sUxvTMh7c3H0qnyVgEo8X9Qz0MyBHz7pm943r91ePgz4y9c78GpEm8EAPPR2vJo6kQxnww==
+  dependencies:
+    zod "^3.22.4"
+
+"@allmaps/id@^1.0.0-beta.27":
+  version "1.0.0-beta.27"
+  resolved "https://registry.yarnpkg.com/@allmaps/id/-/id-1.0.0-beta.27.tgz#6f4c5d4dbcf6756cd05aff4d1f154d9937a46f74"
+  integrity sha512-SAJPXHwrAbNIzjfHHJWGNox6KN3JcxWt5rRWmOFlDyq/MEyPIEMjGhpMGv5YLjou0kC9VMAYqQyOGXXns/jMFw==
+  dependencies:
+    "@allmaps/types" "^1.0.0-beta.13"
+
+"@allmaps/iiif-parser@^1.0.0-beta.37":
+  version "1.0.0-beta.37"
+  resolved "https://registry.yarnpkg.com/@allmaps/iiif-parser/-/iiif-parser-1.0.0-beta.37.tgz#8dad806f3a85ee2270f886c250c20e7ce8513a5d"
+  integrity sha512-za7zI0P4qLpO+JsOxHrRdQuamfm6WUYv/5G/0wMX/0QdTHfymLNO27biNdy2UIY43gbw1XmeVlp6HD0JhZoc1g==
+  dependencies:
+    "@allmaps/types" "^1.0.0-beta.13"
+    zod "^3.22.4"
+
+"@allmaps/maplibre@^1.0.0-beta.25":
+  version "1.0.0-beta.25"
+  resolved "https://registry.yarnpkg.com/@allmaps/maplibre/-/maplibre-1.0.0-beta.25.tgz#27bed5b104ea5c289cdce0d996e90aef66a3de1c"
+  integrity sha512-tgLqSejae6NtorZlcV2Lkr9xl2rxHz9j1vii1K2kEqWHW93UOjkeb4v6EqUUb++8LxP/SWMr9T2usxBQYHe/vA==
+  dependencies:
+    "@allmaps/render" "^1.0.0-beta.63"
+    "@allmaps/stdlib" "^1.0.0-beta.28"
+    maplibre-gl "^4.0.0"
+
+"@allmaps/render@^1.0.0-beta.63":
+  version "1.0.0-beta.63"
+  resolved "https://registry.yarnpkg.com/@allmaps/render/-/render-1.0.0-beta.63.tgz#4d3de6f1621b598c4c4c08bc76b56f3aa3713ccf"
+  integrity sha512-r9xf4yxXEfyOC8nSvYUyf4fqsN0TtWrJs/d/Oj7+fhKMP3qxJBqS36ldKUh/wNuZHe1sJWpIt/4GuxiYTV3E2w==
+  dependencies:
+    "@allmaps/annotation" "^1.0.0-beta.27"
+    "@allmaps/id" "^1.0.0-beta.27"
+    "@allmaps/iiif-parser" "^1.0.0-beta.37"
+    "@allmaps/stdlib" "^1.0.0-beta.28"
+    "@allmaps/transform" "^1.0.0-beta.38"
+    "@allmaps/triangulate" "^1.0.0-beta.20"
+    "@allmaps/types" "^1.0.0-beta.13"
+    "@turf/boolean-point-in-polygon" "^6.5.0"
+    lodash-es "^4.17.21"
+    potpack "^2.0.0"
+    rbush "^3.0.1"
+    robust-point-in-polygon "^1.0.3"
+
+"@allmaps/stdlib@^1.0.0-beta.28":
+  version "1.0.0-beta.28"
+  resolved "https://registry.yarnpkg.com/@allmaps/stdlib/-/stdlib-1.0.0-beta.28.tgz#38e7199d3a7accfeb3eb371496a0453bf0851cf7"
+  integrity sha512-Ss200J31nvHvVMp+Ri6efTzd+ZbRkE1PgiVsTqru4ZD+af7yTDMf5wp/P5dhLo/eZVieKFM4dXNZAwGz3LnqvQ==
+  dependencies:
+    "@allmaps/annotation" "^1.0.0-beta.27"
+    "@allmaps/iiif-parser" "^1.0.0-beta.37"
+    "@allmaps/types" "^1.0.0-beta.13"
+    "@placemarkio/geojson-rewind" "^1.0.2"
+    svg-parser "^2.0.4"
+
+"@allmaps/transform@^1.0.0-beta.38":
+  version "1.0.0-beta.38"
+  resolved "https://registry.yarnpkg.com/@allmaps/transform/-/transform-1.0.0-beta.38.tgz#7919ca2559c88dd33144c3b5459c5e194e7998bb"
+  integrity sha512-HHYsFpnsXqarpWUo2WDqlEANj13N+jyNG46nEajYq/+LUpOuEwr5inkCKjsRWbZpUPBKkmwOOqW3YTtg8f6u4A==
+  dependencies:
+    "@allmaps/stdlib" "^1.0.0-beta.28"
+    "@turf/distance" "^6.3.0"
+    "@turf/midpoint" "^6.3.0"
+    ml-matrix "^6.11.0"
+
+"@allmaps/triangulate@^1.0.0-beta.20":
+  version "1.0.0-beta.20"
+  resolved "https://registry.yarnpkg.com/@allmaps/triangulate/-/triangulate-1.0.0-beta.20.tgz#0e9d692fbc9b585111ea9f359157df99ca39dd70"
+  integrity sha512-f4l9C595XbrG9VK7k6l50vCOZ+vVebv0Ld2og4mHHfYXVMj59w9gnwAdUIZUy511wTY3ySDEsJVMxKYDRMQf7g==
+  dependencies:
+    "@allmaps/stdlib" "^1.0.0-beta.28"
+    "@allmaps/types" "^1.0.0-beta.13"
+    poly2tri "^1.5.0"
+    robust-point-in-polygon "^1.0.3"
+
+"@allmaps/types@^1.0.0-beta.13":
+  version "1.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/@allmaps/types/-/types-1.0.0-beta.13.tgz#a57ffa406673976980ecfca0dc79d58ecb44e93d"
+  integrity sha512-X/OPatNULf8c7Dnq90Wq6Kg6xaRaq+DbF0CFO/JkoQxMjH30OqGmNvAIPhtqLqdTvhO7XWzpkoFsXRqCuKNoNg==
+
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
@@ -2076,6 +2161,20 @@
     rw "^1.3.3"
     sort-object "^3.0.3"
 
+"@maplibre/maplibre-gl-style-spec@^20.3.0":
+  version "20.3.0"
+  resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.3.0.tgz#7ab199c26a737dbc63e99e43e91eb05c51d83a1b"
+  integrity sha512-eSiQ3E5LUSxAOY9ABXGyfNhout2iEa6mUxKeaQ9nJ8NL1NuaQYU7zKqzx/LEYcXe1neT4uYAgM1wYZj3fTSXtA==
+  dependencies:
+    "@mapbox/jsonlint-lines-primitives" "~2.0.2"
+    "@mapbox/unitbezier" "^0.0.1"
+    json-stringify-pretty-compact "^4.0.0"
+    minimist "^1.2.8"
+    quickselect "^2.0.0"
+    rw "^1.3.3"
+    sort-object "^3.0.3"
+    tinyqueue "^2.0.3"
+
 "@maptiler/geocoding-control@^1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@maptiler/geocoding-control/-/geocoding-control-1.2.2.tgz#319b1b2abaa2b4de6cc91e1a2990e58b18557960"
@@ -2166,6 +2265,11 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
+"@placemarkio/geojson-rewind@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@placemarkio/geojson-rewind/-/geojson-rewind-1.0.2.tgz#1eba1ce519ba796d1e46c22140dc6ea5157e5ac3"
+  integrity sha512-ulBdZOCvKlUIe9v+/PDVfe4wDvfkJRzRXstGEHbAJGiUN8IDYw3wD3156DcN/rO9DiHfjcF8KUQlQ7iiMd+rrA==
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.11":
   version "0.5.11"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.11.tgz#7c2268cedaa0644d677e8c4f377bc8fb304f714a"
@@ -4330,7 +4434,7 @@
     "@turf/invariant" "^6.5.0"
     "@turf/meta" "^6.5.0"
 
-"@turf/distance@^6.5.0":
+"@turf/distance@^6.3.0", "@turf/distance@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/distance/-/distance-6.5.0.tgz#21f04d5f86e864d54e2abde16f35c15b4f36149a"
   integrity sha512-xzykSLfoURec5qvQJcfifw/1mJa+5UwByZZ5TZ8iaqjGYN0vomhV9aiSLeYdUGtYRESZ+DYC/OzY+4RclZYgMg==
@@ -4601,7 +4705,7 @@
   dependencies:
     "@turf/helpers" "^6.5.0"
 
-"@turf/midpoint@^6.5.0":
+"@turf/midpoint@^6.3.0", "@turf/midpoint@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@turf/midpoint/-/midpoint-6.5.0.tgz#5f9428959309feccaf3f55873a8de70d4121bdce"
   integrity sha512-MyTzV44IwmVI6ec9fB2OgZ53JGNlgOpaYl9ArKoF49rXpL84F9rNATndbe0+MQIhdkw8IlzA6xVP4lZzfMNVCw==
@@ -5293,6 +5397,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/geojson-vt@3.2.5":
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/@types/geojson-vt/-/geojson-vt-3.2.5.tgz#b6c356874991d9ab4207533476dfbcdb21e38408"
+  integrity sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==
+  dependencies:
+    "@types/geojson" "*"
+
 "@types/geojson@*", "@types/geojson@^7946.0.13", "@types/geojson@^7946.0.7", "@types/geojson@^7946.0.8":
   version "7946.0.13"
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.13.tgz#e6e77ea9ecf36564980a861e24e62a095988775e"
@@ -5303,6 +5414,11 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca"
   integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==
 
+"@types/geojson@^7946.0.14":
+  version "7946.0.14"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
+  integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
+
 "@types/glob@^7.1.1", "@types/glob@^7.1.3":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -5394,6 +5510,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/junit-report-builder@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/junit-report-builder/-/junit-report-builder-3.0.2.tgz#17cc131d14ceff59dcf14e5847bd971b96f2cbe0"
+  integrity sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==
+
 "@types/lodash@^4.14.167", "@types/lodash@^4.14.172":
   version "4.14.202"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
@@ -9076,6 +9197,11 @@ geojson-vt@^3.2.1:
   resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-3.2.1.tgz#f8adb614d2c1d3f6ee7c4265cad4bbf3ad60c8b7"
   integrity sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==
 
+geojson-vt@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/geojson-vt/-/geojson-vt-4.0.2.tgz#1162f6c7d61a0ba305b1030621e6e111f847828a"
+  integrity sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==
+
 get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -9791,6 +9917,11 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
+is-any-array@^2.0.0, is-any-array@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-any-array/-/is-any-array-2.0.1.tgz#9233242a9c098220290aa2ec28f82ca7fa79899e"
+  integrity sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ==
+
 is-arguments@^1.0.4, is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -10785,6 +10916,11 @@ json-stringify-pretty-compact@^3.0.0:
   resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-3.0.0.tgz#f71ef9d82ef16483a407869556588e91b681d9ab"
   integrity sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==
 
+json-stringify-pretty-compact@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/json-stringify-pretty-compact/-/json-stringify-pretty-compact-4.0.0.tgz#cf4844770bddee3cb89a6170fe4b00eee5dbf1d4"
+  integrity sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==
+
 json5@^1.0.1, json5@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
@@ -11185,6 +11321,39 @@ maplibre-gl@^3.6.2:
     tinyqueue "^2.0.3"
     vt-pbf "^3.1.3"
 
+maplibre-gl@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-4.5.0.tgz#aa5e6e214cb0cd35bc9a9f3c7417cb2092d96c58"
+  integrity sha512-qOS1hn4d/pn2i0uva4S5Oz+fACzTkgBKq+NpwT/Tqzi4MSyzcWNtDELzLUSgWqHfNIkGCl5CZ/w7dtis+t4RCw==
+  dependencies:
+    "@mapbox/geojson-rewind" "^0.5.2"
+    "@mapbox/jsonlint-lines-primitives" "^2.0.2"
+    "@mapbox/point-geometry" "^0.1.0"
+    "@mapbox/tiny-sdf" "^2.0.6"
+    "@mapbox/unitbezier" "^0.0.1"
+    "@mapbox/vector-tile" "^1.3.1"
+    "@mapbox/whoots-js" "^3.1.0"
+    "@maplibre/maplibre-gl-style-spec" "^20.3.0"
+    "@types/geojson" "^7946.0.14"
+    "@types/geojson-vt" "3.2.5"
+    "@types/junit-report-builder" "^3.0.2"
+    "@types/mapbox__point-geometry" "^0.1.4"
+    "@types/mapbox__vector-tile" "^1.3.4"
+    "@types/pbf" "^3.0.5"
+    "@types/supercluster" "^7.1.3"
+    earcut "^2.2.4"
+    geojson-vt "^4.0.2"
+    gl-matrix "^3.4.3"
+    global-prefix "^3.0.0"
+    kdbush "^4.0.2"
+    murmurhash-js "^1.0.0"
+    pbf "^3.2.1"
+    potpack "^2.0.0"
+    quickselect "^2.0.0"
+    supercluster "^8.0.1"
+    tinyqueue "^2.0.3"
+    vt-pbf "^3.1.3"
+
 markdown-to-jsx@^7.1.8:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.4.1.tgz#1ed6a60f8f9cd944bec39d9923fbbc8d3d60dcb9"
@@ -11408,6 +11577,37 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+ml-array-max@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/ml-array-max/-/ml-array-max-1.2.4.tgz#2373e2b7e51c8807e456cc0ef364c5863713623b"
+  integrity sha512-BlEeg80jI0tW6WaPyGxf5Sa4sqvcyY6lbSn5Vcv44lp1I2GR6AWojfUvLnGTNsIXrZ8uqWmo8VcG1WpkI2ONMQ==
+  dependencies:
+    is-any-array "^2.0.0"
+
+ml-array-min@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/ml-array-min/-/ml-array-min-1.2.3.tgz#662f027c400105816b849cc3cd786915d0801495"
+  integrity sha512-VcZ5f3VZ1iihtrGvgfh/q0XlMobG6GQ8FsNyQXD3T+IlstDv85g8kfV0xUG1QPRO/t21aukaJowDzMTc7j5V6Q==
+  dependencies:
+    is-any-array "^2.0.0"
+
+ml-array-rescale@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ml-array-rescale/-/ml-array-rescale-1.3.7.tgz#c4d129320d113a732e62dd963dc1695bba9a5340"
+  integrity sha512-48NGChTouvEo9KBctDfHC3udWnQKNKEWN0ziELvY3KG25GR5cA8K8wNVzracsqSW1QEkAXjTNx+ycgAv06/1mQ==
+  dependencies:
+    is-any-array "^2.0.0"
+    ml-array-max "^1.2.4"
+    ml-array-min "^1.2.3"
+
+ml-matrix@^6.11.0:
+  version "6.11.1"
+  resolved "https://registry.yarnpkg.com/ml-matrix/-/ml-matrix-6.11.1.tgz#fff3e1e7c3ad93dc996fec5d53d9dbc8e0e43473"
+  integrity sha512-Fvp1xF1O07tt6Ux9NcnEQTei5UlqbRpvvaFZGs7l3Ij+nOaEDcmbSVtxwNa8V4IfdyFI1NLNUteroMJ1S6vcEg==
+  dependencies:
+    is-any-array "^2.0.1"
+    ml-array-rescale "^1.3.7"
+
 moment-islamic-civil@ACGC/moment-islamic-civil:
   version "1.0.0"
   resolved "https://codeload.github.com/ACGC/moment-islamic-civil/tar.gz/569fc450b9cdc526d3304d6cafdd6ef41c3273b4"
@@ -12148,6 +12348,11 @@ polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
+poly2tri@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/poly2tri/-/poly2tri-1.5.0.tgz#db8dfb8cf36ddc6066bcc02ab448aa05617cf22c"
+  integrity sha512-5yACqznqRrlFA9RhdWyD2blNPVhlB3qK+iRYJCfHtJGINb+XNBgKTw+pJOsJZ+oaGxFsIyFmOVapuREHnRhXPg==
+
 polygon-clipping@^0.15.3:
   version "0.15.7"
   resolved "https://registry.yarnpkg.com/polygon-clipping/-/polygon-clipping-0.15.7.tgz#3823ca1e372566f350795ce9dd9a7b19e97bdaad"
@@ -13226,6 +13431,23 @@ rimraf@~2.6.2:
   dependencies:
     glob "^7.1.3"
 
+robust-orientation@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/robust-orientation/-/robust-orientation-1.2.1.tgz#f6c2b00a5df5f1cb9597be63a45190f273899361"
+  integrity sha512-FuTptgKwY6iNuU15nrIJDLjXzCChWB+T4AvksRtwPS/WZ3HuP1CElCm1t+OBfgQKfWbtZIawip+61k7+buRKAg==
+  dependencies:
+    robust-scale "^1.0.2"
+    robust-subtract "^1.0.0"
+    robust-sum "^1.0.0"
+    two-product "^1.0.2"
+
+robust-point-in-polygon@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/robust-point-in-polygon/-/robust-point-in-polygon-1.0.3.tgz#ea68f025a44dfe6aede80f0863788705cf547ec4"
+  integrity sha512-pPzz7AevOOcPYnFv4Vs5L0C7BKOq6C/TfAw5EUE58CylbjGiPyMjAnPLzzSuPZ2zftUGwWbmLWPOjPOz61tAcA==
+  dependencies:
+    robust-orientation "^1.0.2"
+
 robust-predicates@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-2.0.4.tgz#0a2367a93abd99676d075981707f29cfb402248b"
@@ -13236,6 +13458,24 @@ robust-predicates@^3.0.2:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
   integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
 
+robust-scale@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/robust-scale/-/robust-scale-1.0.2.tgz#775132ed09542d028e58b2cc79c06290bcf78c32"
+  integrity sha512-jBR91a/vomMAzazwpsPTPeuTPPmWBacwA+WYGNKcRGSh6xweuQ2ZbjRZ4v792/bZOhRKXRiQH0F48AvuajY0tQ==
+  dependencies:
+    two-product "^1.0.2"
+    two-sum "^1.0.0"
+
+robust-subtract@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/robust-subtract/-/robust-subtract-1.0.0.tgz#e0b164e1ed8ba4e3a5dda45a12038348dbed3e9a"
+  integrity sha512-xhKUno+Rl+trmxAIVwjQMiVdpF5llxytozXJOdoT4eTIqmqsndQqFb1A0oiW3sZGlhMRhOi6pAD4MF1YYW6o/A==
+
+robust-sum@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/robust-sum/-/robust-sum-1.0.0.tgz#16646e525292b4d25d82757a286955e0bbfa53d9"
+  integrity sha512-AvLExwpaqUqD1uwLU6MwzzfRdaI6VEZsyvQ3IAQ0ZJ08v1H+DTyqskrf2ZJyh0BDduFVLN7H04Zmc+qTiahhAw==
+
 rollup-plugin-copy@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/rollup-plugin-copy/-/rollup-plugin-copy-3.5.0.tgz#7ffa2a7a8303e143876fa64fb5eed9022d304eeb"
@@ -13997,6 +14237,11 @@ svg-arc-to-cubic-bezier@^3.2.0:
   resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
   integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
 
+svg-parser@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
 swc-loader@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.2.3.tgz#6792f1c2e4c9ae9bf9b933b3e010210e270c186d"
@@ -14326,6 +14571,16 @@ turf-jsts@*:
   resolved "https://registry.yarnpkg.com/turf-jsts/-/turf-jsts-1.2.3.tgz#59757f542afbff9a577bbf411f183b8f48d38aa4"
   integrity sha512-Ja03QIJlPuHt4IQ2FfGex4F4JAr8m3jpaHbFbQrgwr7s7L6U8ocrHiF3J1+wf9jzhGKxvDeaCAnGDot8OjGFyA==
 
+two-product@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/two-product/-/two-product-1.0.2.tgz#67d95d4b257a921e2cb4bd7af9511f9088522eaa"
+  integrity sha512-vOyrqmeYvzjToVM08iU52OFocWT6eB/I5LUWYnxeAPGXAhAxXYU/Yr/R2uY5/5n4bvJQL9AQulIuxpIsMoT8XQ==
+
+two-sum@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/two-sum/-/two-sum-1.0.0.tgz#31d3f32239e4f731eca9df9155e2b297f008ab64"
+  integrity sha512-phP48e8AawgsNUjEY2WvoIWqdie8PoiDZGxTDv70LDr01uX5wLEQbOgSP7Z/B6+SW5oLtbe8qaYX2fKJs3CGTw==
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -15253,6 +15508,11 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
+zod@^3.22.4:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
+
 zotero-api-client@^0.40.0:
   version "0.40.1"
   resolved "https://registry.yarnpkg.com/zotero-api-client/-/zotero-api-client-0.40.1.tgz#56cf5cfb6485fe763a938876192f5b5c5103d255"

From 4dd6f0fc3731d6fa0d72363fb860b112ca10b93d Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 22 Jul 2024 12:26:36 -0400
Subject: [PATCH 03/10] CDC #248 - Creating separate components for
 react-map-gl and @peripleo/maplibre warped layer components

---
 .../core-data/src/components/OverlayLayers.js |  2 +-
 .../geospatial/src/components/LayerMenu.js    |  4 +-
 .../src/components/WarpedImageLayer.js        | 40 ++++++-------
 .../components/WarpedImageLayerPeripleo.js    | 56 +++++++++++++++++++
 packages/geospatial/src/index.js              |  1 +
 packages/geospatial/src/utils/Map.js          | 35 ++++++++++++
 .../geospatial/WarpedImageLayer.stories.js    | 50 ++++++++---------
 .../WarpedImageLayerPeripleo.stories.js       | 44 +++++++++++++++
 yarn.lock                                     |  4 +-
 9 files changed, 185 insertions(+), 51 deletions(-)
 create mode 100644 packages/geospatial/src/components/WarpedImageLayerPeripleo.js
 create mode 100644 packages/storybook/src/geospatial/WarpedImageLayerPeripleo.stories.js

diff --git a/packages/core-data/src/components/OverlayLayers.js b/packages/core-data/src/components/OverlayLayers.js
index 8cc0aa8d..717c197f 100644
--- a/packages/core-data/src/components/OverlayLayers.js
+++ b/packages/core-data/src/components/OverlayLayers.js
@@ -1,6 +1,6 @@
 // @flow
 
-import { MapStyles, WarpedImageLayer } from '@performant-software/geospatial';
+import { MapStyles, WarpedImageLayerPeripleo as WarpedImageLayer } from '@performant-software/geospatial';
 import { GeoJSONLayer, RasterLayer } from '@peripleo/maplibre';
 import React from 'react';
 import _ from 'underscore';
diff --git a/packages/geospatial/src/components/LayerMenu.js b/packages/geospatial/src/components/LayerMenu.js
index 0dc717be..b32e107c 100644
--- a/packages/geospatial/src/components/LayerMenu.js
+++ b/packages/geospatial/src/components/LayerMenu.js
@@ -4,7 +4,8 @@ import React, {
   Children,
   useCallback,
   useEffect,
-  useMemo, useRef,
+  useMemo,
+  useRef,
   useState
 } from 'react';
 import { BsStack } from 'react-icons/bs';
@@ -103,6 +104,7 @@ const LayerMenu = (props: Props) => {
         position={props.position}
       >
         <button
+          aria-label='Toggle Menu'
           className='mapbox-gl-draw_ctrl-draw-btn layer-button'
           onClick={() => setMenuOpen((prevMenuOpen) => !prevMenuOpen)}
           type='button'
diff --git a/packages/geospatial/src/components/WarpedImageLayer.js b/packages/geospatial/src/components/WarpedImageLayer.js
index 2c626338..84aff714 100644
--- a/packages/geospatial/src/components/WarpedImageLayer.js
+++ b/packages/geospatial/src/components/WarpedImageLayer.js
@@ -1,8 +1,8 @@
 // @flow
 
-import { WarpedMapLayer } from '@allmaps/maplibre';
-import { useLoadedMap } from '@peripleo/maplibre';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { useMap } from 'react-map-gl';
+import MapUtils from '../utils/Map';
 
 type Props = {
   /**
@@ -27,33 +27,33 @@ type Props = {
 };
 
 const WarpedImageLayer = (props: Props) => {
-  const map = useLoadedMap();
+  const [loaded, setLoaded] = useState(false);
+
+  const mapRef = useMap();
+
+  useEffect(() => {
+    const instance = mapRef?.current?.getMap();
+    instance.on('load', () => setLoaded(true));
+  }, []);
 
   /**
    * Adds the WarpedMapLayer object to the map as a new layer.
    */
   useEffect(() => {
-    if (!map) {
+    if (!loaded) {
       return undefined;
     }
 
-    const warpedMapLayer = new WarpedMapLayer(props.id);
-    map.addLayer(warpedMapLayer);
-
-    if (props.url) {
-      warpedMapLayer.addGeoreferenceAnnotationByUrl(props.url);
-    } else if (props.manifest) {
-      warpedMapLayer.addGeoreferenceAnnotation(props.manifest);
-    }
+    const map = mapRef.current.getMap();
 
-    warpedMapLayer.setOpacity(props.opacity);
+    MapUtils.addGeoreferenceLayer(map, props.id, {
+      manifest: props.manifest,
+      opacity: props.opacity,
+      url: props.url
+    });
 
-    return () => {
-      if (map) {
-        map.removeLayer(props.id);
-      }
-    };
-  }, [map]);
+    return () => MapUtils.removeLayer(map, props.id);
+  }, [loaded]);
 
   return null;
 };
diff --git a/packages/geospatial/src/components/WarpedImageLayerPeripleo.js b/packages/geospatial/src/components/WarpedImageLayerPeripleo.js
new file mode 100644
index 00000000..d681a0e5
--- /dev/null
+++ b/packages/geospatial/src/components/WarpedImageLayerPeripleo.js
@@ -0,0 +1,56 @@
+// @flow
+
+import { useEffect } from 'react';
+import { useLoadedMap } from '@peripleo/maplibre';
+import MapUtils from '../utils/Map';
+
+type Props = {
+  /**
+   * ID of the new layer.
+   */
+  id: string,
+
+  /**
+   * (Optional) IIIF manifest content containing the image and geo-reference annotations.
+   */
+  manifest?: string,
+
+  /**
+   * (Optional) layer opacity.
+   */
+  opacity?: number,
+
+  /**
+   * (Optional) URL to the IIIF manifest.
+   */
+  url?: string
+};
+
+const WarpedImageLayer = (props: Props) => {
+  const map = useLoadedMap();
+
+  /**
+   * Adds the WarpedMapLayer object to the map as a new layer.
+   */
+  useEffect(() => {
+    if (!map) {
+      return undefined;
+    }
+
+    MapUtils.addGeoreferenceLayer(map, props.id, {
+      manifest: props.manifest,
+      opacity: props.opacity,
+      url: props.url
+    });
+
+    return () => MapUtils.removeLayer(map, props.id);
+  }, [map]);
+
+  return null;
+};
+
+WarpedImageLayer.defaultProps = {
+  opacity: 0.5
+};
+
+export default WarpedImageLayer;
diff --git a/packages/geospatial/src/index.js b/packages/geospatial/src/index.js
index 69d2a544..e6ab844a 100644
--- a/packages/geospatial/src/index.js
+++ b/packages/geospatial/src/index.js
@@ -10,6 +10,7 @@ export { default as MapControl } from './components/MapControl';
 export { default as MapDraw } from './components/MapDraw';
 export { default as RasterLayer } from './components/RasterLayer';
 export { default as WarpedImageLayer } from './components/WarpedImageLayer';
+export { default as WarpedImageLayerPeripleo } from './components/WarpedImageLayerPeripleo';
 
 // Utils
 export { default as Map } from './utils/Map';
diff --git a/packages/geospatial/src/utils/Map.js b/packages/geospatial/src/utils/Map.js
index fda49489..bd039578 100644
--- a/packages/geospatial/src/utils/Map.js
+++ b/packages/geospatial/src/utils/Map.js
@@ -1,5 +1,6 @@
 // @flow
 
+import { WarpedMapLayer } from '@allmaps/maplibre';
 import { bbox, bboxPolygon, buffer } from '@turf/turf';
 import _ from 'underscore';
 
@@ -8,6 +9,28 @@ const MAX_LATITUDE = 90;
 const MIN_LONGITUDE = -180;
 const MAX_LONGITUDE = 180;
 
+/**
+ * Adds the geo-referenced image layer to the passed map.
+ *
+ * @param map
+ * @param layerId
+ * @param options
+ */
+const addGeoreferenceLayer = (map, layerId, options = {}) => {
+  const warpedMapLayer = new WarpedMapLayer(layerId);
+  map.addLayer(warpedMapLayer);
+
+  if (options.url) {
+    warpedMapLayer.addGeoreferenceAnnotationByUrl(options.url);
+  } else if (options.manifest) {
+    warpedMapLayer.addGeoreferenceAnnotation(options.manifest);
+  }
+
+  if (options.opacity) {
+    warpedMapLayer.setOpacity(options.opacity);
+  }
+};
+
 /**
  * Returns a bounding box for the passed geometry (with optional buffer).
  *
@@ -40,6 +63,16 @@ const getBoundingBox = (data, bufferDistance = null) => {
   return bbox(polygonBuffer);
 };
 
+/**
+ * Removes a layer from the passed map.
+ *
+ * @param map
+ * @param layerId
+ *
+ * @returns {*}
+ */
+const removeLayer = (map, layerId) => map && map.removeLayer(layerId);
+
 /**
  * Validates that the passed bounding box contains finite coordinates.
  *
@@ -72,7 +105,9 @@ const validateCoordinates = (coordinates) => {
 };
 
 export default {
+  addGeoreferenceLayer,
   getBoundingBox,
+  removeLayer,
   validateBoundingBox,
   validateCoordinates
 };
diff --git a/packages/storybook/src/geospatial/WarpedImageLayer.stories.js b/packages/storybook/src/geospatial/WarpedImageLayer.stories.js
index b34d32a6..20b20911 100644
--- a/packages/storybook/src/geospatial/WarpedImageLayer.stories.js
+++ b/packages/storybook/src/geospatial/WarpedImageLayer.stories.js
@@ -1,10 +1,10 @@
 // @flow
 
-import { Map, Zoom } from '@peripleo/maplibre';
-import { Controls, Peripleo } from '@peripleo/peripleo';
+import maplibregl from 'maplibre-gl';
 import React from 'react';
-import WarpedImageLayer from '../../../geospatial/src/components/WarpedImageLayer';
+import { Map } from 'react-map-gl';
 import Env from '../utils/Environment';
+import WarpedImageLayer from '../../../geospatial/src/components/WarpedImageLayer';
 
 export default {
   title: 'Components/Geospatial/WarpedImageLayer',
@@ -15,30 +15,26 @@ const mapTilerKey = Env.getMapTilerKey();
 const mapStyle = `https://api.maptiler.com/maps/basic-v2/style.json?key=${mapTilerKey}`;
 
 export const Default = () => (
-  <Peripleo>
-    <Map
-      defaultBounds={[
+  <Map
+    attributionControl={false}
+    initialViewState={{
+      bounds: [
         [-74.123501, 40.679546],
         [-73.796486, 40.805444]
-      ]}
-      style={mapStyle}
-    >
-      <Controls
-        position='topright'
-      >
-        <Zoom />
-      </Controls>
-      <div
-        style={{
-          width: '100%',
-          height: '500px'
-        }}
-      >
-        <WarpedImageLayer
-          id='nyc'
-          url='https://annotations.allmaps.org/images/d180902cb93d5bf2'
-        />
-      </div>
-    </Map>
-  </Peripleo>
+      ]
+    }}
+    mapLib={maplibregl}
+    mapStyle={mapStyle}
+    maxPitch={0}
+    preserveDrawingBuffer
+    style={{
+      height: 500,
+      width: '100%'
+    }}
+  >
+    <WarpedImageLayer
+      id='nyc'
+      url='https://annotations.allmaps.org/images/d180902cb93d5bf2'
+    />
+  </Map>
 );
diff --git a/packages/storybook/src/geospatial/WarpedImageLayerPeripleo.stories.js b/packages/storybook/src/geospatial/WarpedImageLayerPeripleo.stories.js
new file mode 100644
index 00000000..bb148e4f
--- /dev/null
+++ b/packages/storybook/src/geospatial/WarpedImageLayerPeripleo.stories.js
@@ -0,0 +1,44 @@
+// @flow
+
+import { Map as PeripleoMap, Zoom } from '@peripleo/maplibre';
+import { Controls, Peripleo } from '@peripleo/peripleo';
+import React from 'react';
+import Env from '../utils/Environment';
+import WarpedImageLayerPeripleo from '../../../geospatial/src/components/WarpedImageLayerPeripleo';
+
+export default {
+  title: 'Components/Geospatial/WarpedImageLayerPeripleo',
+  component: WarpedImageLayerPeripleo
+};
+
+const mapTilerKey = Env.getMapTilerKey();
+const mapStyle = `https://api.maptiler.com/maps/basic-v2/style.json?key=${mapTilerKey}`;
+
+export const Default = () => (
+  <Peripleo>
+    <PeripleoMap
+      defaultBounds={[
+        [-74.123501, 40.679546],
+        [-73.796486, 40.805444]
+      ]}
+      style={mapStyle}
+    >
+      <Controls
+        position='topright'
+      >
+        <Zoom />
+      </Controls>
+      <div
+        style={{
+          width: '100%',
+          height: '500px'
+        }}
+      >
+        <WarpedImageLayerPeripleo
+          id='nyc'
+          url='https://annotations.allmaps.org/images/d180902cb93d5bf2'
+        />
+      </div>
+    </PeripleoMap>
+  </Peripleo>
+);
diff --git a/yarn.lock b/yarn.lock
index de80ee6d..55b14677 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11321,7 +11321,7 @@ maplibre-gl@^3.6.2:
     tinyqueue "^2.0.3"
     vt-pbf "^3.1.3"
 
-maplibre-gl@^4.0.0:
+maplibre-gl@^4.0.0, maplibre-gl@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-4.5.0.tgz#aa5e6e214cb0cd35bc9a9f3c7417cb2092d96c58"
   integrity sha512-qOS1hn4d/pn2i0uva4S5Oz+fACzTkgBKq+NpwT/Tqzi4MSyzcWNtDELzLUSgWqHfNIkGCl5CZ/w7dtis+t4RCw==
@@ -12977,7 +12977,7 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-map-gl@^7.1.6:
+react-map-gl@^7.1.6, react-map-gl@^7.1.7:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/react-map-gl/-/react-map-gl-7.1.7.tgz#f9b7d76cccad6d0bf1627d1827a0a378696ac1d0"
   integrity sha512-mwjc0obkBJOXCcoXQr3VoLqmqwo9vS4bXfbGsdxXzEgVCv/PM0v+1QggL7W0d/ccIy+VCjbXNlGij+PENz6VNg==

From 7a18df1a801e81cb065ae9591631edc68502618a Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 22 Jul 2024 20:56:43 -0400
Subject: [PATCH 04/10] CDC #248 - Adding check for map loaded in
 WarpedImageLayer component

---
 .../src/components/WarpedImageLayer.js        |  9 ++++-
 packages/storybook/package.json               |  2 ++
 .../src/geospatial/MapDraw.stories.js         | 35 +++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/packages/geospatial/src/components/WarpedImageLayer.js b/packages/geospatial/src/components/WarpedImageLayer.js
index 84aff714..c8d6cd08 100644
--- a/packages/geospatial/src/components/WarpedImageLayer.js
+++ b/packages/geospatial/src/components/WarpedImageLayer.js
@@ -31,9 +31,16 @@ const WarpedImageLayer = (props: Props) => {
 
   const mapRef = useMap();
 
+  /**
+   * Sets the "loaded" attribute on the state based on the current map state.
+   */
   useEffect(() => {
     const instance = mapRef?.current?.getMap();
-    instance.on('load', () => setLoaded(true));
+    if (instance && instance.loaded()) {
+      setLoaded(true);
+    } else if (instance) {
+      instance.on('load', () => setLoaded(true));
+    }
   }, []);
 
   /**
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 43d5ee4e..5609759d 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -40,6 +40,7 @@
     "http-proxy-middleware": "^2.0.6",
     "i18next": "^22.0.1",
     "lucide-react": "^0.362.0",
+    "maplibre-gl": "^4.5.0",
     "moment": "^2.30.1",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
@@ -48,6 +49,7 @@
     "react-dnd-html5-backend": "^11.1.3",
     "react-docgen": "^6.0.1",
     "react-dom": "^18.2.0",
+    "react-map-gl": "^7.1.7",
     "semantic-ui-react": "^2.1.2",
     "simple-keyboard-layouts": "^3.1.87",
     "storybook": "^7.0.26",
diff --git a/packages/storybook/src/geospatial/MapDraw.stories.js b/packages/storybook/src/geospatial/MapDraw.stories.js
index 22164ecc..5aaba5d8 100644
--- a/packages/storybook/src/geospatial/MapDraw.stories.js
+++ b/packages/storybook/src/geospatial/MapDraw.stories.js
@@ -8,6 +8,7 @@ import LayerMenu from '../../../geospatial/src/components/LayerMenu';
 import MapControl from '../../../geospatial/src/components/MapControl';
 import MapDraw from '../../../geospatial/src/components/MapDraw';
 import RasterLayerComp from '../../../geospatial/src/components/RasterLayer';
+import WarpedImageLayer from '../../../geospatial/src/components/WarpedImageLayer';
 
 import bostonBoundaryData from '../data/Boston.json';
 import mbtaStops from '../data/MbtaStops.json';
@@ -181,6 +182,40 @@ export const RasterLayer = () => (
   </MapDraw>
 );
 
+export const GeoreferenceLayer = () => (
+  <MapDraw
+    apiKey={mapTilerKey}
+    buffer={2}
+    data={{
+      type: 'GeometryCollection',
+      geometries: [
+        {
+          type: 'Point',
+          coordinates: [
+            -74.0,
+            40.7166638
+          ]
+        }
+      ]
+    }}
+    mapStyle='https://api.maptiler.com/maps/basic-v2/style.json'
+    maxPitch={0}
+    onChange={action('onChange')}
+    preserveDrawingBuffer
+  >
+    <LayerMenu
+      names={[
+        'NYC'
+      ]}
+    >
+      <WarpedImageLayer
+        id='nyc'
+        url='https://annotations.allmaps.org/images/d180902cb93d5bf2'
+      />
+    </LayerMenu>
+  </MapDraw>
+);
+
 export const EmptyLayerMenu = () => (
   <MapDraw
     apiKey={mapTilerKey}

From 4028a4fb50d3cbb8a1642971655b2b26678547e6 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 22 Jul 2024 21:08:13 -0400
Subject: [PATCH 05/10] CDC #248 - Adding "preserveDrawingBuffer" prop to
 MapDraw component

---
 packages/geospatial/src/components/MapDraw.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/geospatial/src/components/MapDraw.js b/packages/geospatial/src/components/MapDraw.js
index be693a29..3e395879 100644
--- a/packages/geospatial/src/components/MapDraw.js
+++ b/packages/geospatial/src/components/MapDraw.js
@@ -82,6 +82,11 @@ type Props = {
    */
   onGeocodingSelection?: (data: any) => void,
 
+  /**
+   * If `true`, the map's canvas can be exported to a PNG using `map.getCanvas().toDataURL()`.
+   */
+  preserveDrawingBuffer?: boolean,
+
   /**
    * Map style object.
    */
@@ -197,8 +202,9 @@ const MapDraw = (props: Props) => {
     <Map
       attributionControl={false}
       cooperativeGestures={props.cooperativeGestures}
-      onLoad={() => setLoaded(true)}
       mapLib={maplibregl}
+      onLoad={() => setLoaded(true)}
+      preserveDrawingBuffer={props.preserveDrawingBuffer}
       ref={mapRef}
       style={style}
       mapStyle={mapStyleUrl}
@@ -241,6 +247,7 @@ const MapDraw = (props: Props) => {
 MapDraw.defaultProps = {
   buffer: DEFAULT_BUFFER,
   cooperativeGestures: true,
+  preserveDrawingBuffer: false,
   zoomDuration: DEFAULT_ZOOM_DELAY
 };
 

From 83457bc2b3e1ab270b1c5c55e547397481841cf4 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 22 Jul 2024 21:16:41 -0400
Subject: [PATCH 06/10] CDC #248 - Adding "maxPitch" prop to MapDraw component

---
 packages/geospatial/src/components/MapDraw.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/geospatial/src/components/MapDraw.js b/packages/geospatial/src/components/MapDraw.js
index 3e395879..0c6d9740 100644
--- a/packages/geospatial/src/components/MapDraw.js
+++ b/packages/geospatial/src/components/MapDraw.js
@@ -65,6 +65,11 @@ type Props = {
    */
   mapStyle: string,
 
+  /**
+   * The maximum pitch of the map (0-85).
+   */
+  maxPitch?: number,
+
   /**
    * If `true`, the navigation controls will display.
    */
@@ -203,6 +208,7 @@ const MapDraw = (props: Props) => {
       attributionControl={false}
       cooperativeGestures={props.cooperativeGestures}
       mapLib={maplibregl}
+      maxPitch={props.maxPitch}
       onLoad={() => setLoaded(true)}
       preserveDrawingBuffer={props.preserveDrawingBuffer}
       ref={mapRef}

From fcb93f3a8e1860172fa8aea2003754fab02df634 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Tue, 23 Jul 2024 11:18:25 -0400
Subject: [PATCH 07/10] CDC #248 - Fixing an issue with map styles between
 Peripleo and ReactMapGL

---
 .../geospatial/src/components/GeoJsonLayer.js |  6 +--
 packages/geospatial/src/utils/MapStyles.js    | 47 +++++++++++--------
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/packages/geospatial/src/components/GeoJsonLayer.js b/packages/geospatial/src/components/GeoJsonLayer.js
index 76013f55..fc2d24f1 100644
--- a/packages/geospatial/src/components/GeoJsonLayer.js
+++ b/packages/geospatial/src/components/GeoJsonLayer.js
@@ -39,9 +39,9 @@ const GeoJsonLayer = (props: Props) => (
 );
 
 GeoJsonLayer.defaultProps = {
-  fillStyle: MapStyles.fill,
-  pointStyle: MapStyles.point,
-  strokeStyle: MapStyles.stroke
+  fillStyle: MapStyles.fill.paint,
+  pointStyle: MapStyles.point.paint,
+  strokeStyle: MapStyles.stroke.paint
 };
 
 export default GeoJsonLayer;
diff --git a/packages/geospatial/src/utils/MapStyles.js b/packages/geospatial/src/utils/MapStyles.js
index 9d044069..0ad47a7d 100644
--- a/packages/geospatial/src/utils/MapStyles.js
+++ b/packages/geospatial/src/utils/MapStyles.js
@@ -1,31 +1,40 @@
 // @flow
 
 const point = {
-  'circle-radius': [
-    'interpolate',
-    ['linear'],
-    ['number', ['get', 'point_count'], 1],
-    0, 4,
-    10, 14
-  ],
-  'circle-stroke-width': 1,
-  'circle-color': [
-    'case',
-    ['boolean', ['feature-state', 'hover'], false],
-    '#3b62ff',
-    '#ff623b'
-  ],
-  'circle-stroke-color': '#8d260c'
+  type: 'circle',
+  paint: {
+    'circle-radius': [
+      'interpolate',
+      ['linear'],
+      ['number', ['get', 'point_count'], 1],
+      0, 4,
+      10, 14
+    ],
+    'circle-stroke-width': 1,
+    'circle-color': [
+      'case',
+      ['boolean', ['feature-state', 'hover'], false],
+      '#3b62ff',
+      '#ff623b'
+    ],
+    'circle-stroke-color': '#8d260c'
+  }
 };
 
 const fill = {
-  'fill-color': '#ff623b',
-  'fill-opacity': 0.2
+  type: 'fill',
+  paint: {
+    'fill-color': '#ff623b',
+    'fill-opacity': 0.2
+  }
 };
 
 const stroke = {
-  'line-color': '#ff623b',
-  'line-opacity': 0.6
+  type: 'line',
+  paint: {
+    'line-color': '#ff623b',
+    'line-opacity': 0.6
+  }
 };
 
 export default {

From 72d663210125e76c064521096e90a787dabdb92a Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Tue, 23 Jul 2024 12:18:06 -0400
Subject: [PATCH 08/10] CDC #248 - Updating OverlayLayers component to use
 "content" attribute instead of "data"

---
 packages/core-data/src/components/OverlayLayers.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/core-data/src/components/OverlayLayers.js b/packages/core-data/src/components/OverlayLayers.js
index 717c197f..9150bc16 100644
--- a/packages/core-data/src/components/OverlayLayers.js
+++ b/packages/core-data/src/components/OverlayLayers.js
@@ -7,14 +7,14 @@ import _ from 'underscore';
 
 type Layer = {
   /**
-   * The type of layer to render.
+   * (Optional) GeoJSON data to pass to the layer.
    */
-  layer_type: 'geojson' | 'raster' | 'georeference',
+  content?: { [key: string]: any },
 
   /**
-   * (Optional) GeoJSON data to pass to the layer.
+   * The type of layer to render.
    */
-  data?: { [key: string]: any },
+  layer_type: 'geojson' | 'raster' | 'georeference',
 
   /**
    * Name of the layer.
@@ -49,7 +49,7 @@ const OverlayLayer = (props: OverlayLayerProps) => {
     return (
       <GeoJSONLayer
         id={overlay.name}
-        data={overlay.data || overlay.url}
+        data={overlay.content || overlay.url}
         fillStyle={MapStyles.fill}
         pointStyle={MapStyles.point}
         strokeStyle={MapStyles.stroke}
@@ -70,6 +70,7 @@ const OverlayLayer = (props: OverlayLayerProps) => {
     return (
       <WarpedImageLayer
         id={overlay.name}
+        manifest={overlay.content}
         opacity={overlay.opacity}
         url={overlay.url}
       />

From c38c46cafe0960df05123bb19feb5744c61e2ec0 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Tue, 23 Jul 2024 12:29:46 -0400
Subject: [PATCH 09/10] CDC #248 - Updating PlaceLayersSelector component to
 parse "content" attribute

---
 packages/core-data/src/components/PlaceLayersSelector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core-data/src/components/PlaceLayersSelector.js b/packages/core-data/src/components/PlaceLayersSelector.js
index 6a2eb4b4..59c18ceb 100644
--- a/packages/core-data/src/components/PlaceLayersSelector.js
+++ b/packages/core-data/src/components/PlaceLayersSelector.js
@@ -47,7 +47,7 @@ const PlaceLayersSelector = (props: Props) => {
     if (isSelected(layer)) {
       setSelectedLayers((prevSelected) => _.filter(prevSelected, (l) => l.url !== layer.url));
     } else {
-      setSelectedLayers((prevSelected) => [...prevSelected, layer]);
+      setSelectedLayers((prevSelected) => [...prevSelected, { ...layer, content: JSON.parse(layer.content || '{}') }]);
     }
   }, [isSelected]);
 

From 9f296447b92bbc7fbbcbd38bdc575a464abf7e05 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Tue, 23 Jul 2024 15:57:30 -0400
Subject: [PATCH 10/10] CDC #248 - Publishing v2.2.8

---
 packages/controlled-vocabulary/package.json | 6 +++---
 packages/core-data/package.json             | 6 +++---
 packages/geospatial/package.json            | 4 ++--
 packages/semantic-ui/package.json           | 4 ++--
 packages/shared/package.json                | 2 +-
 packages/user-defined-fields/package.json   | 6 +++---
 packages/visualize/package.json             | 2 +-
 react-components.json                       | 2 +-
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/controlled-vocabulary/package.json b/packages/controlled-vocabulary/package.json
index 94ed3798..2143ef23 100644
--- a/packages/controlled-vocabulary/package.json
+++ b/packages/controlled-vocabulary/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/controlled-vocabulary",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of components to allow user to configure dropdown elements. Use with the \"controlled_vocabulary\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.7",
-    "@performant-software/shared-components": "^2.2.7",
+    "@performant-software/semantic-components": "^2.2.8",
+    "@performant-software/shared-components": "^2.2.8",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },
diff --git a/packages/core-data/package.json b/packages/core-data/package.json
index a9b6ecf5..228dc7e2 100644
--- a/packages/core-data/package.json
+++ b/packages/core-data/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/core-data",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of components used with the Core Data platform.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -37,8 +37,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/shared-components": "^2.2.7",
-    "@performant-software/geospatial": "^2.2.7",
+    "@performant-software/shared-components": "^2.2.8",
+    "@performant-software/geospatial": "^2.2.8",
     "@peripleo/maplibre": "^0.5.2",
     "@peripleo/peripleo": "^0.5.2",
     "react": ">= 16.13.1 < 19.0.0",
diff --git a/packages/geospatial/package.json b/packages/geospatial/package.json
index 446b141b..f951951c 100644
--- a/packages/geospatial/package.json
+++ b/packages/geospatial/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/geospatial",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of components for all things map-related.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -40,4 +40,4 @@
     "react-dom": "^18.2.0",
     "vite": "^5.1.4"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/semantic-ui/package.json b/packages/semantic-ui/package.json
index 56ee22ed..54e555ce 100644
--- a/packages/semantic-ui/package.json
+++ b/packages/semantic-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/semantic-components",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of shared components based on the Semantic UI Framework.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -35,7 +35,7 @@
     "zotero-translation-client": "^5.0.1"
   },
   "peerDependencies": {
-    "@performant-software/shared-components": "^2.2.7",
+    "@performant-software/shared-components": "^2.2.8",
     "@samvera/clover-iiif": "^2.3.2",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dnd": "^11.1.3",
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 570dfe86..a547f8db 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/shared-components",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of shared, framework agnostic, components.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
diff --git a/packages/user-defined-fields/package.json b/packages/user-defined-fields/package.json
index 613e8262..f3c3036c 100644
--- a/packages/user-defined-fields/package.json
+++ b/packages/user-defined-fields/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/user-defined-fields",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of components used for allowing end users to define fields on models. Use with the \"user_defined_fields\" gem.",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
@@ -23,8 +23,8 @@
     "underscore": "^1.13.2"
   },
   "peerDependencies": {
-    "@performant-software/semantic-components": "^2.2.7",
-    "@performant-software/shared-components": "^2.2.7",
+    "@performant-software/semantic-components": "^2.2.8",
+    "@performant-software/shared-components": "^2.2.8",
     "react": ">= 16.13.1 < 19.0.0",
     "react-dom": ">= 16.13.1 < 19.0.0"
   },
diff --git a/packages/visualize/package.json b/packages/visualize/package.json
index 783532c4..b866520f 100644
--- a/packages/visualize/package.json
+++ b/packages/visualize/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./dist/index.cjs.js",
diff --git a/react-components.json b/react-components.json
index bf508330..f44e41c5 100644
--- a/react-components.json
+++ b/react-components.json
@@ -8,5 +8,5 @@
     "packages/user-defined-fields",
     "packages/visualize"
   ],
-  "version": "2.2.7"
+  "version": "2.2.8"
 }