HTML5 History API allows web developers to move forward and backward in session history or adding/removing entries from session history easily. HTML5 Geolocation API is mainly used to track user's geographical position, but this can compromise user's privacy. Thus the position is not available unless the user approves it.

1. Articles from Jinal Desai .NET
HTML5 History API and Geolocation API
2012-12-30 15:12:35 Jinal Desai
HTML5 History API
It was very difficult to manipulate or control session history of particular browsing
context before HTML5. Some workarounds like location.hash or page reloads are
there which is not reliable.
HTML5 History API allows web developers to move forward and backward in
session history or adding/removing entries from session history easily. It is the
History object of DOM interface. The History object is uniquely defined for each tab,
which can be utilized for manipulating session history with some methods.
The History object contains comma separated session entries in which each entries
consists of a URL or a state object or both and in ddition can have title, a document
object, form data, a scroll position and many other information associated with it.
Let me list down some of the basic methods of it.
window.history.state: Returns the current state object.
window.history.replaceState(data, title [, url]): Updates the current entry in the
session history, with the given data, title and URL (the URL is optional).
window.history.forward(): Goes forwards by one step in the joint session history. If
there is no next page to go to, it does nothing.
window.history.go(n): Goes backwards or forwards by the specified number of
steps in the joint session history. If the value you specify is zero, it will reload the
current page. If it would cause the target position to be outside the available range of
the session history, then nothing happens.
window.history.back(): Goes backwards by one step in the joint session history. If
there is no previous page to go to, it does nothing.
window.history.pushState(data, title [, url]): Pushes the data specified in the
arguments onto the session history, with the given title and URL (the URL is
optional).
window.history.length: Returns the number of entries in the joint session history.
To add history entry.
window.history.pushState({name:"Jinal Desai"},"FirstName","jinaldesai.net");
To replace history entry.
window.history.replaceState({name:"Jinal Desai"},"Title",
"startshining.com");
To navigate forward by 3 entries.
history.go(3);
This is fully functional example of HTML5 History API.
HTML5 Geolocation API
HTML5 Geolocation API is mainly used to track user’s geographical position, but this
can compromise user’s privacy. Thus the position is not available unless the user
approves it. When the application is tracking user’s geographical location, browser
will ask for user’s consent and if user denies access then tracking will be disabled.
Once user gives consent by using geolocation api we can get user computer’s
latitude and longitude. That’s it, once we got latitude and longitude we can use

2. google map or bing map to plot it on the world map.
There is window.navigator object provided to play with geolocation. We check
whether browser is supporting the API or not in a similar manner we checked with
Storage API and AppCache API I explained in my previous article.
To get user’s location.
if(isGeolocationAPIAvailable) {
window.navigator.geolocation.getCurrentPosition(displayPosition,
displayError);
}
else {
var result=document.getElementById("labelLocation");
result.innerHTML = "Your browser is not supporting ";
result.innerHTML = result.innerHTML + "HTML5 Geolocation API.";
}
function displayPosition(position) {
var result=document.getElementById("labelLocation");
result.innerHTML = "Latitude: " + position.coords.latitude +
"<br/>Longitude: " + position.coords.longitude;
}
How to handle Errors?
The second parameter I passed in previous example is displayError, which is the
function called if any error occured in calling getCurrentPosition.
function displayError(error) {
var result=document.getElementById("labelLocation");
switch(error.code) {
case error.PERMISSION_DENIED:
result.innerHTML="User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
result.innerHTML="Location information is unavailable.";
break;
case error.TIMEOUT:
result.innerHTML="The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
result.innerHTML="An unknown error occurred.";
break;
}
}
How to display result in a map?
Once you got latitude and longitude, it is very easy to display those values in a map
using google map api or bing map api.
function displayPosition(position) {
var result=document.getElementById("labelLocation");
result.innerHTML = "Latitude: " + position.coords.latitude +
"<br/>Longitude: " + position.coords.longitude;
var latitudeLongitude = position.coords.latitude + "," +
position.coords.longitude;
var imageURL =
"http://maps.googleapis.com/maps/api/staticmap?center=";
imageURL = imageURL + latitudeLongitude;
imageURL = imageURL + "&zoom=16&size=400x400&sensor=false";

3. document.getElementById("mapSpan").innerHTML =
"<img src='"+imageURL+"'>";
}
The other properties returned by getCurrentPosition is
position.coords.latitude The latitude as a decimal number
position.coords.longitude The longitude as a decimal number
position.coords.accuracy The accuracy of position
position.coords.altitude The altitude in meters above the mean sea level
position.coords.altitudeAccuracy The altitude accuracy of position
position.coords.heading The heading as degrees clockwise from North
position.coords.speed The speed in meters per second
position.timestamp The date/time of the response
Geolocation API’s watchPosition() and clearWatch() methods
We can use watchPosition() for tracking moving objects like GPS in vehicle. The
clearWatch() stops calling watchPosition() method. The use of watchPosition() is
similar to getCurrentPosition() method.
if(isGeolocationAPIAvailable) {
window.navigator.geolocation.watchPosition(displayPosition,
displayError);
}
else {
var result=document.getElementById("labelLocation");
result.innerHTML =
"Your browser is not supporting HTML5 Geolocation API.";
}
function displayPosition(position) {
var result=document.getElementById("labelLocation");
result.innerHTML = "Latitude: " + position.coords.latitude +
"<br/>Longitude: " + position.coords.longitude;
}
Conclusion
Using HTML5 it is now very handy tool for web developer to track user’s location or
to play with history entries of browser context.