React-native-mapbox-gl: The app is freeze when many PointAnnotations are rendering

[phuochau]

Hi,

Currently, we load annotations data from API by async and render MapboxGL.PointAnnotation into the MapView, but the app is freeze when rendering. You can see the video in below:

https://youtu.be/9Ai_XP2_rok

And see the code of rendering in below:

renderPhotos () {
    const { myPhotos } = this.state
    if (!myPhotos) return null
    if (myPhotos.length === 0) return null

    return myPhotos.map(p => {
      return (
        <MapboxGL.PointAnnotation
          key={p.Id}
          id={p.Id.toString()}
          coordinate={[p.Long, p.Lat]}
        >
          <TouchableOpacity style={styles.btnPointAnnotationPhoto} onPress={() => this.onViewPhoto(p)}>
            <Image
              source={{ uri: 'photo' }}
              style={{ width: 15, height: 15 }}
            />
          </TouchableOpacity>
        </MapboxGL.PointAnnotation>
      )
    })
  }

Does anyone have any idea about it? Thanks

[nitaliano]

Have you tried using a ShapeSource with a SymbolLayer? PointAnnotations are our legacy way of adding markers to a map, with sources and layers you can add millions of points. If you still want to go the Point Annotation route you should try storing the children react views in the top of the component so you're not recreating ImageViews for every annotation

[phuochau]

@nitaliano I have switched to use ShapeSource and SymbolLayer and it works fast right now, thanks very much bro!

[jsina]

@phuochau Hey, could you please tell me how could you user ShapeSource instead of PointAnnotation? I want to show multiple marks on map, so PointAnnotation take a coordinate but ShapeSource and PointAnnotation doesn't take.

[aurimusblack]

@jsina

id="exampleShapeSource"
shape={featureCollection}
cluster={false}
>

var featureCollection = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
id: '..',
geometry: {
type: 'Point',
coordinates: [29.954, 59.772],
},
},
... other points
]
};

const MarkerStyles = MapboxGL.StyleSheet.create({
icon: {
iconImage: black,
iconSize: 0.075,
},
}

[jsina]

@aurimusblack thanks for your response. so I have to add my multiple coordinate on shape props?
I could not find some documentation about FeatureCollection. could you please send me some info about it of link?

[aurimusblack]

@jsina you can add multiple points in the form of features to the features array inside feature collection

[jsina]

@aurimusblack what is the best practice to use PointAnnotation? is it bad to render multiple marks with it?

[aurimusblack]

@jsina I tried using point annotations before i discovered shape source. They are cool expect they tend to move when you scroll around and thats annoying

[jsina]

@aurimusblack I've been used it like this but the annotations haven't shown. issue

[jsina]

@aurimusblack is there any way to have some box like callout in annotation when using SymbolLayer?

[nonameolsson]

So to get the same result with a Callout, how could we do it without using a PointAnnotation?

[goodryanboy]

Can someone help me how to put call out inside the the shapesource?

[edenkras]

Hi @phuochau how did you implement the callout with ShapeSource and SymbolLayer?