[iOS] Low performance with 100+ markers with identical image

[ericapply]

Description

I am using react-native-maps to draw about 100 markers on the map.
Each marker is using same Image

Reproduction Steps and Sample Code

export default class Main extends Component {
  render() {
    return (
      <MapView style={StyleSheet.absoluteFill}>
        { coordinates.map(coordinate => {
              return (
                <Marker
                  key={coordinate.id}
                  coordinate={coordinate}
                  image={images.marker}
                />
              );
            })}
      </MapView>
    )
  }
}

Possible Solution

Re-using UIImage
http://stackoverflow.com/questions/25555778/optimising-custom-marker-image-performance-with-google-maps-sdk-for-ios

Currently AIRMapMarker.m and AIRGoogleMapMarker.m does not re-use UIImage and constantly allocates a new one. This is a huge performance hit when you want to cluster markers and want to pan around (constant allocation and garbage collection of UIImage).

Currently there is a way to provide 'image' prop directly to Marker (the way I am doing in the code above). There should be a dictionary of <NSString, UIImage> for MapView and re-use the UIImage when imageSrc is same.

Additional Information

• React Native version: ["0.41.2"]
• react-native-maps: ["^0.13.0"]
• Platform: [iOS]
• Development Operating System: [MacOS]
• Dev tools: [Xcode: 8.3, iPhone 7(10.3)]

[hughvidos]

#1031

[hughvidos]

#1125

[ericapply]

@hughvidos I have found and confirmed that the lagging is due to the sheer number of UIViews being created for every marker regardless of rather they were using same image or not. I have tried re-using UIImage and 750+ markers gives me solid 55+ FPS even when panning around.

[ericapply]

#1187

[vinceyuan]

@ericapply Could you please take a look at this issue? #1031 Thanks

[ericapply]

@vinceyuan Can you try to use my PR and try to see if it still causes high CPU %?
"react-native-maps": "ericapply/react-native-maps#d6e86de",
You must use following way in order to take advantage of my optimization
<MapView.Marker coordinate={coordinate} anchor={{x: 0.65, y: 1}} image={imageSrc}/>

[vinceyuan]

@ericapply I tried it. CPU % is still high. Because there is only one marker, reusing view does not help #1031
Anyway, thanks!

[mtt87]

Even with a few markers it's using a >75% of CPU.
I'm in the same situation where I need to use custom map style and I need to use Google Maps.

Did anyone find a workaround?

Thank you

[grundmanise]

Same here.. even with 1 marker <MapView.Marker coordinate={coordinate} image={imageSrc}/> the UI is noticeably lagging.

[juergengunz]

same for me, only laggy when using custom markers, even one marker makes it laggy

[krabbypattified]

+1

[alvelig]

Are you re-rendering map? Could someone provide a test repo reproducing performance problem?

[alvelig]

Follow in #369

[AngelVenchev]

Hey, I solved my problem and this could help somebody else too. I ended up using the image prop on the marker component to display whatever custom component I need. In my usecase I was implementing clustering using supercluster, I wanted to display a number of clusterized pins. I generated my images from here: https://dummyimage.com - about a hundred. Then a designer converted them to circles with a transparent background automatically with a Photoshop action and I loaded them in my application. 100 images were as small as 60kB so it's not a big hit that I have them all in the app.