React-native-mapbox-gl: Custom Marker disappear on pan and zoom

[claudioviola]

When I pan or zoom my map my custom marker disappear and appears.

We have 3 markers in this map but it seems only 1 is visible at once

This my config:
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.4",
"@mapbox/geo-viewport": "^0.2.2",
"@mapbox/mapbox-sdk": "^0.4.1",
"@mapbox/react-native-mapbox-gl": "git+https://github.com/mapbox/react-native-mapbox-gl#release/6.1.2",
"mapbox": "^1.0.0-beta9",

renderAnnotations = (annotations)=> {
                         ....
        return annotations.map( (marker, index) =>
            <MapboxGL.PointAnnotation
                key={index}
                id={`pointAnnotation_${index}`}
                title="Test"
                coordinate={marker.coordinate}
                onDeselected={marker.onDeselected}
                onSelected={marker.onSelected}>
                <View style={styles.annotationContainer}>
                    <View style={styles.annotationFill} />
                </View>
                <MapboxGL.Callout title={marker.title} />
            </MapboxGL.PointAnnotation>
        );
    };
}
.....

<MapboxGL.MapView
onPress={this.onPress}
showUserLocation={true}
zoomLevel={12}
pnUserLocationUpdate={onUserLocationUpdate}
userTrackingMode={MapboxGL.UserTrackingModes.Follow}
styleURL={MapboxGL.StyleURL.Dark}
style={sheet.matchParent}
>
    {this.renderAnnotations(annotations)}

    {origin && destination &&
        <MapboxDirections
            origin={origin}
            destination={destination}
        />
    }

</MapboxGL.MapView>

[claudioviola]

I figured out that this happen when are more then one markers.

I tried only with one marker and it doesn't disappear.

[ReversedK]

Same problem here. Any solution?
Edit: contrary to other posters who use annotations I encounter this problem using Symbol layers and custom icons. This is a BIG problem, a mapping library that cannot display markers reliably is useless in production.

[claudioviola]

Not at the moment sorry

Il giorno mer 21 nov 2018, 19:18 ReversedK [e-mail] ha
scritto:

Same problem here. Any solution?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/react-native-mapbox-gl/issues/1425#issuecomment-440763779,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AGYTOg8_xJsCWjrWxJgnhoyPBRaS3kCfks5uxZkLgaJpZM4Yl3-q
.

[ReversedK]

Ok thanks for the update Claudio!

[jccarrillo]

Strangely I have seen this issue come and go but only in Android. Here is my current code - which works.

const _Points = ({ points }) => points.map((props, i) => 
<_Point key={ i } id={ `pointAnnotation_${ i }` } { ...props } />);

const _Point = ({ id, longitude, latitude, title }) =>
    <MapboxGL.PointAnnotation
        coordinate={ [longitude, latitude] }
        id={ id }
        title={ title }>
        <Icon color="black" name="location-on" size={ 25 } />
        <MapboxGL.Callout title={ title } />
    </MapboxGL.PointAnnotation>;

package.json

    "@mapbox/react-native-mapbox-gl": "^6.1.3",
    "react": "16.8.3",
    "react-native": "^0.59.5",

[jccarrillo]

@claudioviola I hit a snag when I used titles and callouts with same names. I wonder if you ensure that the title in your PointAnnotation and Callout objects are unique... perhaps that would work for you. For now, I'm removing them...