MapServer with custom LODs. initial tile set zoom level is wrong

[roocell]

Describe the bug

I have a MapServer with custom zoom levels (4 to 9) which corresponds to 13 to 18 on my map.
I set initial map zoom level to 13 and when I add my tile set it is requesting zoom 13 - which makes sense.
But afterwards (somehow) esri-leaflet figures out that zoom 13 corresponds to 4 on my server - I assume this is in some JSON on the MapServer describing this.
So when i zoom/pan after the initial load it grabs the tiles properly.

how do I get the initial tile load to use zoom 4 rather than 13?

right now, I'm just zoom/panning afterwards to get them to load.

Reproduction

var map = L.map('map').setView([45.39793819727917, -75.72070285499208], 100.0);
map.setZoom(13); // start way out (to prevent so many 404s at startup)

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.esri.tiledMapLayer({
    url: "https://maps.ottawa.ca/arcgis/rest/services/Basemap_Imagery_1965/MapServer",
    pane: "overlayPane",
    opacity: 1.0, // make all hidden
    maxNativeZoom: 18, // zoom capability of tiles
    maxZoom: 22, // zoom on map (will stretch tiles)
}).addTo(map);

Logs

initial request
https://maps.ottawa.ca/arcgis/rest/services/Basemap_Imagery_1965/MapServer/tile/13/2935/2370 404 (Not Found)

successful requests after load when zoom/pan
https://maps.ottawa.ca/arcgis/rest/services/Basemap_Imagery_1965/MapServer/tile/4/2937/2371

System Info

https://unpkg.com/[email protected]/dist/esri-leaflet.js

Additional Information

No response

[gavinr-maps]

this._lodMap is the mapping from LODs to zoom levels. If you look at this._lodMap here, it looks correct-- mapping LOD 4 to zoom 13 for example:

So it seems to be a timing issue where Esri Leaflet is loading tiles before getting that _lodMap.

... so on this line:

esri-leaflet/src/Layers/TiledMapLayer.js

Line 98 in e827880

if (!this._lodMap || (this._lodMap && this._lodMap[this._getZoomForUrl()] !== undefined)) {

In this case, this._lodMap is undefined. So according to the code it will go into the first branch of the if statement. But for the correct behavior it should wait until the second branch of the if statement (Waiting for this._lodMap to be defined).

I'm not quite sure if it's as simple as changing that line like this: https://github.com/Esri/esri-leaflet/pull/1400/files

I am hesitant to suggest this is a bug since this line has been around for ~9 years - 10fced2#diff-88c75a7b5c3d6401fef39bb305edb49fabe214538f68f4a9963b9c8c26a90404R89

@patrickarlt could you please let me know what you think on this one.