React-native-maps: Custom marker in google map causes high CPU load on iOS

[vinceyuan]

Even if there is only one custom marker in google map, the app uses a LOT of CPU on iOS. It happens on both simulator and device with debug/release builds.

You can see in the screenshot of the demo project I made, when we use custom marker, the CPU usage jumps from 0.8% to 62%. I also tried creating a custom marker in a native iOS app using Google Maps SDK for iOS. It does not use much CPU.

The following two ways of defining a custom marker do not make any difference. Both of them use a lot of CPU.

<MapView.Marker coordinate={coordinate} anchor={{x: 0.65, y: 1}}>
  <Image source={imageSrc}/>
</MapView.Marker>

<MapView.Marker coordinate={coordinate} anchor={{x: 0.65, y: 1}} image={imageSrc}/>

I tried to use Instruments to profile the app. For unknown reason, something (the custom marker i guess) keeps redrawing.

Environment:
react-native-maps: 0.13.0
react-native: ^0.40.0
map provider: google
OS: iOS

Another person encountered the same issue. https://github.com/airbnb/react-native-maps/issues/741#issuecomment-263400988

[vinceyuan]

Can anybody take a look at this issue? It happens in React Native project only. Creating a custom marker using native google map sdk does not result in high CPU load.

[tema87]

I have the same problem with google&ios

[ryancoughlin]

Same issue on the latest build.

[grundmanise]

Same issue even with 1 super 'light' custom marker that contains empty View. iOS FPS drastically drops and other native UI elements (for example ScrollView) are lagging. It's a super issue for me... because I need a custom map styling that is only available with Google Maps. Apple's Maps are doing well with custom markers.

p.s. I've tested this with all component's shouldComponentUpdate = false. JS FPS = 60, so it is not related to the JS thread blocking...

[Marquis-H]

Same issue on the latest build.

[mtt87]

Same here, did anyone find a workaround other than using Apple Maps?
Unfortunately I need custom styles 😢

[MathieuDebit]

Still an issue here... Agree with Grundmanise, seems to be an important one.

[zheng-liu-seattle]

still have this issue, any update on it?

[compojoom]

As other users here - I'm running in the same issue. We wanted to switch to google maps on our ios build, but shortly realised that the map doesn't bring the CPU to idle.

Same code with airMaps works just fine.

[juergengunz]

same issue, apple maps works fine, but google map is laggy when adding 1 custom marker

[stinju]

Anyone find a workaround or have any additional insight here?

[stinju]

FYI noticed that disabling tracksViewChanges on the _realMarker in AIRGoogleMapMarker.m seems to resolve the CPU. It adds some rendering quirks for our implementation, so still working on a complete solution. Wanted to throw it out there in case someone with more expertise can add to it.

[galeksic90]

Same problem here, please find a fix so we can use custom markers on google maps. :)

[heysailor]

If it helps, the high CPU issue also occurs when using a MapView.Marker with an image set.

[krabbypattified]

+1

[masaldana2]

+1

[krabbypattified]

@gilbox I see you wrote the original code for MapView.Marker. Can you weigh in on this?

[Amnesthesia]

+1 this is a major issue for me. Any screen using PROVIDER_GOOGLE on iOS is extremely slow and laggy, with or without markers, but Apple Maps is fine

[woodpav]

This occurs when component is not updating and after the map has loaded in.

I'm running on an iPhone 6 simulator.

| | Apple | Google |
|------------------------------|-------|--------
| CPU with MapView.Marker | 0% | 99% |
| CPU without MapView.Marker | 0% | 1% |

