28 Jun 2012 5:30 AM #1
Optimizing Map Performance
Optimizing Map Performance
I've done some looking around and have found a few good articles on dropping google maps into a mobile app. I haven't yet found a definitive "silver bullet" list of things to do to make sure that your map is optimized and as near native as possible.
While I know there may never be a true silver bullet list, I would like to see what other sencha developers have found in regards to providing a great maps experience to their users.
I replaced all of my KML overlays with JSON data that I parse into google.maps.Polygon objects. Along with all of the google maps api docs, this article was a great help in dealing with polygons: http://groups.google.com/group/googl...d4da9a057900ad. Some of the data I pull has thousands of LatLng points so I have plans to save the created Polygon objects to the device for re-use. I found that parsing and creating the Polygon object has shown some slower than desired performance...especially for large data sets while the actual drawing has been snappy...even for large data sets.
This article has a lot of great info/suggestions on how to ensure a good user experience (most of which can apply to sencha apps despite it being written for mobile apps in general): http://blogs.missouristate.edu/web/2...obile-devices/. I especially found the caching and map delay suggestions worth a read.
Something I would be very interested in improving is the pinch-zoom step distance in a google map. Native maps allow users to zoom to any level w/out re-rendering the map allowing for a really nice seamless experience for the users. It can be frustrating when you pinch to zoom in for example, and have to wait (even if it's just for a second) before interacting with the map again.
My development pattern went something like get everything I want working, then go back and optimize. For better or worse my map is functional...and now I need it faster. I intend to keep working to implement some of these optimizations and will post back with results or new ideas, and hopefully this can serve as a place for some other sencha specific great ideas.
Thanks for the read, and in advance for any replies,
30 Jun 2012 5:07 AM #2
- Join Date
- Mar 2007
- St. Louis, MO
- Vote Rating
Do you render all the data points at once?Mitchell Simoens @SenchaMitch
Sencha Inc, Senior Forum Manager
http://www.JSONPLint.com - Source to lint your JSONP!
Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/
Need more help with your app? Hire Sencha Services firstname.lastname@example.org
Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!
When posting code, please use BBCode's CODE tags.
30 Jun 2012 8:05 AM #3
There are several 'layers' that I offer to the user, each is retrieved only when the user selects them.
The layers are json files with sets of points. I map those json files back into a model which is capable of creating the google.maps object. One thing that might help a little, I store each point (lat/lon) in a single string, ie. 'lat,lon'. Then each of the points in a double array, ie. "polygon" : [['latlon', 'latlon'....],['latlon','latlon']....]. In my model I have a convert function set to the point field that parses the point apart and creates the google.maps.LatLng object. If I were to re-hash the json files and store the lat and lon as seperate fields I might save time on the device parsing.
As it stands I can bring a few thousand points (sorry...I haven't ever actually counted how many. I will Monday) down and get them onto the map within 5 seconds. In fact, often, especially after the points have been parsed and I have the polygon objects in memory, my layers will render before the map tiles have a chance to.
Also, as a side note, I started doing quite a bit of research on similar map applications and my maps are at least as responsive as any google map I have found. I guess I would just really like to see google maps get closer to a native feel. That is especially true for pinch zooming. Native mas will let you zoom to any step size seamlessly and google maps just cant compete...for now. I know that is not something sencha can really improve (unless you want to provide an api for a native map ).
Sorry...back to your question, I only render the points that the user has selected. But once those layers are selected then yes, they all render at the same time.
9 Jul 2012 10:59 AM #4
Do you have your maps somewhere that can be viewed? I'd love to see what you have done.