Speeding up the map component (tiles slow to download?)

[Gareth Murfin]

Love the MapComponent, got all the cool stuff working with routes using the google maps api etc, very impressive stuff, and a heck of a lot easier than doing it in Android. My main issue is that the tiles seem really sluggish to appear - they seem slower then the native map equivalents. Performance has not been a problem, it seems more the download speed of the tiles (I think).. Im plotting a route on the map but it appears over the last location of the map, and takes a good few seconds to catch up and repaint the layers underneath with the new tiles (which is obviously quite jarring to the user, and client :-)).

Is there any way to speed this up, what is causing this? Is it just the same speed as native ones and Im confused? If it is to take a long time is there some call back telling when when the tiles are done so I can then display my route etc so there isnt a second or 2 where its sitting laid out on an old section of the map? Perhaps I should be displaying an indeterminate progress bar until the call back comes in ?

Also, this is off topic and im not sure if I need a new post for this. But I noticed that text on iphone buttons seems a bit too low (on my app at least), on the android its perfectly central. Is there any sort of config file were we can adjust global settings based on devices? Like I could say on iphone nudge it up one pixel (id like fine control of fonts too, on android sometimes things get cut off whereas they dont on iphone, I will tinnker with the fonts further though), or is there some other reason for whats happening?

Final question if you can tolerate my madness any longer :-) When I tested my app on Android and hit a textfield the keyboard popped up as expected - but my layout did some readjusting to accomodate for it (I presume), this made things look all squashed and weird, is this intentional? Whats the best way to deal with it? And also, can we simply turn it off? Although that might be awkward as people could be typing on a textfield they cannot see... its an interesting problem..

[Shai Almog]

