Tracking if an MVTLayer is in the process of loading tiles

[NgoKnows]

Hi, I was wondering if anyone had any ideas for tracking the loading state of an MVTLayer. Specifically whether or not it is currently fetching any tiles.

My idea was to track the number of tile requests (increment a value for each new request), then using onTileLoad and onTileError I would decrement that count, and if it is 0, then it isn't loading. However, I am having trouble finding a callback or something to let me hook into the first part to increment when a new tile is being requested.

Let me know if there are any alternatives to this as well!

[padawannn]

There is no callback method that tells you when a tile is going to be requested. You could create a new layer that extends the MVTLayer and overwrite the getTileData method

[jcready]

We have done exactly this for our use case. Here is the overridden getTileData method we implemented:

import {MVTLayer as BaseMVTLayer} from '@deck.gl/geo-layers';

function noop() {}

const defaultProps = {
  onFetchTile: {type: 'function', value: noop, compare: false},
  onFetchTileComplete: {type: 'function', value: noop, compare: false},
};

export class MVTLayer extends BaseMVTLayer {
  getTileData(tile) {
    const result = super.getTileData(tile);
    // Did the call return a Promise?
    if (result && typeof result.then === 'function') {
      // If so then callback
      this.props.onFetchTile(tile);
      // Wait for the promise, catch to avoid unhandled rejection, and finally callback
      Promise.resolve(result).catch(noop).finally(this.props.onFetchTileComplete);
    }
    // Always return the original result
    return result;
  }
}

MVTLayer.defaultProps = defaultProps;
MVTLayer.layerName = 'MVTLayer';

Then we can use it like:

let pendingRequests = 0;

const layers = [
  new MVTLayer({
    onFetchTile: () => pendingRequests++,
    onFetchTileComplete: () => pendingRequests--,
    // ...the rest of your props
  })
];

[dCogs]

I'm using the GoogleMapsOverlay library and tried several listeners, including map.addListener('tilesloaded' and google.maps.event.addListenerOnce(map, 'idle', as well as onDataLoad: (_) => { on the layer itself.

Maybe I'm just unclear about how to use MVTLayer.isLoaded to do this, but jcready's method is the only one I can get to work. I can play a nice timeline based on creating an MVTLayer from a Postgres database, and each step will complete loading the tiles before going onto the next step.

Very nice!

[alasarr]

I think you're looking for MVTLayer.isLoaded https://deck.gl/docs/api-reference/core/layer#isloaded

This prop is inherited from Layer and returns false true if visible tiles have been fetched.

[alasarr]

Sorry, I edited a typo in the last comment.

isLoaded returns false if loading, i.e., if tiles are getting fetched from the server.