How to stop drawing after completing one polygon or rectangle in DrawingManager on react-google-maps? - reactjs

Question

I'll use my code as a reference:
export default class DrawingContainer extends Component {
static propTypes = {
onPolygonComplete: PropTypes.func
};
state = {
drawingMode: 'rectangle'
};
render() {
return (
<DrawingManager
drawingMode={this.state.drawingMode}
onPolygonComplete={polygon => {
this.setState({
drawingMode: ''
}, () => {
if (this.props.onPolygonComplete) {
this.props.onPolygonComplete(convertPolygonToPoints(polygon));
}
});
}}
onRectangleComplete={rectangle => {
this.setState({
drawingMode: ''
}, () => {
if (this.props.onPolygonComplete) {
this.props.onPolygonComplete(
convertBoundsToPoints(rectangle.getBounds())
);
}
});
}}
defaultOptions={{
drawingControl: true,
drawingControlOptions: {
position: window.google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.google.maps.drawing.OverlayType.POLYGON,
window.google.maps.drawing.OverlayType.RECTANGLE
]
},
rectangleOptions: polygonOptions,
polygonOptions
}}
/>
);
}
}
So there are two approaches I followed to try to toggle the drawing mode to default drag mode after first drawing.
Either I save the current drawing mode(polygon or rectangle) to my own state and pass it to DrawingManager. I set my default varialbe in state called drawingMode to 'rectangle', pass it to the DrawingManager and then, in the function onRectangleComplete, I set it as an empty string, and it works since the map initially loads with the rectangle mode. But once I click on one of the drawing control, it never stops drawing, even though the variable is being set to an empty string. So I think there's a breach of controlled component here.
The second approach I tried was to explicitly try and find the google DrawingManager class to use it's setDrawingMode function. But I tried using ref on drawing manager and then went to it's state, and was able to see it there, but then I read the variable name DO_NOT_USE_THIS_ELSE_YOU_WILL_BE_FIRED - I believe the library prevents this approach.
So how do I use the drawing controls along with changing the drawing mode back to the default after I complete my first drawing?

Answer 1

handlePolygonComplete(polygon) {
console.log(this);
const paths = polygon.getPath().getArray();
if (paths.length < 3) {
polygon.setPaths([]);
alert("You need to enter at least 3 points.")
} else {
const coords = paths.map((a) => [a.lat(), a.lng()]);
this.setDrawingMode(null);
this.setOptions({ drawingControlOptions: { drawingModes: [] } });
window.addPolygonToState(coords);
}
and
<DrawingManager
onPolygonComplete={this.handlePolygonComplete}
>
Here I check if the user put at least 3 points, if he/she did, get its coordinates, and remove the drawing mode.

Answer 2

So I just set a toggle with a function that stopped rendering the DrawingManager
<GoogleMap
defaultZoom={10}
defaultCenter={new google.maps.LatLng(38.9072, -77.0369)}
>
{this.props.creatingPolygon && <DrawingManager
defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
defaultOptions={
{
drawingControl: this.props.creatingPolygon,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
this.props.creatingPolygon && google.maps.drawing.OverlayType.POLYGON
],
}
}
}
onPolygonComplete={(polygon) => this.createDeliveryZone(polygon)}
/>}
</GoogleMap>