maps: iconImage does not work with ["get", "image"] expression if image attribute is the uri

Describe the bug I need to load iconImage from uri that stored in feature properties. It works fine If I pass an uri directly to iconImage attribute, like this iconImage: 'http://my.server.com/images/image1.jpg' But it does not work if I try to get uri from attribute: iconImage: ['get', 'iconUri'] I also tried to use image expression but it seems not implemented iconImage: ['image', ['get', 'iconUri']]

To Reproduce Create a ShapeSource with SymbollLayer

const markers = {
    type: "FeatureCollection",
    features: [{
        geometry: {
            type: "Point",
            coordinates: [37.6090439796016, 55.7199091654129],
       },
       type: "Feature",
       properties: {
           iconUri: 'http://my.server.com/images/image1.jpg',
       }
    }]
};

const layerStyles = {
    imageLevel1: {
        iconImage: ['get', 'iconUri'],
        iconSize: 0.8,
        iconAllowOverlap: true,
        iconIgnorePlacement: true,
    },
};

<MapboxGL.ShapeSource
    id='allMarkers'
    onPress={this.onPressMarker}
    shape={markers}
>
    <MapboxGL.SymbolLayer
        id="imagesInMarkersLevel1'
        filter={['==', 'isRecommended', 1]}
        style={layerStyles.imageLevel1}
    />
</MapboxGL.ShapeSource>

Expected behavior Image is visible

Versions (please complete the following information):

  • Platform: Android
  • Device: Mi 9 SE
  • Emulator/ Simulator: yes
  • OS: Android 9
  • SDK Version: 28
  • React Native Version: 0.61.5

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 18 (9 by maintainers)

Most upvoted comments

If I’m not mistaken fetching images from a url is also not available from the mapbox style spec of iconImage. The image has to come from the map sprite or added images.