Symbol layer(iconImage (styling )) is not able to load remote images through a url.

[aurimusblack]

Symbol layer(iconImage style) is not able to load remote images through a url.

TypeError: expected dynamic type 'string', but had type 'object'.

[nitaliano]

can you show me how you are setting your image?

[aurimusblack]

@nitaliano

const markerStyles = MapboxGL.StyleSheet.create({
  icon:{
    iconImage : {uri: "url here"},
    iconSize: 0.7
  }
})

<Marker id={marker} iconId={icon} onPress={this.onPress} style={markerStyles.icon} shape={this.state.featureCollection[j]}/>

marker is a custom component that I created:
class Marker extends Component<{}> {
  constructor(props) {
    super(props);
    this.onPressWrapper = this.onPressWrapper.bind(this)
  }
  onPressWrapper(){
    this.props.onPress(this._smap.props.shape.features[0].geometry.coordinates);
  }

  render(){
    return(
      <MapboxGL.ShapeSource
        id={this.props.id}
        shape={this.props.shape}
        cluster={true}
        onPress={this.onPressWrapper}
        ref={(ref) => (this._smap = ref)}
        clusterRadius={100}
        >
          <MapboxGL.SymbolLayer id={this.props.iconId} style={this.props.style}/>
      </MapboxGL.ShapeSource>
    );
  }
}

[vamsiraju1]

@nitaliano

I am also facing the same issue .Can you please help me out

[rajkamal3]

I'm facing the same issue. Please help me.

[DipanshKhandelwal]

@nitaliano can you help on this? Thanks !!

[slaivyn]

I had the same problem and fixed it placing the url in the images object Example:

const markerStyles = MapboxGL.StyleSheet.create({
  icon:{
    iconImage : 'myImage',
    ...
  }
})

class Marker extends Component<{}> {
  ...
  render(){
    return(
      <MapboxGL.ShapeSource
        id={this.props.id}
        shape={this.props.shape}
        images={myImage: {uri: "url here"}}
        ...
        >
          <MapboxGL.SymbolLayer id={this.props.iconId} style={this.props.style}/>
      </MapboxGL.ShapeSource>
    );
  }
}

[wywzixin]

Excuse me! how to set the base64 image

[wywzixin]

I had the same problem and fixed it placing the url in the images object Example:

const markerStyles = MapboxGL.StyleSheet.create({
  icon:{
    iconImage : 'myImage',
    ...
  }
})

class Marker extends Component<{}> {
  ...
  render(){
    return(
      <MapboxGL.ShapeSource
        id={this.props.id}
        shape={this.props.shape}
        images={myImage: {uri: "url here"}}
        ...
        >
          <MapboxGL.SymbolLayer id={this.props.iconId} style={this.props.style}/>
      </MapboxGL.ShapeSource>
    );
  }
}

Excuse me! how to set the base64 image

[Madhavan-reactiveworks]

@gisert Have you got any solution?

[mojtabadarzi]

how can implement dynamic image , like map on array for markers ?

array.map((item) = > {
  return <Marker image={item.icon} ... />
 }