react-native mapbox symbol layer render icons from URI dynamically

Question

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

If you want to show markers inside map you can also show markers dynamically using . If you want to try please take a look at my solution. Thanks. https://stackoverflow.com/a/72301745/14563376 — Ubaid, May 19 '22 at 09:12

score 2 · Answer 1 · answered Feb 07 '20 at 05:26

2

In react-native-mapbox-gl 7.0 if iconImage is constant then you can use url-s. But if it's an expression it should be a key in images dict of Images, <Images images={images} />.

See https://github.com/react-native-mapbox-gl/maps/issues/652

answered Feb 07 '20 at 05:26

mfazekas

5,589
1
34
25

react-native mapbox symbol layer render icons from URI dynamically

1 Answers1