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.
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:
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_secret exposed. I changed it to use a public layer for esri so people can still view the problem. Also,
But thanks to TomazicM for getting to the crux of the matter.