The new native maps in Google are based on vectors which are REALLY fast and efficient but not very portable. We'd love to have the ability to embed a native map but then the layers API's etc. would become far more complex (can't just have an overly over embedded map).
We cache tiles so once they are cached it should be pretty decent but we can't compete with some of the things google did in the latest version.

Do you inherit from the native theme or did you remove that? You can override padding/margin to suite your needs in the designer.

Text editing on Android sends a size changed event which resizes the screen. Due to other constraints its really hard for us to disable this (Android has an option to do so but it clashes with other stuff we do). You need to design your UI accordingly.

[Steve Hannah]

I did some experimentation a while back using the Google Maps api inside a webview using the CN1 javascript bridge and noticed it to be quite a bit faster for loading the map tiles than the CN1 native map component.  I thought I might have just been doing something wrong (with the map component), but this now explains the reason for the performance difference. 

A screencast of the google maps/directions API inside a CN1 webview:

http://www.youtube.com/watch?v=sRR2tej5LCE

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-discu...@googlegroups.com.
Visit this group at http://groups.google.com/group/codenameone-discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/28ca0956-78f8-489f-bdad-5d0f8bed7af2%40googlegroups.com.

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

--
Steve Hannah

Web Lite Solutions Corp.

[Gareth Murfin]

Steve that beats the pants off anything ive done so far! Funny thing is i see my commenting on it (radiant silver labs)! Small world, i need to experiment with this so you can ut any iconsa nd layters on the amp? I need that for ym appp.. good luck ad thanks :-D 

--
You received this message because you are subscribed to a topic in the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/codenameone-discussions/BjCL3GD6rWM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to codenameone-discu...@googlegroups.com.

Visit this group at http://groups.google.com/group/codenameone-discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/CABiRg%2BTeyJWV%3DSPRe_nUXVB3rjJwwNhQiOcxog9CxPe_hazsTg%40mail.gmail.com.

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

--

Gareth Murfin
(Android Freelancer)

[Akintayo Olusegun]

So you draw your layers in javascript? 

Can you be so kind to share some code?

Thanks.

On Wednesday, October 23, 2013 7:17:26 PM UTC+2, shannah wrote:

I did some experimentation a while back using the Google Maps api inside a webview using the CN1 javascript bridge and noticed it to be quite a bit faster for loading the map tiles than the CN1 native map component.  I thought I might have just been doing something wrong (with the map component), but this now explains the reason for the performance difference. 

A screencast of the google maps/directions API inside a CN1 webview:

http://www.youtube.com/watch?v=sRR2tej5LCE

Steve

On Wed, Oct 23, 2013 at 12:07 AM, Shai Almog <shai....@gmail.com> wrote:

The new native maps in Google are based on vectors which are REALLY fast and efficient but not very portable. We'd love to have the ability to embed a native map but then the layers API's etc. would become far more complex (can't just have an overly over embedded map).
We cache tiles so once they are cached it should be pretty decent but we can't compete with some of the things google did in the latest version.

Do you inherit from the native theme or did you remove that? You can override padding/margin to suite your needs in the designer.

Text editing on Android sends a size changed event which resizes the screen. Due to other constraints its really hard for us to disable this (Android has an option to do so but it clashes with other stuff we do). You need to design your UI accordingly.

--
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 http://groups.google.com/group/codenameone-discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/28ca0956-78f8-489f-bdad-5d0f8bed7af2%40googlegroups.com.

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

[Gareth Murfin]

Believe it or not today I had a 3 hour meeting with some of the worlds leading network and mapping experts about this very issue. All we're stupidly impressed by CN1 and its amazing abilities, and dare I say it a few people threw guesses at me about how it works lol.. I think I conceeded that xmlvm is in use somewhere, for ios at least, but im guessing, only Mr Shai knows til I read the code. Wrappers wrappers wrappers thats how I get around these questions these days, im sorry Shai not read the code fully yet lol :) There were still confused issues about DPI, but on the whole I think we did well. I myself cannot answer some of the DPI issues, given that things were tiny on my 160dpi tablet, it was hard to explain. Later on a 1920x1080 phone things looks much better (ironically?).

BUT.. these things came to our attention, mostly the mapping component (using the open street map stuff) is woefully inefficient for a world leading app, the speed is reminiscent of the G1 android phone on a 2400 baud rate modem, its -not- acceptable. So we considered the following:

- Get an artist to custom make tiles and store them locally so the map can grab them from cache (this is a LARGE area, ive done it for themeparks and festivals, but never for a COUNTRY)

- Write a special mode for programmers only that visits each part of the map saves it all to disk then we zip it up and use it as a source for our tiles [bundled with app or downloaded on first load], any outside the area of interest load up as usual from server

- Go native and write a seperate mapping component for bb/android/ios (costly and really not desirable. but how achievable?)

- Somehow embed a webview and plot things on that? (NO IDEA if this is plausible?)

Are there any better ways? Personally I think the maps are fine, apart from how slowly the tiles come down, what if I hosted the entire tileset myself on a dedicated server? My app is for one country only, so it would be local and fast I think? Or is it not the download? Basically how do we achieve super fast maps, we are fine with caching on our server or in the client if need be, but the current maps are just downloading at a rate which is deemed way too slow, especially since my app is aimed at a country with patchy and slow gprs in the first place.

Thanks guys!  

[Steve Hannah]

Entry point is the start method here:
https://code.google.com/p/codenameone...

The main layout method:
https://gist.github.com/shannah/5006162

Embedded HTML file:
http://code.google.com/p/codenameone-...

Google Map wrapper classes:
http://code.google.com/p/codenameone-...

Depends on CN1 Javascript bridge:
https://github.com/shannah/CodenameOneJS

It really just uses the Google Javascript API inside a WebView, and uses the Javascript-CN1 bridge to expose the API in Java.

Steve

To unsubscribe from this group and stop receiving emails from it, send an email to codenameone-discu...@googlegroups.com.

Visit this group at http://groups.google.com/group/codenameone-discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/4a4877b3-3d06-4d9f-b7e9-6aae67286f6b%40googlegroups.com.

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

[Shai Almog]

The better solution is to implement native mapping capabilities such as Google's Map API's which are available both for iOS and Android.
Unfortunately we are currently swamped with work and priorities only requests made by Enterprise/pro users over everything else.

There is an RFE for native map support but no enterprise or even pro user asked for it.

[Chen Fishbein]

The openstreetmap tile server is open and free (under their terms), but it is not optimized.

There are many commercial tiles servers that are based on the open street map and can give a better experience, see - http://wiki.openstreetmap.org/wiki/Commercial_OSM_Software_and_Services

See the TiledProvider, OpenStreetMapProvider and GoogleMapsProvider to better understand how to config the tiles provider.

to create a MapComponent with a different map provider use the dedicated constructor.

[Gareth Murfin]

Lots of great info in this thread, I will look at some other mapping servers. Im interested in becoming a pro user if you can request features :) 

[Shai Almog]

We take feature requests from pro users way more seriously. But since we have quite a few pro users by now there is a pretty large queue. However, its an unordered queue where we also take into consideration the benefit to the project, popularity and complexity.

[Gareth Murfin]

Just getting around to perfecting this in my map, now I see shannah hardcoded the route to display initially inside the javascript:

directionsService.route({

                origin: 'Junee, Australia',

                destination: 'Sydney Australia',

                travelMode: google.maps.DirectionsTravelMode.DRIVING

What Im wondering is can we "adjust" the html/js before we send it to the webview? As you can see here I pass an htmlfile:

String html2load = "jar:///googlemaps.html";

           b.setURL(html2load);

But could I change the contents of googlemaps.html, perhaps read this into a String then pass that to the webview in some other way? so I could then swap origin: 'Junee, Australia' for something completely dynamically.

Please let me know if this is possible,

Thanks, 

[Gareth Murfin]

Sorry just realised I missed b.setPage() :) trying it now

[Steve Hannah]

You could also just make the call from java after the page is loaded using execute() or using the JavaScript bridge.

Steve

On Monday, November 25, 2013, Gareth Murfin wrote:

Sorry just realised I missed b.setPage() :) trying it now

--

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-discu...@googlegroups.com.
Visit this group at http://groups.google.com/group/codenameone-discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/824bc509-cb18-47f5-8063-9a441ccff0f0%40googlegroups.com.

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

[Gareth Murfin]

I used setpage and did a replaceAll on your hardcoded places, I then went on to do the same for waypoints, I may as well post it here, its not going to be pruned perfectly for the forum but what the hell, this is a new field and we are here to help, so pick through some of the bad bits folks. But basically I got the way points going and everything, im so super in love with this "webview" approach, did you even realise it supports street view natively too? Perhaps you did but when I noticed I almost shat myself with joy, you click on the man, he tilts, you drag him somewhere and bang, streetview!!! My clients are going to love me :-))).. Thanks, the JS bridge kicks ass, its brought so much stuff with it. Oh yeh I also worked out 2 other AMAZING things, clearly from googles madness, but if you tap and hold your finger somewhere it will show you a screenshot of the street view ! Too good to be true, and if you do some trickery you can include your own custom little map pins using code from: http://www.rue89strasbourg.com/wp-content/themes/theme_enfant/cavalcade/carte.html (as you can see he has nice little thumbnails )

