Draw Polygon how to call the mapbox-gl-draw Methods?

[joel-daros]

How to call the mapbox-gl-draw API methods like (getAll, getMode, ...) using useControl hook?

Following the Mapbox draw example I can use the draw variable to access all features that are drawn on a map.

const draw = new MapboxDraw({
 // ...
});
map.addControl(draw);
// ...
function updateArea(e) {
  const data = draw.getAll(); // Accessing all features (data) drawn here
  // ...
}

However, in react-map-gl library useControl example I can not figure out how to pass ref to the DrawControl component so I can use it as something like draw.current in a similar way as I did draw in normal javascript above

If anyone can help with the solution, I promise to update this polygon drawing example.

[joel-daros]

I think I found a solution combine forwardRef and useImperativeHandle to solve:

export const DrawControl = React.forwardRef((props: DrawControlProps, ref) => {
  const drawRef = useControl<MapboxDraw>(
    () => new MapboxDraw(props),
    ({ map }) => {
      map.on("draw.create", props.onCreate);
      map.on("draw.update", props.onUpdate);
      map.on("draw.delete", props.onDelete);
      map.on("draw.modechange", props.onModeChange);
    },
    ({ map }) => {
      map.off("draw.create", props.onCreate);
      map.off("draw.update", props.onUpdate);
      map.off("draw.delete", props.onDelete);
      map.off("draw.modechange", props.onModeChange);
    },
    {
      position: props.position,
    }
  );

  React.useImperativeHandle(ref, () => drawRef, [drawRef]); // This way I exposed drawRef outside the component

  return null;
});

in the component:

const drawRef = React.useRef<MapboxDraw>();

const changeModeTo = (mode: DrawMode) => {
  // If you programmatically invoke a function in the Draw API, any event that directly corresponds with that function will not be fired
  drawRef.current?.changeMode(mode as string);
  setDrawMode(mode);
};

<>
<DrawControl
  ref={drawRef}
  position="top-right”
  displayControlsDefault={false}
  controls={{
    polygon: true,
    trash: true,
  }}
  defaultMode={DEFAULT_INITIAL_MODE}
  onCreate={onUpdate}
  onUpdate={onUpdate}
  onDelete={onDelete}
  onModeChange={onModeChange}
  />

<button
  style={{
  position: ‘absolute’,
  left: ‘20px’,
  top: ‘20px’,
  backgroundColor: '#ff0000’,
  }}
  onClick={() => changeModeTo('simple_select’)}
  >
  Change to Simple Select
</button>

<>

@Pessimistress If this approach is correct, please, let me know and I will send a PR to update the Draw Polygon example as this is very important feature that isn’t documented anywhere.

[tordans]

@joel-daros thanks for sharing. I think this solution to assign the ref is a bit cleaner that #1892 (comment). +1 on adding this to an example, since figuring this out with just the comments in the repo is possible but quite hard.

I change the TS part a bit for the function call to

export const CalculatorControlsDrawControl = React.forwardRef<
  MapboxDraw | undefined,
  DrawControlProps
>((props: DrawControlProps, ref) => {
    // …

With DrawControlProps being…

type DrawControlProps = ConstructorParameters<typeof MapboxDraw>[0] & {
  ref: MutableRefObject<MapboxDraw | undefined>
  position?: ControlPosition

  onCreate?: (event: { features: DrawArea[] }) => void
  onUpdate?: (event: { features: DrawArea[]; action: string }) => void
  onDelete?: (event: { features: DrawArea[] }) => void
}

[tordans]

In my case, I also had to work around this issue #2123 before I was able to use the ref the way I wanted to to make sure the map is fully loaded.

Another gotcha I ran into is, that .add does not trigger draw.update, so one has to do this manually.

[felixerdy]

The answer looks very promising, but I can't get it running. The returning ref.current is always null for me. I created a stackblitz as an example: https://stackblitz.com/edit/react-ts-p7ag9u?file=App.tsx Anybody knows how to resolve the issue?

[joel-daros]

You cannot refer drawRef outside a DrawControl method, otherwise is always returning null/undefined.

If you want to manipulate the DrawControl its need be done inside a valid DrawControl method, this way you will be sure that the DrawControl is fully loaded and drawRef will not return undefined/null.

Your working example:
https://stackblitz.com/edit/react-ts-vx8zth?file=App.tsx,DrawControl.tsx

[SuhaibMaraqa]

Using this approach, when trying to delete a polygon, an error occurs "You must provide a featureId to enter direct_select mode". and the polygon won't be deleted