Google is the better option (and styles!) but the CPU issue makes it unusable :(

This is my Marker

<MapView.Marker.Animated coordinate={this.props.coordinate} anchor={{ x: 0.5, y: 0.5 }}>
  <Image source={require('./my_location.png'} style={{ width: 12, height: 12 }} />
</MapView.Marker.Animated>

---

stinju's fix worked

[hughvidos]

This is an issue with Google maps not react-native-maps. Write an iOS test app and add Google maps and a custom marker using an image. You will see the same perf issue if you add a custom marker using react-native-maps.

The problem is trackViewChanges will cause Google maps to consume CPU. You need to use an icon rather than an image. Any time you want to move the marker, you will need to enable tracksViewChanges and then disable it again after it moves. It will use some CPU while it moves but then be similar to Apple Maps.

[woodpav]

Whats the difference between an icon and an image?

Answer: image prop in Marker is an icon, Image is an image.

[hughvidos]

https://developers.google.com/maps/documentation/ios-sdk/marker#customize_the_marker_image

[woodpav]

Yeah so @hughvidos is 100% right. The issue is the way AIRGoogleMaps loads images. Its not using a UIImage, its using a UIImageView (and then attaching that to the same UIView children uses). And, as the docs note, using iconView can cause performance problems.

A better implementation is to not be able to have children when you use the image prop. If you want children and an image, create the image in children.

setImageSrc would set .icon = UIImage(src) instead.

[compojoom]

hey everyone,

Please test @heysailor's PR. It seems to resolve the high CPU issue.

[heysailor]

Thanks everyone. Let me know if any changes need to be made to help
acceptance.

On 23 November 2017 at 23:19, Daniel Dimitrov [e-mail]
wrote:

hey everyone,

Please test @heysailor https://github.com/heysailor's PR. It seems to
resolve the high CPU issue.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/airbnb/react-native-maps/issues/1031#issuecomment-346604079,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACll3-yWTu1DQRJgqCTw8mNT2Jph3IKBks5s5WLtgaJpZM4L5Ryo
.

[alvelig]

Merged. Can close

[j-mendez]

There is still a cpu problem on the latest build.

[j-mendez]

tracksViewChanges does not help and I am using the latest maps and react-native v 0.53.0

[aksonov]

+1. Please reopen the issue - I see high CPU load with tracksViewChanges disabled.

[compojoom]

I'm on RN .55 with rn-maps .21 - our iOS version of the app uses google maps and I don't see any load on the CPU. Have you guys properly set tracksViewChanges to false on the Marker?

[aksonov]

I'm using RN0.53, didn't done upgrade yet, are you sure that it could be RN-version related?

[compojoom]

I doubt it. We were previously on .51 with rn-maps .19 - and it was working fine

[aksonov]

Oh, looks like I didn't change one marker. Now CPU usage is gone, but I don't see any markers visible - what is the best way to use trackViewChanges?

[compojoom]

I'm not sure on the best way, but here is what I do.
I have a marker Component that renders with tracksViewChanges set to true.

On ComponentDidUpdate I set a timeout of 400ms and set tracksViewChanges to false.

I set trackViewChanges again to true when the component is receiving props. Once the component rerenders the componentDidUpdate is triggered again and after 400ms the tracksviewChanges is set to false again.

This works for me. If anyone knows a better way... please share.

[aksonov]

@compojoom Works well, thanks! But I'm not sure it is good fix and looks like react-native-maps Marker could do this (setting tracksViewChanges true/false depending from update state) by itself

[mauritsd]

I fixed this by exposing the google maps icon marker property to RN (using the patch from #1491). In the majority of use cases (i.e. you just want a custom marker image) this is sufficient, and much simpler to boot.

I also think that it's not really nice to have the app consume 100% CPU for some fraction of a second, whether that's a hard timeout or the delay between componentDidMount and onMapReady firing...

[aksonov]

We have pretty bad experience with react-native-maps and Google Maps, when map has many markers, it is soo sluggish even with enabling tracksViewChange for 0.5 sec for each marker.

[gpichot]

As pointed out by @mauritsd, using the the patch from #1491 to expose the icon marker property is sufficient enough to remove the high CPU usage and solved our issues with react-native-maps.

[aksonov]

Setting tracksViewChange to false works for static markers but requires a lot of workarounds for dynamic re-rendering of markers, so it cannot be considered as 'official' fix...

[mauritsd]

Setting tracksViewChanges to false statically seems to cause a race condition in my app, where sometimes (~20% of instances) only a fraction of the markers render.

[aksonov]

Yes, I had the same

14 мая 2018 г., в 11:23, Maurits Dijkstra [e-mail] написал(а):

Settings tracksViewChanges to false statically seems to cause a race condition in my app, where sometimes (~20% of instances) only a fraction of the markers render.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[compojoom]

@aksonov - can you share some code? In our case tracksViewChanges set to false after 0.4s seems to do miracles and our map only uses high cpu during the initial rendering of the markers.

I also noticed that even if you have a single marker on the map - if trackViewChanges is set to true, then the CPU is high... It seems that it doesn't matter if you have 1 or 100 markers - if trackViewChanges is set to true, then you are going to have high CPU usage.

[vburojevic]

I've opened an issue on Google's issue tracker for this:
https://issuetracker.google.com/issues/111711319

[rborn]

Closing as tracksViewChanges works fine now.

[aksonov]

@rborn It is not true. enabled tracksViewChanges still gives 100% CPU for custom markers, latest version, please re-open

[rborn]

@aksonov you need to manage tracksViewChanges so you avoid this. let me know if you need help with that :)

[aksonov]

It is definitely a bug and should not be closed.

On 12 Oct 2018, at 19:37, Dan Tamas [e-mail] wrote:

@aksonov you need to manage tracksViewChanges so you avoid this. let me know if you need help with that :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[rborn]

@aksonov I'm reading https://developers.google.com/maps/documentation/ios-sdk/marker#customize_the_marker_image and they say tracksViewChanges is problematic, so are you sure in on RN side?

[rborn]

@aksonov then this which seem to give the same solution - manage tracksViewChanges - https://stackoverflow.com/questions/37116644/very-high-memory-and-cpu-usage-when-using-google-maps-sdk-for-ios?noredirect=1&lq=1

[compojoom]

@aksonov - I'm curious how many markers are you rendering? I'm running again in high CPU with tracksViewChanges set to false. If I render 300 markers - it is fine. If I render 399 - CPU goes to 100%
I've played around and it seems that if I set a width and height of 20px for my custom marker - then the CPU usage is normal even for 400 markers. But the moment I change my marker width to around 40 -> then I run in the high CPU. I have problems already with 300 markers... So, it must be something more complex than the trackviewChanges.

[compojoom]

@aksonov @rborn I managed to get a reproducible example https://github.com/react-community/react-native-maps/issues/2575

in this case it's not tracksViewChanges, but something else that trips the CPU...

[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.

[AngelVenchev]

I used the solution @heysailor suggested and solved my problem. I thought 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 use-case I was implementing clustering using supercluster, I wanted to display a number of clustered 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.

[johnny32]

I've tried setting tracksViewChanges={false} and it performs sluggish when dragging and dropping around. I tried changing my custom markers for the default Google ones, or even rendering an Image child component instead of using the image property, but no luck.

I'm rendering 30 markers at once, so this shouldn't be an issue. Is this happening to anybody else?

Here's the most relevant code for my marker:

<Marker
    style={{
        zIndex: isSelected ? 5 : 0
    }}
    key={s.id.toString()}
    identifier={s.id.toString()}
    coordinate={{
        latitude: s.location.latitude,
        longitude: s.location.longitude
    }}
    onPress={this.handleOnMarkerPress}
    tracksViewChanges={false}>
    <Image
        source={getMarkerImageByBattery(
            s.PowerPercentInt,
            isSelected
        )}
    />
</Marker>

[nhatnguyen95]

For version "0.24.2", we can use prop "icon" instead of "image" to fix the issue

[bobzhen]

For version "0.24.2", we can use prop "icon" instead of "image" to fix the issue

You have saved my life, bro.

[Ahnert1]

For version "0.24.2", we can use prop "icon" instead of "image" to fix the issue

Using icon instead of image resulted in my custom markers showing the default marker image for a split second before properly rendering the custom JSX that I supplied to the icon prop.

So ultimately icon and image are not options for me. I'm currently attempting to just put the custom JSX inside the <Marker> </Marker> tags.. But there are performance issues on iOS when using google maps in regards to the trackViewChanges prop. I'm trying to implement a workaround to manually handle the trackViewChanges, but it is very painful.

[RWOverdijk]

@Ahnert1 That's only on dev as it's loading your image. Try it in a production build, it shouldn't "flash".

[emircanuzel-vektor]

Hi ,

if you are using custom maker , you should use marker.tracksViewChanges = false . it will help you for your use CPU.

[yasir-netlinks]

Hi there, so setting tracksViewChanges to false, doesn't render some of my markers, how can I manage tracksViewChanges properly ??

[valeriik]

My steps:

1. Launch app with PROVIDER_GOOGLE on iOS without any markers etc, just the map.
   CPU about 100%
2. Add 1-5 custom marker(s).
   CPU about 65%
3. Remove all custom markers - everything is fine.
   CPU about 2%

Also:

1. I tried to use image prop instead of custom marker - the same result - at start CPU about 100%, after all custom markers were removed - CPU about 65%
2. I tried to use icon prop - everything is fine, if I do not moving the map - CPU about 2%

But I cannot use icon prop because I really need to set different width/height depends on business logic.

I have:
react-native: 0.61.2
react-native-maps: 0.27.1