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 users geographical position, but this can compromise users privacy. Thus the position is not available unless the user approves it. When the application is tracking users geographical location, browser will ask for users consent and if user denies access then tracking will be disabled. Once user gives consent by using geolocation api we can get user computers latitude and longitude. Thats it, once we got latitude and longitude we can use

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 users 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";

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 APIs 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 users location or to play with history entries of browser context.