HTML5 has added plenty of resources that enhances the web browsing experience of its users. As a web developer, the point to note is that implementing these features on your site is much easier compared to what it has to offer. In this post, I will introduce you to Geolocation, a feature with which you can obtain the position in coordinates of a user.
This post is intended for those who has an entry level knowledge in JavaScript and HTML. If you are new to these, you still can try it out by saving the entire code as an HTML file an opening it using a browser.
Note that due to privacy issues, the browser always ask the user to confirm before sharing any location. No data will be retrieved if the user denies.
The accuracy of the displayed data depends on the type of device the user has. On a GPS enabled device, you will get a high level of accuracy (within few metres), where as on an ordinary device connected to the internet, the accuracy will vary considerably (from a few metres to a couple of kilometres).
The entire code (HTML along with JavaScript) is given below.
The onload event of the body has a function call to findLocation(). This function checks if Geolocation is enabled or not. If it is enabled, it calls the function getCurrentPosition(). This function has two arguments, the first one is the name of the function to be executed on success and the second parameter is the name of the function to be executed if error occurs.
The function display() displays the received data in the required location.
The function showError() receives the error code and displays an error message.
Geolocation feature is supported in most of the popular browsers. You can use the obtained location information along with Google maps to display the user location on a map, or to display some information relevant to that location on your site. So, now you have the tools required to start working. Now let your creativity take over.
This post is intended for those who has an entry level knowledge in JavaScript and HTML. If you are new to these, you still can try it out by saving the entire code as an HTML file an opening it using a browser.
Note that due to privacy issues, the browser always ask the user to confirm before sharing any location. No data will be retrieved if the user denies.
The accuracy of the displayed data depends on the type of device the user has. On a GPS enabled device, you will get a high level of accuracy (within few metres), where as on an ordinary device connected to the internet, the accuracy will vary considerably (from a few metres to a couple of kilometres).
The entire code (HTML along with JavaScript) is given below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function findLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(display, showError);
} else {
document.getElementById("msg").innerHTML="Geolocation is not supported by your browser.";
}
}
function display(position) {
document.getElementById("lat").innerHTML = position.coords.latitude;
document.getElementById("lon").innerHTML = position.coords.longitude;
}
function showError(error) {
var x = document.getElementById("msg");
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</head>
<body onload="findLocation()">
<div id="msg">Share your location when browser prompts</div>
<table border="1">
<tr><th>Latitude</th><td id="lat">Wait...</td></tr>
<tr><th>Longitude</th><td id="lon">Wait...</td></tr>
</table>
</div>
</html>
The onload event of the body has a function call to findLocation(). This function checks if Geolocation is enabled or not. If it is enabled, it calls the function getCurrentPosition(). This function has two arguments, the first one is the name of the function to be executed on success and the second parameter is the name of the function to be executed if error occurs.
The function display() displays the received data in the required location.
The function showError() receives the error code and displays an error message.
Geolocation feature is supported in most of the popular browsers. You can use the obtained location information along with Google maps to display the user location on a map, or to display some information relevant to that location on your site. So, now you have the tools required to start working. Now let your creativity take over.
Fantastic post............loved it
ReplyDelete