Image fallback expressions within paint properties

[SnailBones]

Closes https://github.com/mapbox/gl-js-team/issues/209

A coalesce expression wrapping image is currently the only way for an expression to check whether an icon sprite is present or absent in the style. In its simplest form, the check looks like this:

['coalesce', ['image', 'rocket-15'], 'missing']

Currently, this functionality is available in the text-field layout property, but not in paint properties. This PR adds it to most paint properties.

Example:

   layout: {
        "text-field": ["to-string",
            ["coalesce",
                ["image", ["concat", ["get", "icon"], "-15"]],
                "missing" // Display "missing" if icon is unavailable
            ]
        ]
    },
    paint: {
        "text-color": [ "case",
            ["==", "missing",
                ["to-string", ["coalesce",
                    ["image", ["concat", ["get", "icon"], "-15"]],
                    "missing"
                ]]
            ],
            'red', // if missing
            "blue" // if available
        ]
    }

Before:

After:

This is tested to work with the following paint properties:

• text-color
• text-opacity
• icon-color
• icon-opacity
• circle-color
• circle-radius
• circle-opacity
• line-color
• line-width
• line-opacity

Other paint properties don't work:

• line-dasharray always returns the fallback.
• fill-pattern throws an error.

The changes here do NOT add any additional support for layout properties. Most layout properties will continue to not recognize images and always return the fallback, including the following:

• text-size
• icon-size
• text-offset

Many of the failures in the commit history passed on npm run watch but on running tests in CI mode (npm run test). This was caused because one Worker is created to run the entire test suite, and Worker.isSpriteLoaded is a boolean set to true with the first call of spriteLoaded and thereafter initializing all worker sources with isSpriteLoaded incorrectly set to true. 13e6238 fixes that bug by changingi isSpriteLoaded to an object with mapIDs as keys.

Benchmark:

Launch Checklist

• fix the brokens
• write render tests
• post benchmark scores
• include before/after visuals or gifs if this PR includes visual changes
• manually test the debug page
• tagged @mapbox/gl-native if this PR includes shader changes or needs a native port
• apply changelog label ('bug', 'feature', 'docs', etc) or use the label 'skip changelog'
• add an entry inside this element for inclusion in the mapbox-gl-js changelog: <changelog>Added support for conditionally styling most paint properties according to the presence or absence of specific sprites in the style. </changelog>

@mapbox/gl-native @mapbox/map-design-team

[arindam1993]

Nice work on this @SnailBones
I think you're missing another spot where the availableImages needs to be passed in, and thats in updatePaintArrays(

mapbox-gl-js/src/data/program_configuration.js

Line 624 in da68d3d

updatePaintArrays(featureStates: FeatureStates, vtLayer: VectorTileLayer, layers: $ReadOnlyArray<TypedStyleLayer>, imagePositions: {[_: string]: ImagePosition}) {

).

This paint property update pipeline is used for feature-state which is used to do things like style a feature based on hove and for map.setPaintProperty(). In both of these cases, the update happens on the main-thread so the availableImages needs to come from a different place ( I think the ImageManager)

[SnailBones]

I think you're missing another spot where the availableImages needs to be passed in, and thats in updatePaintArrays

Fixed now, thanks @arindam1993!

[arindam1993]

Looks good to me now, just one more nit, otherwise its good to go!

[arindam1993]

Its a bit sketchy passing in a direct reference to this here, if something downstream mutates it it would result in weird sideffects. Could you add a getter to Style that returns a shallow copy of the array instead?

and to prevent excessive copies you could lift out the call to the getter to outside this loop.

[arindam1993]

LGTM!