HTML5 Geolocation Sample with Canvas

This HTML5 application was built using the Geolocation and Canvas application programming interface (API) of the HTML5 W3C specification. This app relies on JavaScript and HTML code to create the user interface. The sample uses geolocation data as a mechanism in which rendering of graphics onto a canvas element takes place based on the indicated relative location. A predefined target location, in the form of latitude and longitude, is stored in the code and compared to the user’s current location also in degrees of latitude and longitude to determine whether the user is near to the proposed coordinates.


The center rings become filled based on the distance the user is from the target location. The innermost ring becomes red if the user is within 0 to 4 miles of the targeted longitude and latitude. The middle ring becomes orange if the user is within 5 to 8 miles of the targeted longitude and latitude. The outer ring becomes yellow if the user is greater than 8 miles of the targeted longitude and latitude. The distance away from the targeted location is also present based on the latitude and longitude coordinates.

This template initially notifies whether the user’s browser supports HTML5 Geolocation and Canvas APIs. If so, the canvas element will be displayed.


The canvas contains text, circles and a number of polygons. For creating objects on the canvas element, the following code is necessary.


context .rect(0, 0, 200, 400); // context.rect(x, y, width, height);


context.arc(x, y, radius, 0, Math.PI*2, true); //context. arc(x, y, radius, sAngle, eAngle, aClockwise)


context.moveTo(400, 400); // context.moveTo(x, y) - Moves the path to the specified point, without creating a line

context.lineTo(400, 0); // context.lineTo(x, y) - Creates a line from the last point in the path to the given point

context.lineTo(0, 400);

context.lineTo(200, 200)


The above lines of code are used to programmatically draw the lines, rectangles, and circles that make up the canvas’s elements. Essential to the creation and finalization of polygons, the following two functions are needed.

context.beginPath(); // clears the current path and before specifying the beginning of a new path

context.close Path(); // draws a line from the path's current point to the starting point

The layering of elements on the canvas is based on the order in which the shapes are drawn so the first item is on the background layer. Each tree’s shadow is created using the same draw sequence as its corresponding tree but is rotated and filled with a different color using canvas functions.

context.transform(1, 0, -0.5, 1, 0, 0); // context.transform(scale-x, skew-x, skew-y, scale-y, translate-x, translate-y); - scale, translate, and skew drawings after the method

context.scale(1, 0.6); //context.scale(x, y); - scales both width and height of the drawings

context.fillStyle = 'rgba(0, 0, 0, 0.2)';

context.fillRect(-5, -50, 10, 50); -// context.fillRect(x , y, width, height);- rectangle filled with a specified color based on the filledStyle attribute previously set


The Geolocation API is used to obtain longitude, latitude and a timestamp at the request by the application. The current position is acquired using the following function that triggers to secondary functions to obtain the requested data and handle any errors.

//The global navigator object gives access to getCurrentPosition() which takes one required parameter and two optional parameters. The updateLocation() function is called when location data is available to be used. The handleLocationError() function is called when failures occur to be presented to users with an explanation.

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError);

The three pieces of geolocation data used by this application are latitude, longitude and timestamp.

//The position object is received from the getCurrentPosition() function which provides access to the following attributes along with altitudes, altitudeAccuracy, heading, speed, etc..

var longitude = position.coords.longitude;

var latitude = position.coords.latitude;

var timestamp = position.timestamp;

Features/Code Functionality/JS/CSS purpose/Key Parts

This app was built using PhoneGap Build for various mobile OSes such as iOS and Android. A config.xml is included in the uploaded zip file required for the PhoneGap Build process. The config.xml file specifies the icon.png file which is used as the icon on the mobile devices and preference along with feature attributes for controlling the experience on the devices. The app was tested on an Apple iPad (first generation) and iPod Touch (third generation) and Samsung Galaxy Player 4.0. Microsoft Internet Explorer (IE) 9, Google Chrome 22 and Mozilla Firefox 15 displayed and supported all the functionality of the HTML5 APIs implemented. For debugging the functionality of this application on Google Chrome, the Chrome development tools were used, and for Firefox, the default Web developer tools were used. The functionality across multiple browsers was consistent except for the CSS3 gradient support, which is not supported in IE9.