Single MVT for multiple layers

[JacobSolomonUCF]

Hello there!

Firstly thank you to all the contributors in this repo, we have found great success using DeckGL and even extending it for certain use cases.

Most of the layers we consume inside our application are MVT's and currently each data source has a separate data URL (e.g. ./layerA/{z}/{x}/{y}.pbf ./layerB/{z}/{x}/{y}.pbf). This works great but as we add more sources, the number of network requests triggered after each onViewStateChange is growing rapidly.

We just recently updated our tile server to support returning multiple layers (e.g. ./layerA,layerB/{z}/{x}/{y}.pbf). We are wondering what would be the best way for DeckGL to support this, I have found 2 solutions:

• Define a single MVT layer and return multiple layers inside renderSubLayers for each feature type (layerA, layerB)
  • This works but when changing the data URL we see a flicker as pointed out in (MVTLayer URL change causes flicker on tile replace #5502)
  • This also means layerB updates when layerA's updateTriggers change and visa-versa (Which makes sense, it's a single layer)
• The other solution is to use a single MVT layer as a 'mask' layer and use onViewportLoad (as I've seen mentioned in other discussions) to update a local state with each layer's features. Then render a layer for each dataset, in this case, 3 layers.

...,
renderSubLayers: () => null,
onViewportLoad: (tiles) => {
  const allFeatures = tiles.map((tile) => tile.dataInWGS84).flat();
  const newLayerA = [];
  const newLayerB = [];
  allFeatures.forEach((feature) => {
    feature?.properties.layerName === 'layerA' && newLayerA.push(feature);
    feature?.properties.layerName === 'layerB' && newLayerB.push(feature);
  });
 setLayerAData(newLayerA);
 setLayerBData(newLayerB);
},
...

This works better IMO than the first solution, no flickering & doesn't require all layers to update for each updateTriggers, but I'm starting to see weird errors in the console, even for layers unrelated to this 'mask' layer.

deck: error during initialization of PathLayer({id: 'layer-a-line-strings'}) Error: deck.gl: assertion failed.

I have put together a reproducible example which doesn't happen 100% of the time but if you pan around you should see it.

In short: Is this a bug, or am I not using it as intended? Or maybe I'm just digging myself a hole and shouldn't worry about the total number of requests?

Our main goal is to reduce the total number of network requests, mainly because of chrome's limit on the number of connections for http/1.1.

[Pessimistress]

I recommend you use renderSubLayers (the first option). onViewportLoad is called very frequently and changing data prop value can be expensive.

when changing the data URL we see a flicker

You should avoid changing the data URL if possible. It is recommended to turn layers off/on with the visible prop, see https://deck.gl/docs/developer-guide/performance#favor-layer-visibility-over-addition-and-removal

layerB updates when layerA's updateTriggers change and visa-versa

Not sure what you are doing to cause this, but in your renderSubLayers you can specify updateTriggers for each sub layer separately.

[JacobSolomonUCF]

Thanks for the suggestions @Pessimistress

We are trying to avoid changing the data URL, as it clears the tile cache etc, and we are using the visible prop.

Let's say we have a control panel with 10 MVT layers. If only 1 layer is visible, we are still fetching the tiles for the other 9 layers which are not visible. This seems to be just a 'feature' of MVTLayer.

From your suggestions, it seems the best way to cope with this is to add functionality in front of the control panel for selecting which layers to include in that panel (added to the map visible or not) and not include all available layers by default.

Not sure what you are doing to cause this, but in your renderSubLayers you can specify updateTriggers for each sub layer separately.

Below is a snippet where I am seeing this behavior. If the updateTriggers are applied to the subLayers only, it doesn't update when a updateTrigger changes. If they are applied to the parent MVTLayer it functions correctly, at the expense of updating both subLayers.

From what I can gather when either of the updateTriggers has changed, renderSubLayers is called and all data accessors are re-calculated

new MVTLayer({
    id: 'mvt-combined',
    data: `${url}/layerA,layerB/{z}/{x}/{y}.pbf`,
    renderSubLayers: (tile) => {
      const layerAFeatures = [];
      const layerBFeatures = [];
      tile.data.forEach((feature) => {
        feature?.properties.layerName === 'layerA' && layerAFeatures.push(feature);
        feature?.properties.layerName === 'layerB' && layerBFeatures.push(feature);
      });
      return [
        new IconLayer({
          ...tile,
          data: layerAFeatures,
          id: `${tile.id}-layerA`,
          visible: layerA.visible,
          getIcon: (d) => getLayerAIcon(d, layerA.legend),
          ...,
          // updateTriggers: {  // Doesn't update
          //   getIcon: [layerA.legend],
          // },
        }),
        new GeoJsonLayer({
          ...tile,
          id: `${tile.id}-layerB`,
          data: layerBFeatures,
          visible: layerB.visible,
          getLineColor: (d) => getLayerBLineColor(d, layerB.legend),
          lineWidthMinPixels: 10,
          // updateTriggers: {  // Doesn't update
          //   getLineColor: [layerB.legend],
          // },
        }),
      ];
    },
    updateTriggers: { // Updates correctly
      getIcon: [layerA.legend],
      getLineColor: [layerB.legend]
    },
  });

[ibesora]

Hi @JacobSolomonUCF it seems like having the updateTriggers property both at the main MVT layer and then specific ones at each one of the layers in renderSubLayer is the way to go.
Have you had any luck with resolving this? I don't think I'm seeing the same problem you have