Mobile Web Development and Maps
Lately I've been working on Helsinki Festival mobile site (in Finnish). The main idea of the site is to provide mobile information for users, including location and maps of the venues. While implementing the venue locations and other, yet upcoming, features, I've run in to a series of problems of which some should be shared to the wild.
Supporting wide range of devices
Due to heterogeneity of attendees the site should support a wide range of devices. At Taiste we sport a few test devices: iPhone 4, HTC Desire with original firmware and another one rooted with Cyanogenmod and two Nokia devices, the flagship N8 and an older E75. Pretty decent coverage of mobile platforms in circulation in Finland.
I'm not going to discuss about rendering woes and missing
name="viewport"> support here, even though they are challenges that
just need to be handled when building a site like this. The problem I
want to focus on is the functionality of maps and navigation on a
mobile web site.
Displaying a map
First caveat: scrolling. On touch screen phones the scrolling of venue
pages, which have embedded map, was misleading; if user started
scrolling (i.e. placed her finger) on the map, she would end up
scrolling the map instead of the site. By scrolling the map user would
also lose sight of the marker, placed on the map. On
Google Maps API this is
fairly easy to disable just by passing
draggable: false to options
of the constructor of a
Now the second problem was a bit harder to solve: there didn't seem to
be any way we could solve it. The N8 sports a Symbian browser 7.2,
which is equipped with Webkit version 525, the
same version Chrome 1.0, iPhone 2.2 and Android 1.0 had in 2008,
except that somehow it's crappier than those. Luckily, the new Symbian
Anna upgrade should bring Browser 7.3, which has a newer webkit and
it even includes
viewport meta-tag support!
To overcome these two problems I wrote a custom template tag that just
img tag that has an URL to a 240x240 map picture (240 is
the smallest horizontal resolution we support) showing the location.
that transforms the
src attribute to point to a wider map picture.
element by using
element.clientWidth. Oh, and while doing this I
also discovered that Google Maps API limits the image width to 640
Not only the static image overcame these both problems but it also renders a neater marker, with drop shadows and all!
Providing links to the internal navigator application
To ease the finding of a venue site provides a link to an internal map application. Or more specific: tries to provide one. We started with linking directly to Google Maps with proper longitudes and latitudes in the URL. This works mostly fine: on iPhone and on Android it, in almost every case, opens up the native Google Maps application. Almost.
During last firmware update HTC rolled out a new
version of their customized Android Browser (which they call
"Internet"). This updated Internet contains a small, but pretty
annoying bug: it seems to break URL handling so that the Google Maps
links are now opened in browser by default and there's no way to
change this default. I haven't explored if it does the same with other
URLs. My hypothesis is that this could be related to their own
navigation software, Route 66, which is shipped with newer HTC Android
devices. It could possibly open by default the Google Maps links in
this application. However, the app is not available for Desire.
Apparently I'm not
Funny thing is that if I type
maps.google.com in the Google Search
app (not the website), it asks me politely if I want to open Maps or
Browser. So HTC has definitely broke something while modifying the
Needless to say, the link works fine on the Cyanogenmod Desire, as it sports nearly vanilla Android browser by Google. The bad thing here is that there's no other way to send a link that suggests the phone to open Maps application with correct coordinates.
N8 woes and yays
The Nokia Browser documentation developer.nokia.com
does not say a thing about opening Ovi Maps from a website. After some
excessive googling I found a forum post that mentioned briefly about
services URI scheme. By calling that URI scheme with
a properly formatted URL, in this case
it opens up the Ovi Maps application with a marker at the latitude and
longitude specified. You can even supply a name with additional
parameter given to the
...and the issues with Series 60
Even though Nokia E75 has the same generation browser as N8, it does
services URI scheme, at least not in the same format. I
also failed to find any documentation or experience about opening Ovi
Maps application from a link, so the built-in navigation is a no-go
with E75. With S60, we're stuck with mobile Google Maps URL and the
experience is not optimal. You could even craft a URL that gives you
directions, but that would require knowing your current location and
E75s browser does not support Geolocation API, so that's a no-go too.
If it would be satsifying for us to serve only iPhone/iOS and Android
devices (sans current incarnation of HTC Desire, possibly other HTC
Android devices too) the mapping would be easy: Either display a
provided by El Goog with a properly formatted link to
However, if you need to support other OSs, it might require tremendous amounts of googling around the interwebs. I don't even have a clue how Bada or WP7 works, but luckily they both are a small minority in the browser market. I also couldn't find anything for Series 40, so the Nokia seems to keep consistent line of undocumenting through the product line.
My suggestion to mobile phone manufacturers would be a single page of documentation describing the supported URI schemes of the built-in applications to tell the developer what's possible and what's not. With examples, of course.
P.S. At the moment of writing this, we yet haven't launched the new maps and map links in to the wild, but we're in the process of doing so.