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] 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}