Mapbox GL JS - Change the color of selected 3D buildings

Viewed 146

in my database I have ID numbers (mapbox) of about a million buildings, each building is associated with a category. Buildings are scattered all over the world. There can be many more buildings, so the data should be downloaded dynamically (json, geojson, etc.).

I would like to change the color of 3D buildings (fill-extrusion-color) depending on the category and add an icon next to it.

I have been browsing the documentation but I am not able to combine it into a solution.

I am asking for help as I should solve this problem.

Currently, it only controls color like this:

'fill-extrusion-color': [ "case", [ "! =", ["get", "min_height"], 0 ], "hsl (224, 18%, 56%)", [ "match", ["get", "type"], ["building: part"], true, false ], "hsl (224, 25%, 38%)", [ "interpolate", ["linear"], ["get", "height"], 0, "hsl (224.47%, 29%)", twenty, "hsl (224.61%, 33%)", 50, "hsl (224.53%, 48%)", 400, "hsl (224, 83%, 72%)" ] ]
1 Answers

Can you try:

'fill-extrusion-color': [ "case", [ "!=", ["get", "min_height"], 0 ], "#7b85a3", [ "match", ["get", "type"], ["building: part"], true, false ], "#495679", [ "interpolate", ["linear"], ["get", "height"], 0, "hsl (224, 47%, 29%)", 12, "hsl (224, 61%, 33%)", 50, "hsl (224, 53%, 48%)", 400, "hsl (224, 83%, 72%)" ] ]

Related