mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Most efficient way to Change/Add feature property at client-side?

Open AnandSrini opened this issue 6 years ago • 7 comments

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?

P.S. the map is slow even if I don't have the expressions to set 'line-color'

AnandSrini avatar Sep 13 '19 09:09 AnandSrini

@AnandSrini Yes I too am finding a way to do this. Would appreciate some help

nishchalpoornadithya avatar Sep 13 '19 09:09 nishchalpoornadithya

Currently there's no better way to do this than setFeatureState unfortunately, but we are planning to work on a feature that would enable use cases like this — expect some news in a few weeks.

mourner avatar Sep 13 '19 15:09 mourner

See also #4261, #2671 which previously requested and discussed this feature.

andrewharvey avatar Sep 14 '19 09:09 andrewharvey

@mourner , @andrewharvey Thanks for the prompt response.!.!.!

I could use some help with the problem I am facing.

I am able to write SQL views in geoserver to do the merging at server side, but then I lose tile caching whenever the properties change. So it takes a lot of time to load the data. But once loaded, style expressions get evaluated pretty fast.!

Will this mapbox API help me with the load time and dynamic properties? https://docs.mapbox.com/help/glossary/datasets-api/

P.S. And suggestions from other platforms would also be helpful.

How would you approach this problem?

AnandSrini avatar Sep 16 '19 07:09 AnandSrini

@mourner , @andrewharvey also if we consider real time data, I don't think server side merging would be helpful.

But this is not the problem I deal with (for the time being) :-D

AnandSrini avatar Sep 16 '19 07:09 AnandSrini

You can close this issue since it's already known. But Looking forward to your response.

AnandSrini avatar Sep 16 '19 07:09 AnandSrini

we are planning to work on a feature that would enable use cases like this — expect some news in a few weeks

@mourner any updates on this? what was the feature?

controversial avatar May 09 '25 18:05 controversial