how to draw shapes in react-leaflet v3 - leaflet

Question

Do you have any idea about implementing the draw functionality to react-leafletV3?
I have added an event listener but it is not working and reacting to anything.
useEffect(() => {
if (!map) return;
map.addEventListener("mousemove", function (event) {
setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
});
map.on("draw:drawstart", function (event) {
console.log("event here", event);
});
const drawControl = new L.Control.Draw({
position: "topleft",
});
drawControl.addTo(map);
const leftLayer = L.tileLayer(
layers[leftLayerIndex].url,
layerOptions
).addTo(map);
const rightLayer = L.tileLayer(
layers[rightLayerIndex].url,
layerOptions
).addTo(map);
const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
setSideBySide(sbs);
}, [map]);
useEffect(() => {
if (sideBySide) {
sideBySide.setLeftLayers(
L.tileLayer(layers[leftLayerIndex].url, layerOptions).addTo(map)
);
}
}, [leftLayerIndex, rightLayerIndex, sideBySide]);

Answer 1

This is the code that worked for me. I added an event listener that listens to the created layer and after creating the layer I added the feature group layer. I have mention that this part is required as I have commented in the options object.
edit: {
featureGroup: editableLayers, //REQUIRED!!
}
useEffect(() => {
if (!map) return;
map.addEventListener("mousemove", function (event) {
setCoords({ lat: event.latlng.lat, lng: event.latlng.lng });
});
const editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);
const options = {
position: "topleft",
draw: {
polyline: false,
polygon: false,
rectangle: {
shapeOptions: {
clickable: false,
color: "dodgerblue",
},
},
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
},
};
const drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === "marker") {
layer.bindPopup("A popup!");
}
editableLayers.addLayer(layer);
});
const leftLayer = L.tileLayer(
layers[leftLayerIndex].url,
layerOptions
).addTo(map);
const rightLayer = L.tileLayer(
layers[rightLayerIndex].url,
layerOptions
).addTo(map);
const sbs = L.control.sideBySide(leftLayer, rightLayer).addTo(map);
setSideBySide(sbs);
}, [map]);