React-native-mapbox-gl: ShapeSource and SymbolLayer dont render

[Pierre-Green]

Hello I have this code but no SymbolLayer render:

import React, {Component} from 'react'
import {connect} from 'react-redux'
import MapboxGL from '@mapbox/react-native-mapbox-gl'
import { Platform } from 'react-native'

import * as actions from '../../store/actions'

let createHandlers = (dispatch) => {
    let loadMapTales = () => {
        dispatch(actions.loadMapTales())
    }

    return {
        loadMapTales
    }
}

let mapStateToProps = (state) => {
    return {
        tales: state.map.talesCollection
    }
}

class MarkersCluster extends Component {
    constructor (props) {
        super(props)
        this.handlers = createHandlers(this.props.dispatch)
        console.log(this.props.tales)
    }

    render () {
        return (
            <MapboxGL.ShapeSource
                id='talesMarkers'
                shape={this.props.tales}
                cluster
                clusterMaxZoomLevel={14}
                clusterRadius={50}
            >
                <MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon}/>
            </MapboxGL.ShapeSource>
        )
    }
}

const styles = MapboxGL.StyleSheet.create({
    icon: {
        iconImage: '{icon}',
        iconAllowOverlap: true,
        iconIgnorePlacement: true,
        iconSize: Platform.OS === 'android' ? 1 : 0.5
    }
})

export default connect(mapStateToProps)(MarkersCluster)

And my props tales got his value:

    talesCollection: {
        type: 'TaleCollection',
        features: [
            {
                type: 'Tale',
                id: '1',
                properties:
                    {
                        icon: 'airport'
                    }
                ,
                geometry: {
                    type: 'Point',
                    coordinates:
                        [-45, 42]
                }
            },
            {
                type: 'Tale',
                id: '2',
                properties: {
                    icon: 'airport'
                },
                geometry: {
                    type: 'Point',
                    coordinates:
                        [-42, 45]
                }
            }
        ]
    }

The map is working I have no errors but no marker render.

I have another question that is maybe not in the good place but

<MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon}/>

I would like to know if it's possible to get all the id with this syntax ? I guess it's not the good syntax but i can't check until my markers don't render.

Thank You !

PS: Sorry for my bad english

EDIT:

Actually I have this error in the android debugger
Error setting geo json: TaleCollection geometry must have a coordinates property

But I have set the property coordinates so it doesn't make sense 🤔

[nitaliano]

Try renaming TaleCollection to FeatureCollection and Tale to Feature in your GeoJSON

[Pierre-Green]

I still have the same error :/

[Pierre-Green]

It has to come from this portion of code:

render () {
        return (
            <MapboxGL.ShapeSource
                id='talesMarkers'
                shape={this.props.tales}
            >
                <MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon}/>
            </MapboxGL.ShapeSource>
        )
    }

Because I debuged this.props.tales and it gave me

{ type: 'FeatureCollection',
                   features: 
                    [ { type: 'Feature',
                        id: '1',
                        properties: { icon: 'airport' },
                        geometry: { type: 'Point', coordinates: [ -45.32, 42.32 ] } },
                      { type: 'Feature',
                        id: '2',
                        properties: { icon: 'airport' },
                        geometry: { type: 'Point', coordinates: [ -42.54, 45.32 ] } } ] }

[Pierre-Green]

If you need this is my mapview component

Map.js

import React, { Component } from 'react'
import MapboxGL from '@mapbox/react-native-mapbox-gl'
import { StyleSheet } from 'react-native';
import MarkersCluster from './MarkersCluster'

export default class Map extends Component {
    render() {
        return (
            <MapboxGL.MapView
                zoomLevel={2}
                centerCoordinate={[-35.15165038, 40.62357280]}
                styleURL={MapboxGL.StyleURL.Light}
                style={styles.map}
            >
                <MarkersCluster/>
            </MapboxGL.MapView>
        )
    }
}

const styles = StyleSheet.create({
    map: {
        display: 'flex',
        flex: 2
    }
})

MarkersCluster.js

import React, {Component} from 'react'
import {connect} from 'react-redux'
import MapboxGL from '@mapbox/react-native-mapbox-gl'
import { Platform } from 'react-native'

import * as actions from '../../store/actions'

let createHandlers = (dispatch) => {
    let loadMapTales = () => {
        dispatch(actions.loadMapTales())
    }

    return {
        loadMapTales
    }
}

let mapStateToProps = (state) => {
    return {
        tales: state.map.talesCollection
    }
}

class MarkersCluster extends Component {
    constructor (props) {
        super(props)
        this.handlers = createHandlers(this.props.dispatch)
    }

    render () {
        console.log(this.props.tales)
        return (
            <MapboxGL.ShapeSource
                id='talesMarkers'
                shape={this.props.tales}
            >
                <MapboxGL.SymbolLayer key='{id}' id='{id}' style={styles.icon}/>
            </MapboxGL.ShapeSource>
        )
    }
}

const styles = MapboxGL.StyleSheet.create({
    icon: {
        iconImage: '{icon}',
        iconAllowOverlap: true,
        iconIgnorePlacement: true,
        iconSize: Platform.OS === 'android' ? 1 : 0.5
    }
})

export default connect(mapStateToProps)(MarkersCluster)

the console.log() print the raw json on the previous message

[nitaliano]

@PieerotGG I just added that GeoJSON you provided into the example application and I'm seeing them render. I noticed that the centerCoordinate on the map is not near the actual points in your GeoJSON try zooming out and you should see them, also make sure your points are in [longitude, latitude] format. I'm going to close this issue out but we can continue to discuss in here

[nitaliano]

@PieerotGG also I noticed that airport is not a default icon in mapbox studio try airport-15

[Pierre-Green]

@nitaliano Thank you very much the error was because of the airport instead of airport 15 😆

[Pierre-Green]

@nitaliano Sorry to ask so many question but is it possible to know which of the elements of the ShapeSource has been clicked ? Thank you

[nitaliano]

you can add an onPress on your shape source and it will return a React event so
onPress (e) { const feature = e.nativeEvent.payload; } will be the clicked Feature

[nitaliano]

not 100% sure if Android will return your id, but iOS should

[Pierre-Green]

Thank you very much it's perfectly working on android :D