Is there a way to color GeoJSON layer with its attribute?

[Sonia-96]

Hello,

I am now using a GeoJSON layer to visualize the temperature of each state. I have included the temperature data in the geojson file as a property temp. I want to fill each state with different color based on their temp value. The result would be something like this:

I know I can use get_vector_style_map(cls) to set the fill color. But from the tutorial example, I only know how to set the color according to the state shape. Is there any way I can access to the temp property and set the color in this method?

The other way I can think of is to use JavaScript, in which I can select each state element and their temp attribute then set their fill color. But the problem is I don't know the id or class of these elements or attributes.

Could you tell me which way work and give me some ideas on how to implement it?

Thank you!

[swainn]

Hey @Sonia-96 thanks for your question. As you've discovered, the MapLayout.get_vector_style_map() method is great for styling features by type, but not really much beyond that. For styling by attribute, I'd recommend using custom JavaScript. Behind the scenes, the MapLayout is using the MapGizmo and both provide JavaScript APIs. The MapGizmo provides a TETHYS_MAP_VIEW.getMap() method that returns the underlying OpenLayers map object. Using the map object, you can get access to the layers and set the styles accordingly.

[swainn]

Checkout the OpenLayers examples: https://openlayers.org/en/latest/examples/

The GeoJSON example uses a style function to apply styles based on type, but you should be able to adapt it to apply styles based on feature properties / attributes.

[Sonia-96]

Thank you @swainn, it works!