This issue is not related to Mapbox, and no map or geographical knowledge is required to assist. The problem at hand pertains to React refs.
Currently, I am utilizing react-map-gl (Mapbox for React) in conjunction with @mapbox/mapbox-gl-draw to enable users to draw shapes on the map. Within this application, there are two key components: DrawControl, which facilitates drawing capabilities, and AllPastures, responsible for rendering the map and managing created/updated/deleted geometries.
When a user draws a polygon, it triggers the onCreate method within the DrawControl, subsequently executing onCreateOrUpdate. To pass the Draw reference from DrawControl to AllPastures, I am using forwardRef.
The following snippet showcases the DrawControl component:
export const DrawControl = React.forwardRef<MapboxDraw, DrawControlProps>(
(props: DrawControlProps, ref) => {
const drawRef: MapboxDraw = 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,
}
);
// exposing drawRef outside the component by Ref
React.useImperativeHandle(ref, () => drawRef, [drawRef]);
return null;
}
Meanwhile, part of the AllPastures component looks like this:
export const AllPastures = () => {
...
const [drawRef, setDrawRef] = React.useState<MapboxDraw>();
// utilizing callback ref to respond to drawRef changes
const onDrawRef = React.useCallback((ref: MapboxDraw | null) => {
if (ref) {
setDrawRef(ref);
}
}, []);
React.useEffect(() => {
console.log('useEffect drawRef when app is loading', drawRef); // confirming that drawRef is defined here
}, [map, drawRef]);
const onCreateOrUpdate = (e: { features: Feature[] }) => {
console.log('drawRef under onCreateOrUpdate method', drawRef); // question arises as to why drawRef is undefined here
};
...
return (
<DrawControl
ref={onDrawRef}
position="top-right"
displayControlsDefault={false}
controls={{
polygon: true,
trash: true,
}}
defaultMode="simple_select"
onCreate={onCreateOrUpdate}
onUpdate={onCreateOrUpdate}
/>
);
};
The main dilemma revolves around determining why the drawRef is undefined within the onCreateOrUpdate method?
To experiment with the issue firsthand, you can access a sandbox simulation via the following link: https://stackblitz.com/edit/vitejs-vite-bvutvb?file=src%2FAllPastures.tsx
Simply draw any polygon on the map and observe if the console log displays
drawRef under onCreateOrUpdate methodRemember to refresh the page (F5) after making code modifications to test the changes.