Expose tracksViewChange and icon property to improve some performance issues #1491

PhamBaTho · 2017-07-19T10:21:34Z

Expose tracksViewChanges property of GMSMarker. By default, this property is YES.

Setting tracksViewChange to NO appropriately can solve some performance issues causing high CPU load on iOS (e.g. #1031 , #1176).

The followings are some guidelines relating to tracksViewChange I extracted from Google Maps SDK documentation:

The UIView can be demanding on resources when tracksViewChanges is set to YES, which may result in increased battery usage. In comparison, a single frame UIImage is static and does not need to be re-rendered.

Some devices may struggle to render the map if you have many markers on screen, and each marker has its own UIView, and all markers are tracking changes at the same time.

To decide when to set the tracksViewChanges property, you should weigh up performance considerations against the advantages of having the marker redrawn automatically. For example:

If you have a series of changes to make, you can change the property to YES then back to NO.

When an animation is running or the contents are being loaded asynchronously, you should keep the property set to YES until the actions are complete.

Please note that this property has no effect if iconView of marker is nil. In other words, I don't think we have any issue with performance if we use default marker.

I have tested on iOS simulator with many use cases like adding many markers on maps, drawing polyline between markers, animating custom markers... and the CPU remains in good health when the map is idle.

Sample usage:

<MapView.Marker
   tracksViewChanges={ false }
   anchor={ { x: 1, y: 1 } }
   coordinate={ {
      longitude: location.longitude,
      latitude: location.latitude,
   } }>
   { this.renderMarker() }
</MapView.Marker>

PhamBaTho · 2017-07-20T10:58:55Z

UPDATE:
I have just updated this PR a bit. I'm exposing additionally icon property. It's equivalent to icon property of GMSMarker Class.

The image property is great, it can cover most of use cases. Though, I believe that using icon property still has an advantage over image property in term of performance, battery usage... because it doesn't trigger tracksViewChanges which has no effect if iconView is nil.

We still need to have a better naming between icon and existing image to make them less confusing.

henrikra · 2017-07-21T20:52:35Z

lib/components/MapMarker.js

@@ -260,13 +273,20 @@ class MapMarker extends React.Component {
      image = image.uri;
    }

+    let icon;
+    if (this.props.icon) {


I would refactor this to ternary if statement :)

heysailor · 2017-08-21T19:37:09Z

Thanks for this. Could you give a full example of use with the icon property?

juergengunz · 2017-08-30T11:55:27Z

i discovered that if i use < image > the images are not being displayed on google maps (ios)... when i use the image property it works fine but i am not able to resize the images

krabbypattified · 2017-10-01T20:51:55Z

+1 would really like to see these optimizations in my app!

compojoom · 2017-10-02T03:51:29Z

@PhamBaTho - how do I add your changes to an existing project? I tried directly modifying the AirGoogleMaps in the project in xCode, but then I get a compile error:
"Linker command failed with exit code 1"

gpeal · 2017-10-05T22:47:30Z

docs/marker.md

@@ -17,6 +18,7 @@
 | `identifier` | `String` |  | An identifier used to reference this marker at a later date.
 | `rotation` | `Float` |  | A float number indicating marker's rotation angle, in degrees.
 | `draggable` | `<null>` |  | This is a non-value based prop. Adding this allows the marker to be draggable (re-positioned).
+| `tracksViewChanges` | `Boolean` |  | Controls whether the icon for this marker should be redrawn every frame.


@PhamBaTho Is this prop iOS only?

Only applicable for iOS. Android don't have issues with that.

gpeal · 2017-10-05T22:47:54Z

lib/components/MapMarker.js

+   * because it doesn't trigger tracksViewChanges.
+   * (tracksViewChanges is set to YES by default if iconView is not nil).
+   */
+  icon: PropTypes.any,


@PhamBaTho Can you give this a more specific prop type?

satori-ytolstoguzov · 2018-01-11T22:23:42Z

At what stage this PR? I use a fork with tracksViewChanges in my project for at least half a year while waiting to be merged.
@PhamBaTho Are you going to fix comments?

rborn · 2018-01-12T07:49:56Z

@satori-ytolstoguzov if you could address the comments (if @PhamBaTho won't) I can have a look

compojoom · 2018-01-12T07:52:50Z

@rborn @satori-ytolstoguzov @PhamBaTho - we've merged this back in November: #1705 and it exposes tracksViewChanges. Shouldn't we close this pull request? Or what is the difference here with pull request 1705?

satori-ytolstoguzov · 2018-01-12T19:21:55Z

@compojoom It seems merged PR forgot to add that to the docs. Other than that I don't see any differences

rborn · 2018-01-12T21:59:12Z

@satori-ytolstoguzov could you test if it's working and make a PR for documentation? I'll be here to merge it ❤️

satori-ytolstoguzov · 2018-01-12T22:54:03Z

@rborn It's a busy day, will look into that on Monday. Also would you consider useful if I add one more bridged property: tracksInfoWindowChanges. It's only for iOS and without it Google Maps SDK ignores all changes in callout after first render.

pqminh · 2018-01-29T16:04:00Z

i'm testing on maps provider google and default.
rn 0.47.2
react-native-maps 0.17.1 | 0.19.0.
All of them don't working. I'm render maps about 700 markers. When use provider google, it's so slow and lag. And use provider default. It does not slow, but when press on random marker, callout is show behind the markers around...

christopherdro · 2019-01-08T21:18:15Z

trackViewChange prop has been added here: 78a36ac

…erformance (#2650) * Added icon property - #1491 * fixed MapMarker.js indentation * Added support for Marker icon property on android * Added support for Marker icon property on android

…erformance (#2650) * Added icon property - react-native-maps/react-native-maps#1491 * fixed MapMarker.js indentation * Added support for Marker icon property on android * Added support for Marker icon property on android

thorin-grab added 2 commits July 19, 2017 16:29

Add Marker tracksViewChange property for Google Maps on iOS

0ab321b

Add Marker icon property for Google Maps iOS

40f4307

Update marker.md for icon property

83dc120

PhamBaTho changed the title ~~Expose tracksViewChange property to improve some performance issues~~ Expose tracksViewChange and icon property to improve some performance issues Jul 20, 2017

henrikra reviewed Jul 21, 2017

View reviewed changes

gpeal reviewed Oct 5, 2017

View reviewed changes

satori-ytolstoguzov mentioned this pull request Jan 11, 2018

iOS Google Provider low marker animation performance and 100% CPU usage #1934

Closed

mauritsd mentioned this pull request Apr 5, 2018

Custom marker in google map causes high CPU load on iOS #1031

Closed

victormartingarcia added a commit to victormartingarcia/react-native-maps that referenced this pull request Jan 6, 2019

Added icon property - react-native-maps#1491

63897db

victormartingarcia mentioned this pull request Jan 7, 2019

Expose GoogleMaps iOS SDK icon property to improve Marker rendering performance #2650

Merged

christopherdro closed this Jan 8, 2019

This pull request was closed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expose tracksViewChange and icon property to improve some performance issues #1491

Expose tracksViewChange and icon property to improve some performance issues #1491

PhamBaTho commented Jul 19, 2017 •

edited

Loading

PhamBaTho commented Jul 20, 2017 •

edited

Loading

henrikra Jul 21, 2017

gpeal Oct 5, 2017

heysailor commented Aug 21, 2017

juergengunz commented Aug 30, 2017 •

edited

Loading

krabbypattified commented Oct 1, 2017

compojoom commented Oct 2, 2017

gpeal Oct 5, 2017

satori-ytolstoguzov Jan 11, 2018

gpeal Oct 5, 2017

satori-ytolstoguzov commented Jan 11, 2018

rborn commented Jan 12, 2018

compojoom commented Jan 12, 2018 •

edited

Loading

satori-ytolstoguzov commented Jan 12, 2018

rborn commented Jan 12, 2018

satori-ytolstoguzov commented Jan 12, 2018

pqminh commented Jan 29, 2018

christopherdro commented Jan 8, 2019

Expose tracksViewChange and icon property to improve some performance issues #1491

Expose tracksViewChange and icon property to improve some performance issues #1491

Conversation

PhamBaTho commented Jul 19, 2017 • edited Loading

PhamBaTho commented Jul 20, 2017 • edited Loading

henrikra Jul 21, 2017

Choose a reason for hiding this comment

gpeal Oct 5, 2017

Choose a reason for hiding this comment

heysailor commented Aug 21, 2017

juergengunz commented Aug 30, 2017 • edited Loading

krabbypattified commented Oct 1, 2017

compojoom commented Oct 2, 2017

gpeal Oct 5, 2017

Choose a reason for hiding this comment

satori-ytolstoguzov Jan 11, 2018

Choose a reason for hiding this comment

gpeal Oct 5, 2017

Choose a reason for hiding this comment

satori-ytolstoguzov commented Jan 11, 2018

rborn commented Jan 12, 2018

compojoom commented Jan 12, 2018 • edited Loading

satori-ytolstoguzov commented Jan 12, 2018

rborn commented Jan 12, 2018

satori-ytolstoguzov commented Jan 12, 2018

pqminh commented Jan 29, 2018

christopherdro commented Jan 8, 2019

PhamBaTho commented Jul 19, 2017 •

edited

Loading

PhamBaTho commented Jul 20, 2017 •

edited

Loading

juergengunz commented Aug 30, 2017 •

edited

Loading

compojoom commented Jan 12, 2018 •

edited

Loading