Tile5: An Alternative HTML5 Mapping API

While in most cases the Google Maps API is the best choice for your application, there are times where it just isn’t an option—perhaps due to licensing restrictions (you may want to display advertising other than Google ads) or a particular client’s needs. One example of this would be a client that wants to use its own mapping server for maps— it’s more common than you might think.

Tile5 ( http://tile5.org) is an open source JavaScript library being developed to provide a mobile device-friendly mapping solution that can support multiple map providers. Presently, the majority of mapping APIs tie you to a particular map provider (OpenLayers— http://openlayers.org—is a notable exception on the desktop). For some users, this restriction is completely acceptable, while other users regularly need to work with different mapping services, and having to change between APIs can be quite frustrating. This is where Tile5 on mobile, and OpenLayers on the desktop, come into their own.

As Tile5 is targeted at modern smartphone devices (at the time of writing, Android support is in progress but not yet stable), it is able to make extensive use of HTML5. While, at this stage, the use of HTML5 only provides an experience comparable with other non-HTML5 mapping APIs, we are likely to see hardware-accelerated HTML5 canvas implementations soon, and that is going to make things very exciting.

The following code sample shows the equivalent code required to display a simple map using Tile5 in a similar fashion to the previous example using Google Maps. For this example, Tile5 connects to the CloudMade ( http://cloudmade.com) mapping servers, which serve image tiles generated from OpenStreetMap data. If you aren’t already familiar with the OpenStreetMap ( http://openstreetmap.org) initiative, then it’s definitely worth taking a look at. In their own words, it is “a free editable map of the whole world.” Essentially, as users we have the ability to add and update information on the map. In the same way that Wikipedia is an encyclopedia that is maintained by people all over the world, OpenStreetMap is a street map and atlas with many maintainers.

<!DOCTYPE html> <html> <head>

<title>Simple Tile5 Map | Pro Web Apps</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-

scale=1.0; user-scalable=0;" /> <link rel="stylesheet" media="screen" href="../../css/proui.css" /> <style type="text/css">

html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }

</style> <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../../js/prowebapps.js"></script>

CHAPTER 8: Location-Based Services and Mobile Mapping

// set the map size to be window height less the header $("#map_canvas")

.attr('height', ($(window).height() - $("#main h1").outerHeight() - 20)) .attr('width', $(window).width() - 15);

var map = new T5.Map({

container: 'map_canvas', provider: new T5.Geo.Cloudmade.MapProvider({

apikey: "13077497529148b0a40f1bf71728d125" })

map.gotoPosition(new T5.Geo.Position(-34.397, 150.644), 8);

} </script>

</head>

</div> </body> </html>

The implementation of this sample is very similar to the previous Google Maps example:

1. The Tile5 library files are included from the Tile5 site. First, the core tile5.js library is included, and this provides the generic functionality for mapping. We then include two additional files, tile5.osm.js and tile5.cloudmade.js, which provide the code required to talk to CloudMade and other OpenStreetMap-based services.

2. A function is defined to initialize the map. In Tile5, this involves first creating a T5.Map instance and informing it of the HTML5 canvas element that it will attach to, and also informing the provider that will be used to supply the map tiles. Once

a map instance is created, the gotoPosition method is called, instructing Tile5 to draw a map at a particular latitude and longitude for a zoom level.

3. As per the Google example, the initMap function is called in response to the body onload event.

This generates a screen like the one shown in Figure 8–5.

CHAPTER 8: Location-Based Services and Mobile Mapping

Figure 8–5. The Tile5 mapping API provides an HTML5-based mobile mapping solution. While Tile5 is showing a lot of promise, it still hasn’t reached a point where Android

support has been fully implemented and tested. Even though HTML5 has been used, there are still certain nuances that require tweaking to ensure the library behaves well on both iOS and Android; and up until now the primary focus has been iOS compatibility. For this reason, the application that we will build over the next few chapters will be built using Google’s more mature API. As the Tile5 library matures, however, it is likely to provide one of the best alternatives to Google Maps for Android web apps.

NOTE: The Tile5 library is a product being actively developed by Sidelab ( www.sidelab.com). As I (Damon Oehlman) am the founder of Sidelab in addition to one of the authors of this book, I think it’s only fair to be open as to my involvement.

Tile5: An Alternative HTML5 Mapping API