React Leaflet Load WMS layer in parallel

Viewed 11

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?

0 Answers
Related