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.

Edit: altering codesandbox to use public esri imagemaplayer

I had been using an auth-requires esri imagemaplayer in my initial example, which had my personal client_id and client_secret exposed. I changed it to use a public layer for esri so people can still view the problem. Also,

Here is a codesandbox with the patch / fix js file

But thanks to TomazicM for getting to the crux of the matter.

L.Map.include({
  getBounds: function() {
    var trace = new Error().stack;
    if (this._viewport && (trace.search(/esri/i) == 0)) {
      return this.getViewportLatLngBounds();
    } else {
      var bounds = this.getPixelBounds(),
      sw = this.unproject(bounds.getBottomLeft()),
      ne = this.unproject(bounds.getTopRight());
      return new L.LatLngBounds(sw, ne);
    }
  }
});