React-mapbox-gl: How to highlight line in <GeoJSONLayer/>

[suyesh]

I have this code, Lines are drawn. But I want to highlight a line when hovered or clicked.

        {Object.keys(this.props.pavements).length > 0 && (
          <GeoJSONLayer
            data={this.props.pavements}
            linePaint={{
              'line-color': ['get', 'color'],
              'line-width': 10,
            }}
            lineLayout={{
              'line-cap': 'round',
            }}
            lineOnClick={e => this.populateInfobox(e)}
            lineOnMouseEnter={e => this.populateInfobox(e)}
          />
        )}

What can I do in lineOnClick to change the color of the clicked line?

[loverdeveloper]

+1

[mklopets]

You can use React state to provide a different line-color property after the click or provide a different color property on the clicked feature.

[suyesh]

I did it by saving the color property of GeoJson in redux and changing the color of the selected feature

[mklopets]

I assume this can then be considered closed.

[rlueder]

The "Mapbox" way of doing this would be to use setFeatureState but that's not possible at the moment, see https://github.com/alex3165/react-mapbox-gl/issues/652