I need to show custom icons in my places, that icons are loaded from a specific URL dynamically. Here is my code.
const PlacesMarker = props => {
const { places } = props
const [geoJson, setGeoJson] = useState([])
useEffect(() => {
if (places)
renderPlaces(places)
}, [places])
const renderPlaces = (places) => {
let features = places.content.map((item) => {
return {
type: "Feature",
id: item.id,
properties: {
id: item.id,
icon: item.type.iconUri,
name: item.name,
type: item.type.name
},
geometry: {
type: "Point",
coordinates: [item.location.lon, item.location.lat],
},
}
})
setGeoJson(features)
}
return (
<View>
{geoJson.length > 0 ?
<MapboxGL.ShapeSource id={'places-map'}
shape={{ type: "FeatureCollection", features: geoJson }}>
<MapboxGL.SymbolLayer
id={Math.random().toString()}
style={{
iconImage: ['get', 'icon']
iconAllowOverlap: true,
// iconSize: 0.80,
iconIgnorePlacement: true,
textField: ['get', 'icon']
}}
/>
</MapboxGL.ShapeSource> : null
}
</View >
)
}
export default PlacesMarker
In the style, I used the expression 'get', and it works, because I set the textField with Icon URI value and it shows the uri. However if I set the iconImage property with the URI, then the icon appear successfully