Earthware Blog

In the second in our series on mobile mapping with Bing Maps AJAX V7 we are going to show you one of the great features of HTML5 that you can start using right now on mobile devices. Where the desktop may take years before all users have access to the features of HTML5 the vast majority of smartphone users already have HTML5 compatible browsers.

HTML5 GeoLocation API

HTML5’s geolocation API allows you to request a users location by prompting the user to optionally share their location information with your website. It is currently supported on:

With WP7 hopefully coming soon. Rather than repeat the entire documentation for the geolocation API lets show you how to use it in a code example. Here is an example JavaScript method we have written that we can call to get the user location.

Notice the line “!!navigator.geolocation” this is checking that the browser supports the geolocation api, you should of course in a real application show some kind of message if they do not. Once we have checked if the browser has support we simply call the “navigator.geolocation.getCurrentPosition” method passing in two method names (we will write those in a moment) the first to handle the location response and the second to handle any errors.

The first of the two methods which handles a valid location response looks like this:

As you can see it accepts a position parameter from which we can get the user latitude and longitude. We the set our Bing Map to the new location, and in this example zoom the map in on that location.

The next method handles any errors that might occur, this is a very basic example which you would want to expand upon in production:

As you can see it shows a relevant JavaScript alert informing the user of what the error was. Note that one of these errors is simply that the user has not decided to share their location with you website.

Finally here is the entire complete code so you can see how these methods are called, and how the basic Bing Map is setup for mobile display:

You can see a live demo at http://bit.ly/j6dT0S which will work on your mobile device, or HTML5 enabled desktop browser.

This is the first in our new series on mobile mapping and are based on a talk I gave recently at the Bing Maps user group about some tips and techniques for creating maps specifically for mobile devices.

This first tutorial will focus on creating Infoboxes (or popups) specifically targeted for mobile devices using a combination of Bing Maps Ajax V7 and Jquery Mobile.

If you want to skip the overview and get straight into the code click here.

Fitting everything in

One of the first challenges you encounter when developing for mobile devices is how to fit all your information into such a small amount of space. If we look at the default Bing Maps infobox you can see it fits nicely on the ipad, but not so nicely on the iphone:

Giving users what they expect

Even if we could find a way to fit our information into such a small space on the iphone using the default infobox would not give users a great experience, and certainly not one they are used to getting from native applications on their mobile.

A better approach to this is to see how we can mimic other user interface concepts that users are already familiar with and use these to display the information that is associated with our pushpins.

The approach we are going to demonstrate in the rest of this tutorial is to create a typical mobile dialog for our pushpin using the Jquery Mobile library:

The Code

We will start by setting up a basic html page, adding the script and css references for Bing Maps and Jquery Mobile:

As you can see this is a pretty basic page and so far it does nothing. Now we need to add a few bits of markup so that Jquery Mobile helps us setup a basic mobile ready page, including automatic ajax page loading. We start by adding the following meta tag to the head:

Now we need to add some html in the body that will tell Jquery Mobile that we have a mobile page (each html file can contain multiple pages in Jquery Mobile), add the basic map div ready for us to load a Bing map into:

Jquery Mobile is very much about convention over configuration so the html 5 style “data-role” and the “ui-mobile-viewport” class on the body tag are used by Jquery Mobile to work its magic and apply its ‘mobile-esq’ css styling.

Finally we are going to add the javascript code (in the head section) we need to both load the Bing Map and fire a Jquery Mobile method to load a new page when we click on the puhspin:

The code above shows the normal way of creating a Bing Map and then adding a pushpin with a click event that calls the “AddMobileInfobox” method. Inside this click handler is the only piece of JavaScript we need to write specifically for Jquery Mobile. It calls the $.mobile.changepage method passing in the name of the html page we want to load and the name of the animation to see (see here for more animation options). This method loads the new page using ajax and presents it over the map.

The only thing left to do is to create the “infoboxcontent.html” page itself, this again uses Jquery Mobile to provide the styling:

Again this uses the same page markup as before to tell Jquery Mobile how to style the page and this time it has some more new Jquery Mobile tags and styles that automatically turn our hyperlinks into mobile styled buttons. As you can see this page has zero custom javascript and all the styling is automatically applied by Jquery Mobile. When you load the page it looks like this:

Clicking the cancel button closes the dialog and takes us back to the map without reloading the page, all by the magic of Jquery Mobile.

Summary

Hopefully this tutorial has shown you a really quick and easy way to produce infoboxes for mobile devices with very little code mostly thanks to Jquery Mobile. Over the coming weeks we will share a few other mobile mapping tutorials so let us know what issues you would like to see covered.

You can view a live demo and view the code at http://bit.ly/jexeja