Performance issue with native map and custom markers

[Thomas]

I tried to render a custom marker component on top of a map using the code from this blog post: https://www.codenameone.com/blog/map-layout-update.html 
But I am really dissapointed by the performances. On the simulator, the marker position completely lag out when moving the map. I thought it was due to the use of the nativebrowser in the simulator, that might affect performances. But when I tried on a real android device, it was slightly better but far from beeing fluid and acceptable in terms of user experience...
When I compare with the performances achieved with the react-native community map component (https://github.com/react-community/react-native-maps), it is not even close. On react-native my custom markers (they are react-native dynamic views, not just images (if they where just images, they could be directly handled by the google map native api, wich would even increase performances), so they are really like CN1 components) are like glued to the map. As if they where part of the same image. When I move the map, these markers move with it in a perfectly fluid way. On the other hand, on CN1, with only one static marker (I did not change the blog code, so it is just a button fonticon), the marker position update is significantly delayed (with many markers it would probably be even worse...)
I don't really understand what is the reason of such bad performances compared to react-native (as react-native adds an extra layer of communication between the react UI native thread and the javascript engine in charge of interpreting the markers view code to create a react native view component from it whereas in CN1 all is native, so it should be faster...) and how to improve it but this is really disappointing ( 

[Shai Almog]

Sorry to hear that.
There is a small delay we added to make the layout work better without too much flicker in huge amounts of components. It's mostly a safety measure rather than something we experienced. Playing with it on my device with the latest cn1lib and the latest version of the layout I feel it's an acceptable delay but it's possible to tune it probably by refining the logic of the MapLayout class.
Maybe you are seeing a larger delay in your case?

Can you post a video of what you are seeing to make sure we are on the same page?
Which device/OS version?

FYI with our native maps you have an add marker API that also adds a marker image directly into the native map so it will work exactly the same.

[Thomas]

Here is a small video:

<div style="width:100%;height:0px;position:relative;padding-bottom:177.778%;"><iframe src="https://streamable.com/s/4rocw/jzdgzb" frameborder="0" width="100%" height="100%" allowfullscreen style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>

The test device is a xiaomi redmi 3 (octa-core 1.5GHz, 2Gb RAM) with android 5.1.1

Unfortunately, I can't use static images as markers (here it was just to test) as I need dynamic markers in my final app (the markers will show some information that can change with time), so I can't directly call the add marker native function of the google maps api (I need to handle them as CN1 components, like I am doing in react-native where I use a custom marker view component)

[Thomas]

EDIT: The embeded code of the video did not work... just follow this link https://streamable.com/4rocw to see it in good quality

[Shai Almog]

Thanks, I think I see the same thing but at a different zoom level it doesn't bounce nearly as much. This actually looks like a rounding error. We'll need to look at that.

Can you file an issue with that video? We'll try to reproduce it.

http://github.com/codenameone/CodenameOne/issues/new

[Shai Almog]

The issue should be resolved now. Steve added a new API to address this as explained in the issue: https://github.com/codenameone/CodenameOne/issues/2381

[Thomas]

Thanks. I couldn't test the new API yet as it looks like it broke the compiler (see my build error log attached).

I have no doubt that leaving the native google map component to deal with the markers will fix their lag issue. 

However, I wouldn't say this issue is resolved. 

From what I understood, the origin of this lag has not been fixed yet. So rendering a CN1 lightweighted component on top of a native one would still have really bad performances issue. Transforming a component into an image seems pretty much like a step back to me and would never be as effective as directly rendering the components with a correct Z-ordering (I did not test to render 50 1s timer markers with the new api for example, but I am pretty sure performances would not be as good as with react-native). Furthermore, not every native component can handle the display of custom images. For example, if I want to render a CN1 component on top of a native camera component and to make it track the camera movement/device orientation (to make some augmented reality app for example), would I still have to face the same issue? Would my CN1 component lag out in front of my native camera one?  Also, I do not only want to render static markers on top of my native map component, but also a moving marker for the user position and orientation and some custom paths (with different stroke and color) and to make them responsive on click. It can probably be handled with components transformed into images and passed as markers to the native map component, but it would just be much more easier and efficient if they could be kept as lightweighted components rendered on top of the native one...

So I hope you would really try to get the same level of performances for rendering CN1 components on top of native one as with react-native, as I don't see any technical fouling (react-native has to transform js code into native view before rendering it so it should be slower than CN1, not the opposite) and many CN1 potential usage would probably benefit from it (augmented reality, complex apps with native components to render specific gui like maps, video, 3D...)

[Steve Hannah]

This is the same strategy that React Native uses.  Google Maps on android doesn't send map updates with the frequency required to have a separate component laid over top using z-layering smoothly.   To solve this problem, when the user presses the pointer on the map, your lightweight component is seamlessly converted to a bitmap marker so that when the map is moved, the marker will move with it with no delay.  When the pointer is released, the bitmap marker is removed and the lightweight component is again shown. 

Even native Android apps face this issue, and have to use a similar strategy to achieve this result, as Google Maps only support bitmap markers (no views of any kind).

It solves the lag issue you were experiencing.  The fact that it does this by creating a bitmap marker is just an implementation detail.

I have fixed the build issue you are having.  The cn1lib still had some orphan classes included in it.  Had to do a clean build.  You can download the latest here

https://github.com/codenameone/codenameone-google-maps/blob/master/GoogleMaps.cn1lib

Or wait until it in Codename One Settings/Extensions.

Steve

--
You received this message because you are subscribed to the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discussions+unsub...@googlegroups.com.
Visit this group at https://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/ba290b89-8a36-42c1-bcab-497759ab6b83%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Steve Hannah

Software Developer

Codename One

http://www.codenameone.com

[Shai Almog]

FYI this is deployed and should appear in the extension manager as an update