Different color for each polygon in multipolygon in mapbox - properties

Question

In the below code you will find a Multipolygon made of 3 polygons mapped in Mapbox.
I would like to fill the 3 polygons with differnet colors.
How do I do that?
If I use the property fill with 1 color, obvisouly it paints the 3 polygons with the same color.
I tried to pass a 3 element list to the 'fill-color' property but it threw an arror.
An easy solution would be to create 3 different layers but this is not viable in my case. In need to use the multipolygon
Any idea?
threeHouses = {
"type": "MultiPolygon",
"coordinates": [
[
[
[
115.813867,
-31.932177
],
[
115.813867,
-31.932177
],
[
115.813867,
-31.932087
],
[
115.813962,
-31.932087
],
[
115.813962,
-31.932124
],
[
115.814005,
-31.932124
],
[
115.814005,
-31.932168
],
[
115.813962,
-31.932168
],
[
115.813962,
-31.932177
],
[
115.813867,
-31.932177
]
]
], [
[
[
115.813962,
-31.932087
],
[
115.813894,
-31.932087
],
[
115.813894,
-31.932042
],
[
115.81391,
-31.932042
],
[
115.81391,
-31.931967
],
[
115.813984,
-31.931967
],
[
115.813984,
-31.932042
],
[
115.81401,
-31.932042
],
[
115.81401,
-31.932087
],
[
115.813962,
-31.932087
]
]
], [
[
[
115.81391,
-31.931967
],
[
115.81391,
-31.931931
],
[
115.813849,
-31.931931
],
[
115.813849,
-31.9319
],
[
115.81386,
-31.9319
],
[
115.81386,
-31.931868
],
[
115.813984,
-31.931868
],
[
115.813984,
-31.931967
],
[
115.81391,
-31.931967
]
]
]
]
}
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleGdsZWl0aCIsImEiOiIwZU0xU2RZIn0.z4BFqvJIf6fnzlIGQUmptQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [115.813867, -31.932177],
zoom: 17
});
map.on('load', function () {
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geoj,
'paint': {
'fill-color': '#189',
'fill-opacity': 0.8
}
});
});

Answer 1

You could exploit a data expression.
Here is an example - https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/
In your case it would look like this
let data = {
'type': 'FeatureCollection',
'features': [{
'type': 'Feature',
'properties': {
'color': 'red'
},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
115.813867,
-31.932177
],
[
115.813867,
-31.932177
],
[
115.813867,
-31.932087
],
[
115.813962,
-31.932087
],
[
115.813962,
-31.932124
],
[
115.814005,
-31.932124
],
[
115.814005,
-31.932168
],
[
115.813962,
-31.932168
],
[
115.813962,
-31.932177
],
[
115.813867,
-31.932177
]
]
]
}
}, {
'type': 'Feature',
'properties': {
'color': 'blue'
},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
115.813962,
-31.932087
],
[
115.813894,
-31.932087
],
[
115.813894,
-31.932042
],
[
115.81391,
-31.932042
],
[
115.81391,
-31.931967
],
[
115.813984,
-31.931967
],
[
115.813984,
-31.932042
],
[
115.81401,
-31.932042
],
[
115.81401,
-31.932087
],
[
115.813962,
-31.932087
]
]
]
}
}, {
'type': 'Feature',
'properties': {
'color': 'green'
},
'geometry': {
'type': 'Polygon',
'coordinates': [
[
[
115.81391,
-31.931967
],
[
115.81391,
-31.931931
],
[
115.813849,
-31.931931
],
[
115.813849,
-31.9319
],
[
115.81386,
-31.9319
],
[
115.81386,
-31.931868
],
[
115.813984,
-31.931868
],
[
115.813984,
-31.931967
],
[
115.81391,
-31.931967
]
]
]
}
}]
};
map.on('load', function () {
map.addLayer({
'id': 'maine',
'type': 'fill',
'source': {
'type': 'geojson',
'data': data
},
'layout': {},
'paint': {
'fill-color': ['get', 'color'],
'fill-opacity': 0.8
}
});
});