Mapbox GL JS fill-pattern and data driven styling

Question

See Edit at bottom

I am trying to create a map using mapbox js that has a striped fill-pattern, similar to this image. My data consists of multiple polygons that have various properties. I want certain polygons to have different patterns based on a certain property called "currentSchool". I have been able to do very similar things using mapbox's fill-color property, but since I need these to be striped, I have to use the fill-pattern property and that is giving me some trouble.

When I use the code snippet below, everything works fine, and the map just displays every single polygon with the same striped pattern.

map.setPaintProperty("blocks", 'fill-pattern', ["case", 
    ["==", ['number', 300],
        300],
    "pattern",
    "pattern2"]);

In the snippet below, for the polygons' whose "currentSchool" property is equal to 300, I want their fill-pattern to be "pattern." For all other polygons, I want their fill-pattern to be pattern2.

map.setPaintProperty("blocks", 'fill-pattern', ["case", 
    ["==", ['number', ["get", "currentSchool"]],
        300],
    "pattern",
    "pattern2"]);

However, it is giving me the following error message:

Error: "layers.blocks.paint.fill-pattern: data expressions not supported"

So obviously the "get" expression is giving me trouble, though I'm not sure why. I've found two examples that use fill-pattern and a "get" expression (here and here), so I thought what I'm doing should work.

The mapbox JS documentation says the following under the "data expressions" heading:

However, some paint and layout properties do not yet support data expressions. The level of support is indicated by the "data-driven styling" row of the "SDK Support" table for each property. Data expressions with the feature-state operator are allowed only on paint properties.

Here (under the "fill-pattern" header) is the table that it is referring to. This table says that fill-pattern does support data-driven-styling, so I'm not sure why I am getting this error.

I've done a good bit of searching online and I've tried to link to relevant information.

Does anybody know how I can fix this error? Alternatively, if it really is impossible to use this sort of data-driven styling with mapbox's fill-pattern, does anyone know how I could achieve a map with polygons filled with a striped pattern (similar to image linked above)? Thank you very much.

Edit:

Ok, I am really dumb. I figured out what was going wrong. It turned out that I was just using an old mapbox version which didn't have support for data-driven styling. I started this project a while ago, dropped it, then picked it up again. I just assumed I was using the most up-to-date version.

Adriana Babakanian Adriana Babakanian · Accepted Answer · 2020-02-27T01:42:43

For anyone who may be experiencing similar errors, the Mapbox Expression reference is a useful resource for determining the Mapbox SDK versions that support each expression type. Each and every expression is listed here, along with a table detailing the supported SDK versions for Mapbox GL JS, the Android SDK, the iOS SDK, and the macOS SDK.

Glad to hear that you were able to resolve the error yourself, and hopefully this expression reference is a useful for similar issues going forward!

Mapbox GL JS fill-pattern and data driven styling

1 Answers