Show URL polygons in the map on mount

app/scripts/components/common/map/controls/aoi/index.tsx

@@ -1,5 +1,8 @@
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { useAtomValue } from 'jotai';
+import {  useRef } from 'react';
 import { useControl } from 'react-map-gl';
+import { aoisFeaturesAtom } from '$components/exploration/atoms/atoms';
 
 // import type { MapRef } from 'react-map-gl';
 
@@ -11,13 +14,25 @@ type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
 };
 
 export default function DrawControl(props: DrawControlProps) {
+  const control = useRef<MapboxDraw>();
+  const aoisFeatures = useAtomValue(aoisFeaturesAtom);
+
   useControl<MapboxDraw>(
-    () => new MapboxDraw(props),
+    () => {
+      control.current = new MapboxDraw(props);
+      return control.current;
+    },
     ({ map }: { map: any }) => {
       map.on('draw.create', props.onCreate);
       map.on('draw.update', props.onUpdate);
       map.on('draw.delete', props.onDelete);
       map.on('draw.selectionchange', props.onSelectionChange);
+      map.on('load', () => {
+        control.current?.set({
+          type: 'FeatureCollection',
+          features: aoisFeatures
+        });
+      });
     },
     ({ map }: { map: any }) => {
       map.off('draw.create', props.onCreate);

app/scripts/components/common/map/controls/hooks/use-aois.ts

@@ -2,15 +2,23 @@ import { useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 import { Polygon } from 'geojson';
 import { toAoIid } from '../../utils';
-import { aoisDeleteAtom, aoisFeaturesAtom, aoisSetSelectedAtom, aoisUpdateGeometryAtom } from '$components/exploration/atoms/atoms';
+import {
+  aoisDeleteAtom,
+  aoisFeaturesAtom,
+  aoisSetSelectedAtom,
+  aoisUpdateGeometryAtom
+} from '$components/exploration/atoms/atoms';
 
 export default function useAois() {
   const features = useAtomValue(aoisFeaturesAtom);
 
   const aoisUpdateGeometry = useSetAtom(aoisUpdateGeometryAtom);
   const onUpdate = useCallback(
     (e) => {
-      const updates = e.features.map((f) => ({ id: toAoIid(f.id), geometry: f.geometry as Polygon }));
+      const updates = e.features.map((f) => ({
+        id: toAoIid(f.id),
+        geometry: f.geometry as Polygon
+      }));
       aoisUpdateGeometry(updates);
     },
     [aoisUpdateGeometry]