Creating mobile map infoboxes with Bing Maps and JQuery Mobile

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:

image

image

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:

image

The Code

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4.     <title>Infobox default</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  7.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  8.     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  9.     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  10. </head>
  11. <body>
  12.  
  13. </body>
  14. </html>

 

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:

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />


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:

  1. <body class="ui-mobile-viewport">
  2.     <div data-role="page">
  3.         <div id="myMap" style="position: absolute; width: 100%; height: 100%;">
  4.         </div>
  5.     </div>
  6. </body>


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:

  1. <script type="text/javascript">
  2.     var map = null, pushpinClick;
  3.  
  4.     function GetMap() {
  5.         map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'YOURBINGMAPSKEY' });
  6.         var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
  7.         map.entities.push(pushpin);
  8.         pushpinClick = Microsoft.Maps.Events.addHandler(pushpin, 'click', AddMobileInfobox);
  9.     }
  10.  
  11.     function AddMobileInfobox() {
  12.         $.mobile.changePage("infoboxcontent.html", "slideup");
  13.     }
  14. </script>

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:

  1. <!DOCTYPE html>
  2. <html class="ui-mobile landscape undefined min-width-320px min-width-480px min-width-768px min-width-1024px">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.     <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
  6.     <title>jQuery Mobile Framework - Dialog Example</title>
  7.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  8.     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  9.     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
  10. </head>
  11. <body class="ui-mobile-viewport">
  12.     <div data-role="page" data-url="" class="ui-page ui-body-c ui-page-active">
  13.         <div data-role="content" data-theme="a" class="ui-content ui-body-a" role="main">
  14.             <h3>Infobox Title</h3>
  15.             <p>
  16.                 Infobox description content can go here and fit on a mobile screen just fine.</p>
  17.             <a href="#" data-role="button" data-rel="dialog" data-transition="slidedown" data-theme="b"
  18.                 class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-b"><span class="ui-btn-inner ui-btn-corner-all">
  19.                     <span class="ui-btn-text">Full Details</span></span></a>
  20.             <a href="#" data-role="button"
  21.                 data-rel="back" data-theme="a" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a">
  22.                 <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Cancel</span></span></a>
  23.         </div>
  24.     </div>
  25.     <div class="ui-loader ui-body-a ui-corner-all" style="top: 100px;">
  26.         <span class="ui-icon ui-icon-loading spin"></span>
  27.         <h1>
  28.             loading</h1>
  29.     </div>
  30. </body>
  31. </html>

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:

image

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