I am loading multiple WMSTile Layers in React Leaflet. They are displaying correctly, but each layer is waiting for the previous layer to finish loading before starting to load the next layer. I can see this by logging in the event handlers like so:
<LayersControl>
{dateArray.map((date) => {
const url =
`${openWeatherMapLayerBaseUrlPaid}/${op}/{z}/{x}/{y}?appid=${openWeatherMapApiKey}` + `&date=${date}`;
return (
<LayersControl.Overlay key={`${op}${date}`} name={`Open Weather - ${op}${date}`} checked={true}>
<WMSTileLayer
url={url}
opacity={activeOverlayDate === date ? 1 : 0}
eventHandlers={{
tileload: () => {
console.log('TILE LOAD: event for every tile in the layer');
},
load: () => {
console.log('FINISH LAYER: layer load event once after all tiles are loaded');
},
}}
/>
</LayersControl.Overlay>
);
})}
</LayersControl>
If there were two entries in the dateArray, and there were 5 tiles to be loaded in each layer, the output of the above would be something like:
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
FINISH LAYER: layer load event once after all tiles are loaded
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
TILE LOAD: event for every tile in the layer
FINISH LAYER: layer load event once after all tiles are loaded
Is there a way to trigger the loading of all the layers so that they happen in parallel?