CDC #248 - Adding check for map loaded in WarpedImageLayer component

performant-software · Jul 23, 2024 · 7a18df1 · 7a18df1
1 parent 4dd6f0f
commit 7a18df1
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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}