June 9, 2006

AJAX Mobile Map Apps on Minimo

In the next rounds of development for Minimo we are focusing a bit on testing and creating some good support for mobile web based mapping applications. A recent Pew Internet study and other research indicates this is very high growth area for mobile devices and a feature highly desired by about half of all mobile device users. With the gecko desktop browser engine in Minimo we should be able to tap into a wide variety of interesting AJAX map applications that are being developed across the web and made to work well with the Firefox browser. We have done some research and testing in the last few weeks and have some interesting results.

On the one hand, there are web based map applications that are targeting small screen mobile devices, but most of the postage stamp sized outputs seem too small or simplistic to be useful, and don't take full advantage of the capabilities of advanced mobile devices.

http://people.mozilla.com/~chofmann/minimo-0.016/minimo-016-gmaps.png

On the other hand http://maps.google.com, other map sites, and lot of interesting map mash-ups work well on the desktop under Firefox and IE, but not as well mobile devices.

What we found after looking deeper at these sites was that a lot of the problems are due to the HTML and CSS used on these pages and applications, and not limitations of Minimo or the devices. We have tried to keep up with some of these sites by doing site specific grease monkey and style sheet fix-ups within minimo but it seems like we can't keep up. Here is how http://maps.google.com looks in minimo right now.

The site is advancing fast, and it appears not much attention is being payed to small screen layout, so we decided to create a test harness of our own rather than to try and track and fix up the changes they are making.













The first thing we did is to create a test page that has the basic features of an AJAX map service. It was really amazing to see what a few lines of HTML and Javascript can do using the Google map APIs.

We included CSS that will maximize the viewable area of the map, and enable it to look well across any screen size or orientation.

Our simple AJAX map test page is here:

dougt has also hooked up a homebase bar link so the map test app is a single click away in Minimo.

The image on the left is what minimo users running quarter VGA devies will see when they click on the homebase "push pin" icon in the upcoming 0.016 release of Minimo.

In both Firefox and Minimo the map is fully draggable in the main map window.

The map can be scaled up and down quickly.

It also has controls for regular, satellite and hybrid views.



For faster navigation the user can "pop out" the "overview control" from the lower right hand corner and drag the inner box around. The map automatically re-orients and resizes when the device switches orientation as shown below.
























Navigating around is pretty simple. With just a few drags and clicks on my I-mate K-Jam phone. I was able to move 40 miles north and zoom in to a view that showed the shadows of some lucky person lining up a 10 foot put up on Oakland Metro golf course when the satellite went by.

We tested on the Jasjar mobile device with VGA resolution and it really looks great there as shown below.


There is still some work to do in getting this test harness running the way we want. Keyboard navigation still has some bugs that inhibit the ability to "drive" the map with "one-handed D-Key" navigation. Hitting the arrow keys in firefox demonstrates how this should work with the "D-Key" on mobile devices..

We also want to add some search controls, and the ability for the users to set the center point for the map location, and have it be remembered each time they bring up the map.

These are steps along the path to a "find me" button that can gather up user input or available GPS, cell tower, wi-fi base station, and location info from search services to drive the map. We also want to try out the map APIs for Yahoo, Mapquest and others to test minimo compatibility.

There is more testing to do on devices like the SP3i and SP5i smartphones that we also want to target for these kind of apps if possible. Antonio should have a Linux based Minimo 0.016 build ready soon that will run on the Nokia 770. We expect to get the same testing results on that device that we see on the WinCE test devices, but that needs to be checked out.

We did some testing on other browsers to see how they supported this first iteration of a basic AJAX map. As I mentioned, the page works fine in IE 6, and Firefox on the desktop.

Opera

The recently released Opera 8.60 for Windows Mobile has some AJAX support and gets part of the display right, but doesn't rendering the map controls correctly. Opera Mobile doesn't respond to any draggable navigation. It also seems to download all the images from the Google map server and displays them in sequence (note the long vertical scroll bar where the images are being stacked)

Pocket IE

Pocket IE, without any AJAX support, quickly downloads 2 KBs of something and then shows a blank page

Netfront

Netfront 3.3 seems to do about the same PIE, and we weren't able to get our hands on a Netfront 3.4 based browser.

KHTML/Webkit Based Browsers

Early 2005 versions of Safari didn't appear to work, and we don't have any of the Nokia webkit based phones, so maybe folks to test and comment on how the page looks on the latest versions of those browsers.

Summary

Minimo has a pretty good lead in its AJAX map support right now and it looks like it could be a good platform for building and testing interesting and advanced mobile map applications that will run on the desktop or mobile devices. We know that other mobile browser makers are working on AJAX support and this seems to be a good basic benchmark for moving all mobile browsers forward. Thoughts and ideas on how to improve the test app/bench mark are welcome.

Map app developers should also start to design their pages with a variety of screen resolutions in mind and have the pages collapses nicely down to VGA and quarter VGA screens. A movie house/restaurant finder, cheap gas price finder, or traffic alert mash-up is kind of interesting on the desktop; but it has the potenctal to become the next killer app if the same web app can also be used "on-the-run" with one handed navigation under a good mobile browser.

Grab a good mobile device on the mid to high end, get the upcoming minimo 0.016 release at http://mozilla.org/projects/minimo , and start testing and playing web based mobile with map apps today!

Posted by chofmann at June 9, 2006 11:16 AM
Comments

Great work! But did you get marker-overlays also to work?
e.g. http://www.tagzania.com/pastehtml/user/fifa-2006/fussball/

Posted by: Caspar at June 10, 2006 4:24 AM

Yeah, looks like marker overlays work for the most part.

http://people.mozilla.com/~chofmann/minimo-0.016/fifa-marker-overlay.png

A bit of bleeding though from the backround map that I guess we need to check out. I think with a few tweaks stuff on tagzania could look pretty good, and work well, on quarter vga or vga.

Posted by: chofmann at June 10, 2006 11:43 AM