Anyway here is some code I hope will prove useful to someone who is trying to take shannah's demo and a) programatically adjust the start/end, b) add way points into the map, I replace the existing onLoad() with:

@Override

            public void onLoad(String url) {

                _("/////////////////BROWSER HAS FINISHED LOADING//////////// Loaded "+url);

                

                /*

                   when the browser loads the javascript creates these objects which we grab so the directions

                 * can be displayed

                 */

                

                map = (JSObject)c.get("map");

                directionsService = (JSObject)c.get("directionsService");

                directionsDisplay = (JSObject)c.get("directionsDisplay");

                

                if (directionsService==null)

                {

                    _("WARNING directionsService IS STILL NULL!!! ");

                }

                if (directionsDisplay==null)

                {

                    _("WARNING directionsDisplay IS STILL NULL!!! ");

                }

                GoogleMap.this.onLoad();

                

            }

            

        };

        browser = (BrowserComponent)b.getInternal();

        c = new JavascriptContext(browser);

        

        

        boolean SUPPLY_HTML_AS_STRING=true;

        if (SUPPLY_HTML_AS_STRING)

        {

            String htmlContent = "";

            InputStream is = Display.getInstance().getResourceAsStream(Form.class,"/googlemaps.html");

            try {

                htmlContent = Util.readToString(is);

            } catch (IOException ex) {

                _("IOEXCEPTION!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! "+ex.getMessage());

            }

            

            _("html was loaded into a string and looks like this:");

            //_(""+htmlContent);

            

            //now we swap into the html the real values not the hardcoded ones...

            String originToReplace      = "Junee, Australia"; 

            String destinationToReplace = "Sydney Australia"; 

            

            //we also need to work out the center point to tell the map where to focus..

            //or do we? well to specify the extra things we do, inside the js theres a line like this:

            /*

             var map = new google.maps.Map(document.getElementById('map'), {

                center: new google.maps.LatLng(-34.397, 150.644),

                zoom:7,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            });

            * 

            * So for now lets swap:

             */

            //center: new google.maps.LatLng(-34.397, 150.644), FOR NOTHING.. later we can calc the real centre?

            //THE reason i remove this is because if you dont it sort of centres then refreshes to draw the line, this way (without it)

            //it will not draw til the route is ready - OR ATLEAST THATS HOW IT SEEMS ON THE SIMULATOR this might need to be

            //tweaked later.

            String centerString = "center: new google.maps.LatLng(-34.397, 150.644),";

            htmlContent = StringUtil.replaceAll(htmlContent, centerString,"");//

            

            

            htmlContent = StringUtil.replaceAll(htmlContent, originToReplace,       nl.myCurrentTrip.tripPlanner_StartPoint);

            htmlContent = StringUtil.replaceAll(htmlContent, destinationToReplace,  nl.myCurrentTrip.tripPlanner_EndPoint);

            

            //NOW to process way points, we need to replace the hardcoded array which ive copied from another example, it  looks like:

            /*

             * var waypts = [

                  

                  {location:"Rue de la Brigade alsace-Lorraine, Strasbourg"},

                  {location:"Place d'Austerlitz, Strasbourg"},

                  {location:"Rue des Orphelins, Strasbourg"},

                  {location:"Place de Zurich, Strasbourg"},

                  {location:"3 Rue de Zurich, Strasbourg"},

                  {location:"Quai des bateliers, Strasbourg"},

                  {location:"18 Rue du Vieux marché aux Poissons, Strasbourg"},

                  {location:"65 Rue des Grandes Arcades, Strasbourg"},

                  

                 ];

                 * 

                 * BUT IVE REMOVED THEM ALL SO WE MANUALLY ADD THEM IF NEEDED.

             */

            

            //so for now its:

             String removeMe = "var waypts = [\n" +

"                 {location:\"Rue de la Brigade alsace-Lorraine, Strasbourg\"}\n" +

"                 ];";

            

            String newWayPointJS = "var waypts = [";

            //PERHAPS I NEED TO KEEP A LIST OF STOPS IN THE TRIP OBJECT RATHER THAN THIS, revisit this code if need be

             if (nl.myCurrentTrip.tripPlanner_Stops !=null && nl.myCurrentTrip.tripPlanner_Stops.length()>0)

             {

                 _("This joiurney DOES HAVE way points lets add them now!");

                 

                 String listOfWayPoints = nl.myCurrentTrip.tripPlanner_Stops;

                 

                 //HMM REMOVE OPTIMIZE STRING FOR NOW, work out if we need later and where to add..

                 if (listOfWayPoints.indexOf("optimize:true")!=-1)

                 {

                     _("removing optimize:true");

                     //chop off from first | to end.

                     listOfWayPoints = listOfWayPoints.substring(listOfWayPoints.indexOf("|")+1, listOfWayPoints.length());

                     _("new way point string to slot into JS:"+listOfWayPoints);

                 }

                 else

                 {

                     _("optimize:true isnt found so no need to remove it.");

                 }

                         

                 

                 

                 StringTokenizer st = new StringTokenizer(listOfWayPoints,"|");

                 while (st.hasMoreElements())

                 {

                     String myToken = (String) st.nextElement();

                     _("TOKEN FOUND:"+myToken);

                     newWayPointJS+="{location:\""+myToken+"\"},";

                 }

                 

                 //remove last comma then 

                 newWayPointJS = newWayPointJS.substring(0,newWayPointJS.length()-1);

                 //add the end of the JS array of waypoints

                 newWayPointJS += " ];";

                 

                 //this ocmpletes our new waypoint code that we now swap in for the hardcoded stuff

                  htmlContent = StringUtil.replaceAll(htmlContent, removeMe,newWayPointJS);//

             }

             else

             {

                 _("There wil be NO WAY POINTS.");

                 

                 //remove the way point code altogether

                 htmlContent = StringUtil.replaceAll(htmlContent, removeMe,"");//

             }

            

            

            _("===========================================================================================");

            _("HTML WAS PROCESSED TO SHOW CORRECT DATA ITS NOW:");

            _(""+htmlContent);

            

            

            _("now pass it to the browser");

            b.setPage(htmlContent,"www.arse.com");        

        }

        else

        {

              

            //now we load our own html file, (warnign this one is hardcoded in the html, hence why were are not using it in this manner right now)

            String html2load = "jar:///googlemaps.html";

            _("LOADING LOCAL HTML FILE ----------------->: "+html2load);

            b.setURL(html2load);

        }

      

        this.addComponent(BorderLayout.CENTER, b);

    }

