Show URL polygons in the map on mount

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

@@ -1,23 +1,36 @@
 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';
-
-type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
+type DrawControlProps = {
   onCreate?: (evt: { features: object[] }) => void;
   onUpdate?: (evt: { features: object[]; action: string }) => void;
   onDelete?: (evt: { features: object[] }) => void;
   onSelectionChange?: (evt: { selectedFeatures: object[] }) => void;
-};
+} & MapboxDraw.DrawOptions;
 
 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]

app/scripts/components/common/map/mapbox-style-override.ts

@@ -195,6 +195,7 @@ const MapboxStyleOverride = css`
       })});
     }
   }
+
   .mapbox-gl-draw_trash.mapbox-gl-draw_trash::before {
     background-image: url(${({ theme }) =>
       iconDataURI(CollecticonTrashBin, {

app/scripts/components/exploration/components/map/index.tsx

@@ -51,8 +51,8 @@ export function ExplorationMap(props: { comparing: boolean }) {
     .slice()
     .reverse();
 
-  const { onUpdate, onDelete, onSelectionChange, features } = useAois();
-  console.log(features);
+  const { onUpdate, onDelete, onSelectionChange } = useAois();
+  // console.log(features);
 
   return (
     <Map id='exploration' projection={projection}>
@@ -91,7 +91,7 @@ export function ExplorationMap(props: { comparing: boolean }) {
         controls={{
           polygon: true,
           trash: true
-        }}
+        } as any}
         defaultMode='draw_polygon'
         onCreate={onUpdate}
         onUpdate={onUpdate}