0

I am using the react-leaflet/core library together with the plugin Leaflet-Geoman which using the removalMode to delete the marker from map

Below is my code

import { useLeafletContext } from "@react-leaflet/core";
const Geoman = (props) => {

    const context = useLeafletContext();
     useEffect(() => {
        const leafletContainer = context.layerContainer || context.map;

        (leafletContainer as any).pm.addControls({
            drawMarker: true,
            dragMode: false,
            removalMode: true,
        });
        (leafletContainer as any).pm.Toolbar.buttons.removalMode._button.title = 'Delete Data'";
        
        (leafletContainer as any).on("pm:remove", (e) => { 
            //  Delete code for marker
        });
        
        return (<></>);
};

But it is working for only one time, to do second time need to click again on Remove button

Is there any solution to do it only once sop i can delete multiple markers from map

Falke Design
  • 10,635
  • 3
  • 15
  • 30
Developer007
  • 37
  • 5
  • I have not much experience with react but maybe it is a state problem? Per default Leaflet-Geoman is not disabling the removal mode after deleting a layer: https://jsfiddle.net/sdwLxp76/ – Falke Design Dec 08 '22 at 14:51
  • Did you check if the component is re-rendered after pm:remove? as you have then one marker less then before, means data has changed. if it's connected to a state/store, it would cause re-render – Tomer_Ra Dec 08 '22 at 22:45
  • @FalkeDesign Thank you for your feedback, but there is any way to make remove button enable – Developer007 Dec 09 '22 at 06:48
  • @Tomer_Ra Thank you for your feedback, but there is any way to make remove button enable after re-render tha page? – Developer007 Dec 09 '22 at 06:51
  • @Developer007 the leafletContainer is set here as type any, it could be that during useEffect it is still undefined. can you confirm if it is like that? – Tomer_Ra Dec 10 '22 at 17:20

0 Answers0