the HTML:

<!--

To change this template, choose Tools | Templates

and open the template in the editor.

-->

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

        <style type="text/css">

          html { height: 100% }

          body { height: 100%; margin: 0; padding: 0 }

          #map { height: 100%; width: 100% }

        </style>

        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>

    </head>

    <body>

        <div id="map" >Map Here</div>

        <script>

            var directionsService = new google.maps.DirectionsService();

            var directionsDisplay = new google.maps.DirectionsRenderer();

            var map = new google.maps.Map(document.getElementById('map'), {

                center: new google.maps.LatLng(-34.397, 150.644),

                zoom:7,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            });

var waypts = [

                 {location:"Rue de la Brigade alsace-Lorraine, Strasbourg"}

                 ];

            directionsDisplay.setMap(map);

            directionsService.route({

                origin: 'Junee, Australia',

                destination: 'Sydney Australia',

waypoints: waypts,

                travelMode: google.maps.DirectionsTravelMode.DRIVING

            }, function(response, status){

                if (status == google.maps.DirectionsStatus.OK) {

                    console.log(google.maps.DirectionsStatus.OK);

                    directionsDisplay.setDirections(response);

                } else {

                    alert("Failed");

                }

            })

         </script>

    </body>

</html>

On Monday, November 25, 2013 11:20:44 PM UTC+8, shannah wrote:

