CODEWITHSUNDEEP
mapbox-gl-js
jczaplew
jczaplew

Reputation: 1751

Composite property functions in Mapbox GL JS

Is there a way to use more than one property in a property function in Mapbox GL JS? In CartoCSS, I would do something like the following:

.states {
    [name="California"] {
       "polygon-fill": "blue"
    },
    [name_abbrev="WA"] {
       "polygon-fill": "green"
    }
}

In Mapbox GL JS it seems that I can style the fill-color based on either the property name -or- name_abbrev, but not a combination of two properties. For example:

'fill-color': {
    'property': 'name',
    'type': 'categorical',
    'stops': [
       ['California', 'blue']
    ]
},
'fill-color': {
    'property': 'name_abbrev',
    'type': 'categorical',
    'stops': [
       ['WA', 'green']
    ]
}

This results in the second fill-color overriding the first, and California would simply be green.

Upvotes: 1

Views: 529

Answers (1)

Lauren Budorick
Lauren Budorick

Reputation: 666

Mapbox GL does not support styling based on multiple properties within one layer. You could rework your data to combine the properties based on which you'd like to style into one layer, or you could create two layers and use filters to separate features, if your reasoning is that not all features have a certain layer/some need to use a fallback property: something like

{
    ... layer metadata (id, source, source-layer, type, etc) ...
    'filter': ['has', 'name'],
    'paint': {
        'fill-color': {
            'property': 'name',
            'type': 'categorical',
            'stops': [
                ['California', 'blue']
            ]
        }
    }
},
{
    ... layer metadata (id, source, source-layer, type, etc) ...
    'filter': ['!has', 'name'],
    'paint': {
        'fill-color': {
            'property': 'name_abbrev',
            'type': 'categorical',
            'stops': [
                ['WA', 'green']
            ]
        }
    }
}

Upvotes: 1

Related Questions