JavaScript

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?

Answer

Apparently there is no other way (as of now) using mapbox-gl-js

https://github.com/mapbox/mapbox-gl-js/issues/8753#issuecomment-531284256

mapbox-gl-js: Vector tiles – most efficient way to Change/Add feature property at client-side?

Advertisement

Answer