Deck migration/draw layer

.gitignore

@@ -44,6 +44,7 @@ bower_components
 build/Release
 
 # Dependency directories
+vendor/
 node_modules/
 .pnp.*
 .yarn/*

apps/fishing-map/features/map/Map.tsx

@@ -8,7 +8,7 @@ import { ViewState } from 'react-map-gl'
 import { GFWAPI } from '@globalfishingwatch/api-client'
 import { LayerComposer } from '@globalfishingwatch/layer-composer'
 import type { RequestParameters } from '@globalfishingwatch/maplibre-gl'
-import { RulersLayer } from '@globalfishingwatch/deck-layers'
+import { RulersLayer, DrawLayer } from '@globalfishingwatch/deck-layers'
 import {
   useIsDeckLayersLoading,
   useSetDeckLayerComposer,
@@ -39,10 +39,15 @@ import styles from './Map.module.css'
 import MapAnnotations from './overlays/annotations/Annotations'
 import MapAnnotationsDialog from './overlays/annotations/AnnotationsDialog'
 import useRulers from './overlays/rulers/rulers.hooks'
+import { useDrawLayer } from './overlays/draw/draw.hooks'
+import { useMapDrawConnect } from './map-draw.hooks'
 // This avoids type checking to complain
 // https://github.com/visgl/deck.gl/issues/7304#issuecomment-1277850750
 const RulersLayerComponent = RulersLayer as any
-const MapDraw = dynamic(() => import(/* webpackChunkName: "MapDraw" */ './MapDraw'))
+const DrawLayerComponent = DrawLayer as any
+const DrawDialog = dynamic(
+  () => import(/* webpackChunkName: "DrawDialog" */ './overlays/draw/DrawDialog')
+)
 const PopupWrapper = dynamic(
   () => import(/* webpackChunkName: "PopupWrapper" */ './popups/PopupWrapper')
 )
@@ -72,11 +77,6 @@ const handleError = async ({ error }: any) => {
   }
 }
 
-const layerComposer = new LayerComposer({
-  sprite:
-    'https://raw.githubusercontent.com/GlobalFishingWatch/map-gl-sprites/master/out/sprites-map',
-})
-
 const mapStyles = {
   width: '100%',
   height: '100%',
@@ -110,7 +110,7 @@ const MapWrapper = () => {
   useMapRulersDrag()
   const { rulers, editingRuler, rulersVisible } = useRulers()
   // const map = useMapInstance()
-  // const { isMapDrawing } = useMapDrawConnect()
+  const { isMapDrawing } = useMapDrawConnect()
   // const { generatorsConfig, globalConfig } = useGeneratorsConnect()
 
   // const setMapReady = useSetRecoilState(mapReadyAtom)
@@ -248,6 +248,8 @@ const MapWrapper = () => {
   // }, [isMapInteractionDisabled, styleInteractiveLayerIds])
 
   const setDeckLayerLoadedState = useSetDeckLayerLoadedState()
+  const { onDrawEdit, onDrawClick, drawLayerMode, drawFeaturesIndexes, drawFeatures } =
+    useDrawLayer()
 
   const currentRuler = editingRuler ? [editingRuler] : []
 
@@ -293,7 +295,17 @@ const MapWrapper = () => {
             visible={rulersVisible}
           />
         )}
+        {isMapDrawing && (
+          <DrawLayerComponent
+            data={drawFeatures}
+            onEdit={onDrawEdit}
+            onClick={onDrawClick}
+            selectedFeatureIndexes={drawFeaturesIndexes}
+            mode={drawLayerMode}
+          />
+        )}
       </DeckGL>
+      {isMapDrawing && <DrawDialog />}
       <MapPopups />
       {/* {style && (
         <Map

apps/fishing-map/features/map/map.draw.utils.ts

@@ -6,7 +6,7 @@ import {
   DatasetConfiguration,
   DatasetTypes,
 } from '@globalfishingwatch/api-types'
-import type { DrawFeature, DrawPointPosition } from './MapDraw'
+import type { DrawFeature, DrawPointPosition } from './overlays/draw/DrawDialog'
 
 export const getCoordinatePrecisionRounded = (coordinate: Position): Position => {
   return coordinate.map((points) => Math.round(points * 100000) / 100000)