Getting info from draw on useControl

[zayne-anthony]

Hello, I am trying to add a feature to my map where you can isolate markers/points inside a drawn polygon. As of right now I am having trouble using the draw useControl. It is in the map just fine, but getting the values from onCreate/onUpdate is just not working. I have tried console logging any value I an think of when it should during the onCreate/onUpdate but I am not getting anything. Not even an error. It just seems it's not firing. I have followed the example on react-map-gl and even doing that it doesn't store anything inside the feature state.

Sandbox: https://codesandbox.io/s/condescending-margulis-yixddb?file=/src/Mapbox.js

Here is my code:

// Map Component
const onCreate = useCallback((e) => {
     console.log(e.features);
}, []);

// Draw Component
import { useControl } from "react-map-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";

const DrawControl = (props) => {
	useControl(
		({ map }) => {
			map.on("draw.create", props.onCreate);
			map.on("draw.update", props.onUpdate);
			map.on("draw.delete", props.onDelete);
			return new MapboxDraw(props);
		},
		({ map }) => {
			map.off("draw.create", props.onCreate);
			map.off("draw.update", props.onUpdate);
			map.off("draw.delete", props.onDelete);
		},
		{
			position: props.position,
		}
	);

	return null;
};

export default DrawControl;

[Pessimistress]

Create a CodeSandbox if you need help.

[engelzero]

@Pessimistress with that example with the useControl hook how can I get access to the DrawControl ref

drawRef.current.add to add a feature or change the select modes - something along those lines? Bit stuck as I'm migrating to latest dependency versions.

[norgepaul]

@engelzero I'm struggling with the same thing. I need the reference to add a feature for editing. Did you figure it out?

[engelzero]

@norgepaul #1770 (reply in thread) - sure did!

[joel-daros]

@Pessimistress Could you post a simple example how to call these API methods from the <DrawControl>

[Thormod]

Same problem here!