Mapbox JS Runtime Styling from collection

Question

So I have a Mapbox Tileset I've uploaded with census-block information for the US. Each geometry in the tileset has a property called GeoID, that I am trying to apply a style to based on another collection I have.

The collection is an array objects with this format: [{geoid: string, weight: number}, {geoid: string, weight: number},...]

I want to match the GeoIDs from the array to the layer from the tileset and color it based on the corresponding weight property from that object. Weight is a number between 0 and 1. I have tried searching the documentation on runtime styling and expressions from Mapbox, but I can't find anything about extrapolating data from a collection and conditionally applying it to the right geometries from a tileset.

Scarysize Scarysize · Accepted Answer · 2019-01-15T20:28:24

You can generate an expression from your list of weights and than pass it to the layer your want to style:

const weights = [
    {geoid: 1, weight: 10},
    {geoid: 2, weight: 5},
    {geoid: 3, weight: 30},
];
const cases = weights.map(weight => {
    const condition = ['==', ['get', 'geoid'], weight.geoid];
    const output = getColor(weight.weight);

    return [
        condition,
        output
    ];
});
const expresion = ['case',
    ...cases.reduce((flat, conditionAndOutput) => [...flat, ...conditionAndOutput]),
    '<default-color>'
];

/*
Will result in:
    [
        "case",
        [
        "==",
        [
            "get",
            "geoid"
        ],
        1
        ],
        "rgb(255, 255, 255)",
        [
        "==",
        [
            "get",
            "geoid"
        ],
        2
        ],
        "rgb(255, 255, 255)",
        [
        "==",
        [
            "get",
            "geoid"
        ],
        3
        ],
        "rgb(255, 255, 255)",
        "<default-color>"
    ]
*/

Mapbox JS Runtime Styling from collection

1 Answers