SymbolLayer/PointAnnotation performance issue on Android

[vinsonxing]

I meet the performance issue when I am trying to render icons on the map over 10 icons on the Android platform, which works well on iOS, even the icon count is over 50 and more. I tried SymbolLayer and PointAnnotation way and got the same result. Do you have any idea about my issues? Thanks

My usage as:

---

const BLUE = require('../../../../images/site-map-blue.png'); const BLUE_SELECT = require('../../../../images/site-map-blue-selected.png'); const GREEN = require('../../../../images/site-map-green.png'); const GREEN_SELECT = require('../../../../images/site-map-green-selected.png'); const RED = require('../../../../images/site-map-red.png'); const RED_SELECT = require('../../../../images/site-map-red-selected.png'); const YELLOW = require('../../../../images/site-map-yellow.png'); const YELLOW_SELECT = require('../../../../images/site-map-yellow-selected.png'); const GREY = require('../../../../images/site-map-grey.png'); const GREY_SELECT = require('../../../../images/site-map-grey-selected.png');

<MapboxGL.ShapeSource id='symbolLocationSource' ref={(ref) => { this.mapShape = ref; }} hitbox={{ width: StyleUtils.normalizedSize(0), height: StyleUtils.normalizedSize(0) }} onPress={this.props.onPress} images={{ // eslint-disable-next-line max-len BLUE, BLUE_SELECT, GREEN, GREEN_SELECT, RED, RED_SELECT, YELLOW, YELLOW_SELECT, GREY, GREY_SELECT }} shape={this.state.featureCollection}

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

const styles = MapboxGL.StyleSheet.create({ icon: { iconImage: '{icon}', iconAllowOverlap: true, iconSize: MapboxGL.StyleSheet.identity('iconSize'), iconOffset: [0, -70], iconKeepUpright: true }, });

---

<MapboxGL.PointAnnotation key={id} id={id} title={marker.name} coordinate={coordinate} anchor={{ x: 0.5, y: 1.0 }}

<IconWrapper onPress={() => this.onAnnotationSelected(i, marker)}

<MapMarkerIcon ref={(ref) => { icons.push(ref); }} color={marker.color} selected={marker.selected} /> <MapboxGL.Callout style={{ display: 'none' }} containerStyle={{ display: 'none' }} contentStyle={{ display: 'none' }} tipStyle={{ display: 'none' }} textStyle={{ display: 'none' }} /> </MapboxGL.PointAnnotation>

[sfratini]

Post the rest of the Component, specially how you are modifying the feature collection in the state

[vinsonxing]

@sfratini Thanks for your reply. Here is my demo code https://github.com/vinsonxing/mapbox-issue

[emmx]

Could you fix the performance issue you had? Did you find any performance difference between PointAnnotation and SymbolLayer?