Use a google native map inside a scrollable container

20 views
Skip to first unread message

Thomas

unread,
Aug 28, 2019, 9:48:03 PM8/28/19
to CodenameOne Discussions
I tried to use a native google map inside a Form with a scrollable (in Y direction) body. The goal is to have an interactive map that take part of the screen and other components below that can exceed the screen height (hence the necessity to be able to scroll) 
Unfortunately I couldn't succed as doing so, the map display is bugged. I think it is a bug related to peercomponent getPreferredSize not beeing correctly computed in some cases so I oppened a subject on github (https://github.com/codenameone/CodenameOne/issues/2896. NB: I opened it on the main CN1 github repository as I think it is not strictly related to the native google map CN1lib. Indeed it appears on the simulator where the map is rendered inside a browserwebview (it uses the js google map api) so it potentialy affect any peercomponent) but if this is not a bug, please explain how this layout can be achieved (a native map of fixed size inside a scrollable parent container)

Shai Almog

unread,
Aug 28, 2019, 10:41:47 PM8/28/19
to CodenameOne Discussions
This will be terrible UX as scrolling will mix with panning.
Preferred size is generally problematic for peer components, you should never rely on it. I suggest using something like table layout to explicitly determine the size of the component based on screen size percentages.

The native OS has preferred size methods but for things like maps they don't mean much. Furthermore, they run on the native thread so by the time we get them back we no longer need them. There isn't much we can do about it.

Thomas

unread,
Aug 29, 2019, 10:07:59 AM8/29/19
to CodenameOne Discussions
scrolling wil not mix with panning as the drag event is consumed by the map when occuring on the map so scrolling would only occur when the drag event is outside the map. This king of UI is used in many apps.
Anyway bad UX or not, this doen't answer the question of how to have a native component that is part of a scrollable container (it can be a native map that is purely static (all controls disabled) or just clickable but not pannable or event just any browserwebview displaying some html content). And setting the parent component scrollable or using a layout different from LayeredLayout for the parent shouldn't affect the way the peercomponent is displayed (see the ticket oppened on github for details).
As for the preffered size, I don't apply it to the peercomponet directly but to a wrapping CN1 Container. So I might as well have used a table layout with a screen size percentage, the issue would have been the same (the dimensions of this wrapping component is OK in any cases, this is only the peercomponent it contains that has wrong dimensions and sometimes exceed it and is cropped to its boundaries)

Shai Almog

unread,
Aug 29, 2019, 10:49:51 PM8/29/19
to CodenameOne Discussions
Pan not scroll and I did answer your question in the following sentence.
Reply all
Reply to author
Forward
0 new messages