React-native-mapbox-gl: [feature request] SymbolLayer fallback icons

[edwardgalligan]

Hi,

I've been trying to figure out how to do this, and I'm reaching the conclusion that this isn't possible with the current API. If it can be done, apologies, please correct me.

I have a set of different icons that I want to apply points in a GeoJSON layer based on properties in those Features. You can do this easily with {token} notation in the <SymbolLayer /> but I'm trying to find a way to provide a fallback icon for unmatched tokens.

Contrived/reduced example:

const featureCollection = {
    "type": "FeatureCollection",
    "features": [{
        "geometry": {...},
        "properties":{"marker_type":"one"}
    }, {
        "geometry": {...},
        "properties":{"marker_type":"two"}
    }, {
        "geometry": {...},
        "properties":{"marker_type":"three"}
    },]
};

const mapboxSymbolStyles = Mapbox.StyleSheet.create({
    iconRef: {
        iconImage: '{marker_type}',
    },
});
return <Mapbox.ShapeSource
    shape={featureCollection}
    images={{
        one: {uri: 'marker_icon_one'},
        two: {uri: 'marker_icon_two'},
        fallback_icon: {uri: 'default_marker_icon'}, // use this for non-matching tokens
    }}>
    <Mapbox.SymbolLayer style={mapboxSymbolStyles.iconRef} />
</Mapbox.ShapeSource>

[edwardgalligan]

Quick follow-up - my eventual solution is to do something like this whenever the GeoJSON is retrieved:

featureCollection.features = featureCollection.features.map(feature => {
    if (!['one', 'two'].includes(feature.properties.marker_type)) {
        feature.properties.marker_type = 'fallback_icon';
    }
    return feature;
});

But it would still be nice to have a configurable fallback mechanism for missing icons in the API.

[nitaliano]

This is a fair request and one we can timebox to see what's possible to do in such cases

[edwardgalligan]

Just to follow up with a consideration that may be relevant - one of the main problems with my current solution is that the array ['one', 'two'] must be known. In the contrived example above, this should be trivial as this equals the keys of the object passed as the images prop, but this exclusion method then precludes referencing maki icons (or any arbitrary SVG icon that may have been uploaded via Mapbox Studio).

Depending on how the implementation works though, I'm not sure if the above consideration is solvable at the library level - it may be something for the tilelive side I guess.

[nitaliano]

@lucideer yup, agree. I'm wondering if there is something in the native runtime styling API that we can expose to the JS to be able to set a default value, so when the c++ is rendering the code it will have all the information it needs to display the GL layer

Update:
Just noticed this in the iOS SDK https://github.com/mapbox/mapbox-gl-native/blob/ios-v3.7.1/platform/darwin/src/MGLStyleValue.h#L49 I'll check out the Android SDK it looks like you can pass in a default value as an option

[emiltejeda]

hey @nitaliano, do you have any update on this?

[gino8080]

any update on fallback icons?

[kristfal]

Hey,

in an effort to clean out old tickets, I'm closing this one. This library is no longer maintained by Mapbox, but we're more than happy to accept PRs to fix your issue.

For now, I'd recommend using the geoJSON based fallback approach as mentioned here.