HTML5 - SPLessons

HTML5 Geolocation

Chapter 23

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Geolocation

HTML5 Geolocation

shape Introduction

HTML5 Geolocation is used to allow the geographical position of the user by using Geolocation APIs.Following are the concepts covered.

  • What is Geolocation
  • Options
  • Browser Support

What is Geolocation

shape Description

The HTML5 Geolocation is used to share the current location with the Web browsers. The Location comprises of a couple of directions meaning the latitude and longitude of the subject. GeloLocation is also used to find the business locations and users locations on a map.

Several types of sources have to be used for the API of Geolocation which can be defined as follows.

Options

shape Description

HTML5 Geolocation introduced some options to increase the functionality of the geolocation API those methods are described below.

getcurrentpoisition()

shape Description

The method is used to get the current position of the user. Geolocation object is used to retrieve the current location, which is present in the navigator.geolocation property. There are 3 methods to get the current position as follows.

The code below is used to demonstrate the getting the current position.

<!DOCTYPE html>
<html>
	<style>
		button{font:1em Arial; background:#fa4b2a; color:#fff;}
		p{font:1em Verdana; color:#fa4b2a;}
	</style>
	<body>
		<p id="output"></p>
			<button onclick="getCoordinates()">
			Click here to find your current location</button>
			<script>
				var geo=document.getElementById("output");
				function getCoordinates()
				{
				if (navigator.geolocation)
				{
				navigator.geolocation.getCurrentPosition(currentPosition);
				}
				else{geo.innerHTML="Yikes!! Please upgrade your dinasaur browser.";}
				}
				function currentPosition(pos)
				{
				geo.innerHTML="(Latitude , Longitude)" + "<br>" + "("
				+ pos.coords.latitude + " , " +
				+ pos.coords.longitude + ")";	
				}
			</script>
	</body>
</html>                                                                                                                                           

Result
By running the above code in a preferred browser following output appears.

Error Handling

shape Description

While working with the Geolocation API frequently user can get some errors, to solve those errors HTML5 introduced error codes as shown below.

The code below demonstrates about the error handling.

<!DOCTYPE html>
<html>
	<style>
		button{font:1em Arial; background:#0000FF; color:#fff;}
		p{font:1em Verdana; color:#FE642E;}
		body{font:1em helvetica; color:#FF0000;}
	</style>
	<body>
		Position Coordinates:<p id="output"></p><br>
		Timestamp:<p id="timestamp"></p><br>
		Errorcode:<p id="errorcode"></p><br>
		Errormessage:<p id="errormsg"></p><br>
		<button onclick="getCoordinates()">
		Click here to find your current location</button>
		<script>
			var geo=document.getElementById("output");
			function getCoordinates()
			{
			if (navigator.geolocation)
			{
			navigator.geolocation.getCurrentPosition(currentPosition, error_callback);
			}
			else{geo.innerHTML="Yikes!! Please upgrade your dinasaur browser.";}
			}
			function currentPosition(pos)
			{
			geo.innerHTML="(Latitude , Longitude)" + "<br>" + "("
			+ pos.coords.latitude + " , " +
			+ pos.coords.longitude + ")"; 
			document.getElementById("timestamp").innerHTML = pos.timestamp;
			} 
			function error_callback(error) { 
			document.getElementById("errorcode").innerHTML = error.code; 
			document.getElementById("errormsg").innerHTML = error.message; 
			} 
		</script>
		<p>"Refuse permission to detect location, inorder to see the error demo".</p>
	</body>
</html>                                                                                                                                                                                                             

Result
By running the above code in a preferred browser, the following output is obtained.

poistionOptions

shape Description

The method is used to define how location data is gathered in a getCurrentPoisition() method properties of this method as follows.

The code below demonstrate how to position options.

<!DOCTYPE html>
<html>
	<style>
		button{font:1em Arial; background:#0000FF; color:#fff;}
		p{font:1em Verdana; color:#fa4b2a;}
		body{font:1em helvetica; color:#0F0694;}
	</style>
	<body>
		Position Coordinates:<p id="output"></p><br>
		Timestamp:<p id="timestamp"></p><br>
		Errorcode:<p id="errorcode"></p><br>
		Errormessage:<p id="errormsg"></p><br>
		<button onclick="getCoordinates()">
		Click here to find your current location</button>
		<script>
			var geo=document.getElementById("output");
			// Position Object Options
			var options = { enableHighAccuracy: high, 
                  timeout:500, 				  
                   maximumAge:5000 }; 
			//----------------------------------------------------//
			function getCoordinates()
			{
			if (navigator.geolocation)
			{
			navigator.geolocation.getCurrentPosition(currentPosition, error_callback, options);
			}
			else{geo.innerHTML="Yikes!! Please upgrade your dinasaur browser.";}
			}
			function currentPosition(pos)
			{
			geo.innerHTML="(Latitude , Longitude)" + "<br>" + "("
			+ pos.coords.latitude + " , " +
			+ pos.coords.longitude + ")";   
			document.getElementById("timestamp").innerHTML = pos.timestamp;
			}
			function error_callback(error) { 
			document.getElementById("errorcode").innerHTML = error.code; 
			document.getElementById("errormsg").innerHTML = error.message; 
			} 
		</script>
	</body>
</html>                                                                                                                                                                                                                   

Result
By running the above code in a preferred browser, the following output is obtained.

watchPoisition()

shape Description

watchPoisition() method is used to monitor updating the positions with Geolocation API. The location Update always called when the position get changes as shown below.

watchPoisition(locationUpdate, handleError, options)

The code below demonstrates the watch position options.

<!DOCTYPE html>
<html>
	<style>
		button{font:1em Arial; background:#0000FF; color:#fff;}
		p{font:1em Verdana; color:#fa4b2a;}
		body{font:1em helvetica; color:#FF0000;}
	</style>
	<body>
		Position Coordinates:<p id="output"></p><br>
		Timestamp:<p id="timestamp"></p><br>
		Errorcode:<p id="errorcode"></p><br>
		Errormessage:<p id="errormsg"></p><br>
		<button onclick="getCoordinates()">
		Click here to find your current location</button>	<br> 
		<script>
			var geo=document.getElementById("output");
			var options = { enableHighAccuracy: high, 
                  timeout:500, 
                   maximumAge:5000 };  
			function getCoordinates()
			{
			if (navigator.geolocation)
			{
			navigator.geolocation.watchPosition(currentPosition, error_callback, options);
			}
			else{geo.innerHTML="Yikes!! Please upgrade your dinasaur browser.";}
			}
			function currentPosition(pos)
			{
			geo.innerHTML="(Latitude , Longitude)" + "<br>" + "("
			+ pos.coords.latitude + " , " +
			+ pos.coords.longitude + ")";  
			document.getElementById("timestamp").innerHTML = pos.timestamp;
			}
			function error_callback(error) { 
			document.getElementById("errorcode").innerHTML = error.code; 
			document.getElementById("errormsg").innerHTML = error.message; 
			} 
		</script>
		<hr>
		<small>NOTE: The method <b>watchPosition()</b> functions similar to <br><b>getCurrentPosition()</b> but <b>locationUpdate</b>
		function is called <br>continiously as position changes,
		it can be used to monitor position of a moving object.</small> 
	</body>
</html>

Result
By running the above code in a preferred browser, the following output is obtained.

clearWatch()

shape Description

By using clearWatch() method user can stop monitoring the location which gives signals to the Geolocation service about stop gathering location updates as shown below.

clearWatch(watchId)

The code below is used to demonstrate the clear watch as follows.

<!DOCTYPE html>
<html>
	<style>
		button{font:1em Arial; background:#0000FF; color:#fff;}
		p{font:1em Verdana; color:#fa4b2a;}
		body{font:1em helvetica; color:#FF0000;}
	</style>
	<body>
		Position Coordinates:<p id="output"></p><br>
		Timestamp:<p id="timestamp"></p><br>
		Errorcode:<p id="errorcode"></p><br>
		Errormessage:<p id="errormsg"></p><br>
		<button onclick="getCoordinates()">
		Click here to find your current location</button>	<br>
		<button onclick="clearwatch">
		Stop Position Monitoring</button><br>	
		<script>
			var geo=document.getElementById("output"); 
			var options = { enableHighAccuracy: high, 
                  timeout:500, 
                   maximumAge:5000 }; 
  
			document.getElementById("clearwatch").onclick = function() { 
			navigator.geolocation.clearWatch(watchID);} 
			function getCoordinates()
			{
			if (navigator.geolocation)
			{
			navigator.geolocation.watchPosition(currentPosition, error_callback, options);
			}
			else{geo.innerHTML="Yikes!! Please upgrade your dinasaur browser.";}
			}
			function currentPosition(pos)
			{
			geo.innerHTML="(Latitude , Longitude)" + "<br>" + "("
			+ pos.coords.latitude + " , " +
			+ pos.coords.longitude + ")"; 
			document.getElementById("timestamp").innerHTML = pos.timestamp;
			}
			function error_callback(error) { 
			document.getElementById("errorcode").innerHTML = error.code; 
			document.getElementById("errormsg").innerHTML = error.message;
			} 
		</script>
		<small>You can stop Monitoring position by using Geolocation API's method <b>clearWatch(watchID)</b> </small> 
	</body>
</html>

Result
By running the above code in a preferred browser, the following output is obtained.

Browser Support

shape Description

HTML5 Geolocation is supported by all the latest browsers.Following are the browser versions supported by HTML5.

The code below demonstrates how to check the users Browser supports or not.

<!DOCTYPE html>
<html>
<body>
<p id="check"> </p>
<button onclick="checkSupport()">Check Browser Support</button> 

	<script>
	function checkSupport() { 
        if(navigator.geolocation) { 
           document.getElementById("check").innerHTML =
		   "Awesome! Your Browser supports HTML5 Geolocation API."; 

      } else { 
            document.getElementById("check").innerHTML = 
			"Yikes! Upadate your Dinasaur Browser."; 
           } 
      } 
	</script>
</body>
 </html>  

Result
By running the above code in a preferred browser, the following output is obtained.

Summary

shape Points

  • To detect the location, latitude and longitudes are mandatory.
  • JavaScript is used to capture latitude and longitude.
  • Now-a-days most of the devices support geolocation.