Different color for each polygon in multipolygon in mapbox

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
        }
    });
});