Using HTML 5, geo-location APIs, and WEB services to create a mobile mashup

Find and track location coordinates for use in various WEB services

In the first part of this five-part series, you will be exposed to the most popular new technology in mobile WEB applications: geo-targeting. High-end smartphones have built-in GPS, and now you'll see how WEB services can use it. In this article, you'll learn how to use a variety of geolocation standards and how to use popular WEB services to create interesting mobile mashup programs.

About this series?

HTML 5 is an exciting technology that has a good reason. This will be a technical breakthrough, as it can bring desktop application functionality into the browser. In addition to traditional browsers, the potential for mobile browsers is even greater. Not only that, the most popular mobile browsers have even adopted and implemented many of the important parts of the HTML 5 specification. In this five-part series, you'll have a closer look at some of the new technologies in HTML 5 that have a significant impact on mobile WEB application development. In each part of this series, you will develop a mobile Web application that showcases the new features of HTML 5, which can be used on the latest mobile web browsers, such as those based on IPhone and Android devices.

Common abbreviations

• API: Application Programming Interface

• CSS: Cascading Style Sheets
• GPS: Global Positioning System
• HTML: Hypertext Markup Language
• JSONP: JSON with padding
• SDK: Software Development Kit
• UI: User interface
• World Wide Web Consortium
• Prerequisite

In this article, you will develop Web applications using the latest web technologies. Most of the code here is the core technology of all WEB development for HTML, JavaScript, and css-. What you need most is the browser used for testing. For this article, it is strongly recommended that you use Mozilla Firefox 3.5+ because it is a desktop browser that supports geolocation. Of course, you'll also need to test on your mobile browser, and you'll need the latest iPhone and Android SDK. The IPhone SDK 3.1.3 and Android SDK 2.1 are used in this article. View Resources

section of the link.

Basics: Get to know

Geo-positioning is a new technology in itself. It allows you to know where the user is. But it's not very useful to just know this and report it to the user. Does everyone care about the exact latitude and longitude of their own? This can be combined with other data and services to make this location information useful and to produce some interesting results. These services require the user's latitude and longitude as input. This is what is needed, let's see how it gets. Listing 1

The standard JavaScript API is shown in this area.

Listing 1. Users found: getcurrentposition

Navigator.geolocation.getCurrentPosition (Successcallback, Errorcallback, Options);

This is an important API in geo-targeting. For a large class of applications, just use this API. A geo-anchored object is part of a standard navigator object, and it has several methods, most commonly getCurrentPosition . Accessing a user's location is a time-consuming operation (like finding a satellite in space!) ), it also has to obtain the user's consent. So this is an asynchronous operation. Its parameters are callback functions: one for success and one for failure.

The success function is passed by a single Position parameter of type. This object has two properties: a timestamp property and a property called a Coordinates type of coordinate. An Coordinates object has several properties:

• Latitude

• Longitude
• Altitude
• Accuracy
• Altitudeaccuracy
• Heading
• Speed

These parameters are not available on all devices except latitude, longitude, and accuracy. If the geolocation API is supported and the device can resolve the location, you can get latitude, longitude, and accuracy.

Failedcallback

The function passes a PositionError type parameter. PositionErrorThe instance has two parameters: code and message. Message is device-specific and can be used for debugging. Code has the following three values:

• PERMISSION_DENIED (1)

• POSITION_UNAVAILABLE (2)
• TIMEOUT (3)

The application will display a user-friendly failure message based on code.

Note that the specifications also allow the third parameter to be selected. This includes how long it takes to get the user's location time-out. However, devices such as the IPhone are not currently supported and are therefore not recommended for use. Now that you've looked at the API in detail, let's see an example of how it actually worked.

Integration with Twitter

Now the Hello World Mashup program can use Twitter in some way. In the first example, Twitter's search API will be used. It supports searching for tweets based on location range. Listing 2

The local Twitter search is displayed.

Listing 2. Local Twitter Search

（! DOCTYPE html) (HTML) (head) (

Using HTML 5, geo-location APIs, and WEB services to create a mobile mashup