Mapbox-gl-js: GeoJSON Styling not observing properties

[Craytor]

mapbox-gl-js version: v0.40.0

I am trying to style my GeoJSON layer from the styles built into the layer like all other web mapping packages use. I am seeing the polygon's but I am not seeing the correct color as defined in the GeoJSON properties section, also I am getting the following error.

layers.alerts.paint.fill-color: "fill-color" does not support interpolation syntax
Use an identity property function instead: `{ "type": "identity", "property": "fill"` }`.

Here is how I'm creating the layer:

this.$store.state.map.addLayer({
    'id': 'alerts',
    'type': 'fill',
    'source': {
        "type": "geojson",
        "data": "http://wxapi.dev/api/v1/alerts/search?alerts=SVR,FFW,TOR&geoJson=true"
    },
    'paint': {
        'fill-color': "{fill}",
        'fill-opacity': 0.8
    }
});

Example of one of the objects in GeoJSON:

        {
            "type": "Feature",
            "id": 223,
            "event": "Severe Thunderstorm Warning",
            "description": "The National Weather Service in Midland has issued a\n\n* Severe Thunderstorm Warning for...\nNortheastern Ector County in western Texas...\nSoutheastern Andrews County in western Texas...\nNorthwestern Midland County in western Texas...\nWest central Martin County in western Texas...\n\n* Until 630 PM CDT\n\n* At 526 PM CDT, a severe thunderstorm was located 11 miles southwest\nof Andrews, moving east at 25 mph.\n\nHAZARD...70 mph wind gusts and ping pong ball size hail.\n\nSOURCE...Radar indicated.\n\nIMPACT...People and animals outdoors will be injured. Expect hail\ndamage to roofs, siding, windows, and vehicles. Expect\nconsiderable tree damage. Wind damage is also likely to\nmobile homes, roofs, and outbuildings.\n\n* Locations impacted include...\nOdessa, Andrews, Mission Dorado, Odessa Schelemeyer Field, North\nCowden and Andrews County Airport.\n\nThis includes Interstate 20 between mile markers 122 and 122.",
            "counties": [
                "Midland",
                "Andrews",
                "Ector",
                "Martin"
            ],
            "state": null,
            "urgency": null,
            "severity": null,
            "certainty": null,
            "effective": "2017-09-25 22:26:32",
            "expires": "2017-09-25 23:30:00",
            "senderName": null,
            "properties": {
                "fill": "#e67e22",
                "fill-opacity": 0.4,
                "stroke": "#e67e22",
                "stroke-width": 2,
                "stroke-opacity": 0.75
            },
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                -102.84,
                                32.11
                            ],
                            [
                                -102.73,
                                32.34
                            ],
                            [
                                -102.17,
                                32.38
                            ],
                            [
                                -102.28,
                                31.87
                            ],
                            [
                                -102.84,
                                32.11
                            ]
                        ]
                    ]
                ]
            }
        },

Steps to Trigger Behavior

1. Create a GeoJSON layer from a source that has a properties section
2. Note how polygon's are not styled correctly

Expected Behavior

Polygon's would use properties defined in GeoJSON when created.

Actual Behavior

They are not respecting the data in properties.

[jfirebaugh]

Hi @Craytor, thanks for using Mapbox! The error message in this case describes what you need to do: use an identity property function instead of the interpolation synatax. That is, replace fill-color: '{fill}' with fill-color: { type: 'identity', property: 'fill' }.

[Craytor]

@jfirebaugh Thank you a ton! I was worried this wasn't a supported feature. Sorry for being a pest and asking nonsense questions that should have been on Stack Overflow.