Prevent Remove Layers from removing Leaflet ImageOverlay

[gmarshall56]

Hello: I have an issue that I cannot get around. If this is a Leaflet issue then just let me know and I will try to ask for help from them, however I am using the geoman drawing tools here, which, so far have been much better for me in my development versus the Leaflet drawing tool. Here is my scenario: I place several ImageOverlays on the map. There are a total of 8 overlays that would cover the entire map. See the results:

Now, I would draw a shape on top of any of the Overlays. This works fine. See here:

Now, I change my mind about the shape so I click on the "Remove Layers" button. I mouse over the shape I have drawn and click. The shape gets removed. However if I click again, the ImageOverlay gets removed. See here:

Can you please tell me how I can prevent ImageOverlays from being deleted when I click the "Remove Layers" button?

As always, thank you for your time.

[Falke-Design]

If you don't want to do anything with the ImageOverlay (moving / editing & removing) you can simply add imageOverlayLayer.setStyle({pmIgnore: true}); https://github.com/geoman-io/leaflet-geoman#init-leaflet-geoman

If you want only to disable removing:

imageOverlayLayer.pm.setOptions({allowRemoval: false});

https://github.com/geoman-io/leaflet-geoman#edit-mode

PS: Please close this issue and all others if you have solved the problem and you don't need help anymore in this issues.

[gmarshall56]

Once again, thank you for pointing out the setting I need. This is a very effective and valuable setting. I have set my ImageOverlay options as such:

        const someOptions = {
            opacity: 0.7,
            interactive: true,
            className: 'imageborder',
            zIndex: 5,
            pmIgnore: true,  // <== there it is!
        };

What I notice is that the pmIgnore works when the ImageOverlay is a pane, as in:

            paneName = blah;
            const useThisPane = map.createPane(paneName);

            const anImage = L.imageOverlay(
                someURL,
                someBounds,
                paneName,
                someOptions,
            )

However, the pmIgnore does NOT work when creating an ImageOverlay without a pane, as in:

            const anImage = L.imageOverlay(
                someURL,
                someBounds,
                someOptions,
            )

What happens is when I click on the "Remove Layers" button, then clicking on a shape to be deleted nothing happens, as if the click is ignored. This does not happen when the ImageOverlay is for a pane.

Thanks again for your time.

[Falke-Design]

I was not able to reproduce your error. But I see that you are adding the pane option wrong. The third parameter is always options and never the pane. So your ImageOverlay creation should look like:

var paneName = 'blah';
const useThisPane = map.createPane(paneName);

const someOptions = {
            opacity: 0.7,
            interactive: true,
            className: 'imageborder',
            zIndex: 5,
            pmIgnore: true,
            pane: paneName // Add pane here
        };

const anImage = L.imageOverlay(
                someURL,
                someBounds,
                someOptions
            )

Doku ImageOverlay