Mapbox-gl-js: Ability to style each feature in a GeoJson layer

Created on 15 Jul 2016  路  2Comments  路  Source: mapbox/mapbox-gl-js

Consider I am having a GeoJson Layer with 5 features, I am able to set a style to the total layer only, I need to control the style for each feature of that layer dynamically not by a GeoJson Property while adding the layer, should be programmatic(for example change the colour of the 1st feature of the GeoJson Layer in a click event).

Most helpful comment

There are two ways to go about this:

1) Create a layer per feature. Use filters to only draw one feature per layer. Style each layer independently.

2) Use data-driven styling to style features based on their properties https://www.mapbox.com/blog/data-driven-styling. This feature is still rolling out and only supported for certain style properties. See the style spec for compatibility information.

All 2 comments

There are two ways to go about this:

1) Create a layer per feature. Use filters to only draw one feature per layer. Style each layer independently.

2) Use data-driven styling to style features based on their properties https://www.mapbox.com/blog/data-driven-styling. This feature is still rolling out and only supported for certain style properties. See the style spec for compatibility information.

for example change the colour of the 1st feature of the GeoJson Layer in a click event

See https://www.mapbox.com/mapbox-gl-js/example/hover-styles/ for a way to accomplish this specific goal.

Other plans we have in the pipeline for addressing these types of use cases include #200 and #2874.

Closing here since we have existing issues that cover this ground.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PBrockmann picture PBrockmann  路  3Comments

rigoneri picture rigoneri  路  3Comments

bgentry picture bgentry  路  3Comments

stevage picture stevage  路  3Comments

Scarysize picture Scarysize  路  3Comments