Articles from Jinal Desai .NETHTML5 History API and Geolocation API2012-12-30 15:12:35 Jinal DesaiHTML5 History APIIt was ...
google map or bing map to plot it on the world map.There is window.navigator object provided to play with geolocation. We ...
document.getElementById("mapSpan").innerHTML =         "<img src="+imageURL+">";}The other properties returned by getCurre...
Upcoming SlideShare
Loading in...5
×

HTML5 History API and Geolocation API at Jinal Desai .NET

356

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 History API and Geolocation API at Jinal Desai .NET"

  1. 1. Articles from Jinal Desai .NETHTML5 History API and Geolocation API2012-12-30 15:12:35 Jinal DesaiHTML5 History APIIt was very difficult to manipulate or control session history of particular browsingcontext before HTML5. Some workarounds like location.hash or page reloads arethere which is not reliable.HTML5 History API allows web developers to move forward and backward insession history or adding/removing entries from session history easily. It is theHistory 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 entriesconsists of a URL or a state object or both and in ddition can have title, a documentobject, 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 thesession 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. Ifthere is no next page to go to, it does nothing.window.history.go(n): Goes backwards or forwards by the specified number ofsteps in the joint session history. If the value you specify is zero, it will reload thecurrent page. If it would cause the target position to be outside the available range ofthe session history, then nothing happens.window.history.back(): Goes backwards by one step in the joint session history. Ifthere is no previous page to go to, it does nothing.window.history.pushState(data, title [, url]): Pushes the data specified in thearguments onto the session history, with the given title and URL (the URL isoptional).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 APIHTML5 Geolocation API is mainly used to track user’s geographical position, but thiscan compromise user’s privacy. Thus the position is not available unless the userapproves it. When the application is tracking user’s geographical location, browserwill 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’slatitude and longitude. That’s it, once we got latitude and longitude we can use
  2. 2. google map or bing map to plot it on the world map.There is window.navigator object provided to play with geolocation. We checkwhether browser is supporting the API or not in a similar manner we checked withStorage 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 thefunction 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 mapusing 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. 3. document.getElementById("mapSpan").innerHTML = "<img src="+imageURL+">";}The other properties returned by getCurrentPosition isposition.coords.latitude The latitude as a decimal numberposition.coords.longitude The longitude as a decimal numberposition.coords.accuracy The accuracy of positionposition.coords.altitude The altitude in meters above the mean sea levelposition.coords.altitudeAccuracy The altitude accuracy of positionposition.coords.heading The heading as degrees clockwise from Northposition.coords.speed The speed in meters per secondposition.timestamp The date/time of the responseGeolocation API’s watchPosition() and clearWatch() methodsWe can use watchPosition() for tracking moving objects like GPS in vehicle. TheclearWatch() stops calling watchPosition() method. The use of watchPosition() issimilar 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;}ConclusionUsing HTML5 it is now very handy tool for web developer to track user’s location orto play with history entries of browser context.

×