A mapbox-vector-tile layer is being served from GeoServer (around 500K features points and multiline strings).
I am using mapbox-gl-js to plot the layer at client side and I use expressions to change certain styles(e.g. line color)
I have an external API which will provide me a list of properties for each asset
[{ id: 123, prop1: 45, prop2: 78 }, ...]
Now, I want to assign these properties to the corresponding features, so that I will be able to write expressions based on 'prop1' to manipulate the style.
Expression:
[ 'let', 'load_value', ['to-number', ['get', 'prop1']],
[
'case',
[ 'all', ['>=', ['var', 'load_value'], 0], ['<', ['var', 'load_value'], 50] ], 'gray',
[ 'all', ['>=', ['var', 'load_value'], 50], ['<', ['var', 'load_value'], 70] ], 'yellow',
['>=', ['var', 'load_value'], 70], 'red',
'gray'
]
];
I have tried using setFeatureState method and it worked. Problem, the map is terribly slow after doing this. I believe this is because I need to set the feature state for 500K features.
Setting feature state:
data.forEach((datum) => {
this.map.setFeatureState({
source: 'geoserver-source',
sourceLayer: 'mvt-layer',
id: datum.id
}, {
prop1: datum.prop1
});
});
The color changes as per the given conditions. But the map itself becomes very slow after this. Is there any better way of mapping these properties from the client side?