You could also just make the call from java after the page is loaded using execute() or using the JavaScript bridge.

Steve

On Monday, November 25, 2013, Gareth Murfin wrote:

Sorry just realised I missed b.setPage() :) trying it now

--
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 http://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/824bc509-cb18-47f5-8063-9a441ccff0f0%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Gareth Murfin]

Since the WebBrowser component wont work on my Blackberry bold 9900 Im now back to reimplementing maps using the MapComponent (sigh). It isnt just slow, most of the time it simply refuses to get all the tiles we need leaving huge white gaps, is there some setting I can use to help it along? Even on my 4 core Android its the same.

[Chen Fishbein]

The google maps provider is faster and more reliable (make sure to turn on "Static Maps" in the google console).

[Gareth Murfin]

hey great, wheres this console ??

On 3 March 2014 20:27, Chen Fishbein <cf2...@gmail.com> wrote:

The google maps provider is faster and more reliable (make sure to turn on "Static Maps" in the google console).

--
You received this message because you are subscribed to a topic in the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/codenameone-discussions/BjCL3GD6rWM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to codenameone-discu...@googlegroups.com.

Visit this group at http://groups.google.com/group/codenameone-discussions.

To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/9cf3391b-3df9-492b-b89e-8ff740346fae%40googlegroups.com.

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

--

Gareth Murfin
(Android Freelancer - www.garethmurfin.co.uk)

[babtu]

Log in to your google account, then go here: http://lmgtfy.com/?q=google+api+console and pick first result. In the menu on the menu on the right side you will see API&auth, click and there you could activate Static Maps. It is not that hard.

[Gareth Murfin]

Its not immediately obvious, I did find static maps and turn on it on, not sure if it helps much, 50% of the time im left with white tiles even if I wait for ever. It would be nice to see an improved mapcomponent in the future :)

[Gareth Murfin]

how do I know if im using the google maps provider? will the tiles look different? I turned it on but its still so slow it is basically not usable.

[babtu]

It is, it took me 30s to find it. Yes, tiles will look different, open http://www.openstreetmap.org, then https://www.google.pl/maps/preview and compare. But from my experience changing provider is not helping much. How do you know? When you set Google Maps provider, then map component should be using google maps:

MapComponent mc = new MapComponent(new GoogleMapsProvider("paste your api key here"), new Coord(50.259, 21.020), 15);
Form f = Display.getInstance().getCurrent();
f.addComponent(mc);

[Gareth Murfin]

I see, so im still seeing the openstreetmap tiles, not sure why, but that would explain that there was no performance increase.

[Peter Roden]

Hi All,

I am new to Codename1 and am piloting a project to see how well Codename1 can handle what i consider as simple use cases. One of which is a mapping component where I can mark places of interest on the map and the users current location. Pretty basic.

I downloaded a heap of the sample applications and have been looking at the MapsDemo sample app. Drawing the initial map is painfully slow as is zooming in or navigating around. After a while the app grinds to a halt. 

This is a show stopper for me doing any future development in Codename1 unless the response time of the mapping component is significantly improved.

Shai. Is this an issue which you guys are working on? I have read several times that Enterprise and Pro users get priority service. And it appears unless a user at that level has a need then it will not be implemented. I consider this component a fundamental part of Codename1 and it should just work. I like what i see so far and would like to complete this pilot in Codename1 and standardise on a Java based development platform. The problem is I am under the pump to deliver this pilot and simply cannot continue unless there is certainty that this mapping issue will be resolved in the immediate future.

Has anyone managed to get a responsive workable basic mapping app together using Codename1?

[Shai Almog]

Hi,

http://www.codenameone.com/3/post/2014/03/mapping-natively.html

BTW can you please start a new thread rather than revive an old unrelated thread not started by yourself.