Causing problems with L.esri.imageMapLayer / L.ImageOverlay

[slutske22]

I posted on stackoverflow, but I feel this might be a plugin issue.

I am creating a leaflet application that uses various data sources / map layers. I found a great source for global ground cover from esri. It is an imageLayer. Using an esri-leaflet imageLayer, I am able to add this layer to my map. My application will likely need to draw data from various raster layers like this one. I am also able to load an urban-wildland boundary layer as an esri-leaflet featureLayer.

I am also using leaflet-active-area, which is a plugin that shifts the center and bounds of the map to the div of your choosing. I love this plugin for creating a better UI experience.

The featureLayer works just fine in conjunction with the activeArea. However, the imageLayer is having problems. It seems that the imageLayer is calculating what section of the layer should be currently in the map based on the original map bounds, but then squishing the image itself into the activeArea div. Check it out:

Working demo of the problem

I made a codesandbox that shows this problem. There is a 'toggle activearea' button there, so you can see how the imageLayer works properly when not using the activearea, but has this issue when using it.

What might be going wrong here? What is it about an imageLayer (or its underlying L.ImageOverlay) that it knows to sample the correct bounds from the entire map, but then it squishes it into the activearea, instead of the total area? I tried using other types of esri layers (L.esri.tiledMapLayer, L.esri.dynamicMapLayer, etc.) but these don't work as they are not the correct functions to recieve and apply this layer source. I don't want to give up my activearea, but I'm going to need to apply and ready from raster layers in my application. Ideas?

Thanks for reading.

[slutske22]

I got a good answer on stackoverflow and I wrote a patch to get it to work. You can find the patch file under esrileaflet.activearea.patch.js in this codesandbox.