React-native-mapbox-gl: Performance compared to react-native-maps?

[danvass]

How does performance fair compared to react-native-maps? I'm doing some test with a large number of markers and re-rendering them seems to be near instantaneous on react-native-maps whereas it takes a few seconds with mapbox-gl. Would this mean that mapbox-gl generally has worse performance?

[kormang]

Do you use PointAnnotations?

[danvass]

@kormang No, I’m not. I’m rendering a custom component as a marker. EDIT: I am using PointAnnotation with custom components inside it.

[nitaliano]

@DVassilev could you drop your code in? This repo can render literally millions of points if you're using sources and layers

[danvass]

@nitaliano I'm using neither sources or layers. This is my render code inside the

{
                Object.keys(this.state.visibleStations).map((station) => {
                  station = this.state.visibleStations[station];
                  return (
                    <StationMarker
                      key={station.ServiceStationID}
                      station={station}
                      onPress={() => {
                        // function here
                      }} />
                  )
                })
}

is something like this (turns out I am using PointAnnotation):

<Mapbox.PointAnnotation
        id={station.Address}
        coordinate={[station.longitude, station.latitude]} 
        style={{ zIndex: zIndex, transform: [{scale: scale}]}}>
        <TouchableOpacity style={styles.innerContainer} onPress={this.props.onPress}>
          <View style={[styles.bubble, {backgroundColor: colour}]}>
            <View style={[{borderTopLeftRadius: 3, borderBottomLeftRadius: 3, borderWidth: 5, borderColor: 'white'}, favouriteTrim]}>
              <Image style={{width: 20, height: 20, backgroundColor: 'white'}} resizeMode={'contain'} source={Brands[station.Brand + '_small']} />
            </View>
            <Text style={styles.amount}>{this._getPrice()}</Text>
          </View>
          <View style={[styles.arrowBorder, {borderTopColor: colour}]} />
          <View style={[styles.arrow, {borderTopColor: colour}]} />
        </TouchableOpacity>
        {(this.props.favouriteStations[station.ServiceStationID]) ? <Icon name='ios-star' color='#FFC107' size={30} style={{position: 'absolute', top: -15, left: -10, transform:[{rotate: '-20 deg'}]}} /> : <View />}
      </Mapbox.PointAnnotation>

How would you recommend it be done?

[nitaliano]

PointAnnotation's are a legacy component, and in the newer version of the native SDK's atleast on Android they have been removed. You will run into performance issues with PointAnnotations. We haven't implemented the workaround that react-native-maps has implemented because there are no plans to keep this around. You'll want to use a ShapeSource along with a SymbolLayer and you'll be able to render as many points as you would like with native speeds

[danvass]

@nitaliano ah okay, any example of how my code above translates to those two components?

[nitaliano]

https://github.com/mapbox/react-native-mapbox-gl/blob/master/example/src/components/CustomIcon.js

[danvass]

@nitaliano that's just some custom styling, can you use that to make a custom component?

[nitaliano]

yeah, everything that you've done above can be done with a combination of layers

[danvass]

@nitaliano so ShapeSource is the new PointAnnotation and what is SymbolLayer? Do I use multiple of them or can I put Text and View components inside them?

[kormang]

@nitaliano I think everybody would benefit if you put some documentation or link to external documentation to README. The way I use layers and sources is basically searching for snippets of code in this repo, and trying to make sense of them. I have no idea what is possible and how to do what DVassilev needs. I've seen answer of type "Use layers and sources" not once. It is obvious people don't know about it, and even when they find out, they still don't know how to use it.

[danvass]

@kormang @nitaliano totally agree. The documentation is really quite sparse on some details around this haha. If you could provide a good example on how to best create custom markers (in my case, I'm showing text and an image on a nicely designed view that is all handled with styles). Perhaps it can also highlight the benefits of using ShapeSource as it can easily render heatmaps, clusters etc.

I'd be happy to write up some better documentation regarding best practice custom markers if you could at least provide the above. Thanks!

[danvass]

@nitaliano any chance to look at the above?

[acaraty]

up, I'm facing a lot of problems with PointAnnotation. I found this issue but i'm unabled to figure out how to use ShapeSource. I cannot find documentation or a useful example.

The link above is not really helpful, moreover the example is still using react-native 0.53 which is pretty old...

[RichardLindhout]

I find this library a lot faster with a lot of polygons + optimized it even more with using multipolygons to display polygons with the same color.

[onitzschke]

Please use Stackoverflow for discussion.