Enriched Mvt layer

[tomeronen]

Enriched Mvt layer

Hello i would love to share with you and hear what you think about a solution i am implementing, and currently is in the POC stage. Would love feedback, and hope maybe it will also help somebody else.

The Need

We have a product in which we are showing a wide range of attributes on us regions. The user can choose from thousands of diffrent attributes (numerical values) and see them visualized on the map. Some of the data is pre calculated and some is calculated on request time.

The Solution

Before request time:
Create static MVT tiles for the regions data (stored in mbtiles, folder or pmtiles). When you create the static files also create for each tile index all the featrue ids that are in that tile index.

{
  0_0_0: [id_1, id_2,...]
   ....
   ....
  z_x_y: featureId[]
}

On Request time in the client use EnrichedMVTLayer which extends the MVT layer:

class EnrichedMVTLayer extends MVTLayer<any, any> {
    constructor(props) {
        super(props);
    }
    async getTileData(tile: any) {
        const getTileDataPromise = super.getTileData(tile);
        const enrichedPromise = getEnrichedData(tile);
        const [tileData, enrichData] = await Promise.all([getTileDataPromise, enrichedPromise]);
        Object.keys(enrichData).forEach((key) => {
            // in our use case there are only polygons but can be made more generic 
            tileData.polygons.numericProps[key] = {
                value: new Float32Array(enrichData[key]),
                size: 1,
            };
        });
        return tileData;
    }
}

/***
A function that gets tile object and returns an object containing attributes as keys, and all values as a list. 
The function calls a backend service that has access to the tile index to feature ids map. And the values are returned 
in the same order they are in the tile data.
***/
function getEnrichedData(){}

Its still in a POC stage, but is looking good. This allows us to pre calculate, simplify and compress the static regions data, and in request time only get the needed dynamic attributes. The tile index to features id lets us quickly know what features are needed for each index, and because the order is the same we can just add it to the numericProps object.

Would love to hear your thoughts, and if it turns out good to share with others that have similar needs.