Creating multiple sublayers within MVTLayer

[arthurgailes]

Hello,

I have an MVTLayer based on an MBTiles file that has multiple layers. I'd like to render these MBTiles layers as separate GeoJSONLayers within renderSubLayers. This raises two interesting problems:

1. Is there a way to filter the data (other than the datafilter extension) that prevents duplicating the data in each layer?
2. Creating multiple GeoJsonLayers causes an error, which I believe is related to auto-generating props.id in the MVTLayer. Is there a canonical way to achieve this?

Some pseudo-code:

const layer = new MVTLayer({
    data: `https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/{z}/{x}/{y}.vector.pbf?access_token=${MAPBOX_TOKEN}`,
    ...props,

    renderSubLayers: props => {
      // need to filter the layers based on properties (e.g. LayerName)
      const data1 = props.data.filter(someFunc1) 
      const data2 = props.data.filter(someFunc2) 

      return [
        new GeoJsonLayer(props, {data: data1, pickable: true}),
        new GeoJsonLayer(props, {data: data2, pickable: false});
    ]
    }
  });

Thank you!

[alasarr]

That's an interesting feature request we're considering for the next version. I think we should make MVTLayer more flexible to allow specify the SubLayer to use per each layer at the MVT.

Try to use compositeLayer.getSubLayerProps to set a different id for each geojsonLayer.

To filter the data you'll need need to set binary:false to get the geojson version of the tile

[chriszrc]

@alasarr I have an mvt layer of clusters, and I want to render the points as both circles and text labels with the count property. If I add 2 mvt layers, I'm requesting the tiles twice. Is there a way to reuse the data for the two types of layers?

[chriszrc]

@arthurgailes ah, thank you! I think this put me on the right track at least. I confirmed that I can pass in an array of GeoJsonLayers to renderSubLayers (which now I see is possible because MVTLayer inherits from the TileLayer) and the two layers are now sharing the same data:

new MVTLayer({
        data: process.env.MVT_API_URL + `/cluster.mvt`,
        id: "cluster1",
        renderSubLayers: (props) => {
          const { id } = props;
          return [
            new GeoJsonLayer({
              ...props,
              id: id + "-c",
              pointType: "circle",
              //...

But your comment seems to indicate that perhaps I should pursue an even more streamlined approach, whereby I return a single GeoJsonLayer but somehow override the points sublayer with two layers? I can't really see how I would do that?

[arthurgailes]

Use e.g. pointType: 'circle+text'. No need to return multiple geojsonlayers.

[chriszrc]

Ah, I see, I missed this all important line here:

"To use more than one type, join the names with +, for example pointType: 'icon+text'."

https://deck.gl/docs/api-reference/layers/geojson-layer#pointtype

And looks like I don't even need to mess with subLayerProps at all, nice!

[chriszrc]

With pointType: 'circle+text' the circles overlap correctly, but not the text labels, is that something you dealt with as well?
#5216 (comment)

[amuedespacher]

Is there a way to create separate collisionGroups for e.g. circle and text when using MVT and the CollisionFilterExtension (https://deck.gl/docs/api-reference/extensions/collision-filter-extension#layer-properties)? If I work with one collisionGroup only, I can only see circles, as most likely text gets hidden due to their proximity to the circles in my example.

If not, I guess working with separate sublayers for circle and text (and there defining the collisionGroup is the best approach (but with the drawback of (de-&)serialization as described here: https://deck.gl/docs/api-reference/geo-layers/mvt-layer#binary?