Add vector layer drawing capabilities via mapbox-gl-draw or TerraDraw

[jo-chemla]

Add drawing capabilities to the user. Possible implementations:

• Might be simpler to rely on react-map-gl DrawControls implementation app.tsx and draw-control.ts. mapbox-gl-draw seem to be available via react-map-gl, see example here via react-map-gl-draw. With custom control bar, also available for maplibre.
• TerraDraw & repo, see implementation discussion or older discussion around react-map-gl integration

Capabilities:

• 1 Side panel avec les imports geojson + créations shapes. Si on met les shapes terra-draw dans le sidepanel, ce sera seulement une gestion de la visibilité show/hide de tout le layer terra-draw custom-shapes.
• dans le local browser/tab context (tab context, eventually localStorage), all vector drawings disappear on reload or from other browser.
• useful drawing tools are probably only points, polygons, rectangles. No need for Line, circle, freehand. Probably added as mapbox-controls
• useful edition tools: select + delete to delete geometry, import and export, eventually delete-all

Note: Pas trop fan de l'édition par shape de custom properties comme un title. Annotation et étiquettes ton draw te permettrait de dessiner des points, si tu peux les nommer c'est ok ?

[jo-chemla]

Example terradraw within react-map-gl implementation

function Drawing() {
  const map = useMap();
  const draw = useRef<TerraDraw | null>(null);

  useEffect(() => {
    if (map?.current) {
      map.current.once("load", () => {
        if (!draw.current) {
          draw.current = new TerraDraw({
            adapter: new TerraDrawMapboxGLAdapter({
              map: map.current?.getMap(),
            }),
            modes: [new TerraDrawRectangleMode()],
          });

          console.log("Starting TerraDraw");
          draw.current.start();
          draw.current.setMode("rectangle");
        }
      });
    }

    return () => {
      console.log("Stopping TerraDraw");
      draw.current?.stop();
    };
  }, [map]);

  return <></>;
}

[zineb595]

Useful props on terradraw: _renderBeforeLayerId & renderBelowLayerId see terra-draw-mapbox-gl-adapter.ts

Also watch issues for correct layer ordering and style change events JamesLMilner/terra-draw#394 and JamesLMilner/terra-draw#590

[jo-chemla]

Watch PR JamesLMilner/terra-draw#615 for progress merging the renderAboveLayerId config param to the mapbox/maplibre adapters