Explain Geo-location and web worker with an example in HTML 5 & CSS 3.

54views

written 6.2 years ago by

binitamayekar ★ 6.6k

Geo-location

Geolocation is a technology used to find out the exact location of user or user’s device in the world.
To do this it uses various things like IP address of computer, wireless network connection, cell tower of user’s phone and GPS to find out latitude or longitude information from satellites.
Geolocation is also very useful for location-specific information, like:
- Up-to-date local information
- Showing Points-of-interest near the user
- Turn-by-turn navigation (GPS)
The HTML Geolocation API is used to get the geographical position of a user. Since this can compromise privacy, the position is not available unless the user approves it.
NavigatorGeolocation Interface provides an object of the Geolocation Interface which is used to include Geolocation API in a Web page.
The Geolocation Interface provides the getCurrentPosition() method to get the current location of user’s device.
Example:

<!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="Please upgrade your browser.";}
}
function currentPosition(pos)
{
geo.innerHTML="(Latitude , Longitude)" + "<br>" + "(" + pos.coords.latitude + " , " 
 + pos.coords.longitude + ")"; }
</script>
</body>
</html>

The Geolocation object also has other interesting methods:
- watchPosition() - Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).
- clearWatch() - Stops the watchPosition() method.

Web Worker

A web worker is a JavaScript running in the background independently without interrupting any user interface script and without affecting the performance of the page.
They allow long tasks to be executed without disturbing the currently loaded page.
Web Workers don't have direct access to the web page and the DOM API.
Although Web Workers cannot block the browser UI, they can still consume CPU cycles and make the system less responsive.
They are heavy-weight scripts than JavaScript and cannot be used in large numbers. But one or more Web workers execute concurrently.
Web worker can be created by creating separate JavaScript file and creating new worker instance: <script>var worker = new worker(‘workerscript.js’)</script>
Here workerscript.js is a separate Web worker script file.
Event handler onmessage and postMessage() function are used to communicate between Web page and Web worker script file.
worker.onmessage = function (event) { alert(event.data); }; code of onmessage event handler is used to receive messages from workerscript.js
postMessage(some_data); workerscript.js files includes the postMessage() function for communication with the Web page.
When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.
To terminate a web worker, and free browser resources, use the terminate() method: worker.terminate();
If worker variable is undefined or not set, then after it has been terminated, worker code can be reused: worker = undefined;
The Web Worker cannot be paused and resumed it can only be terminated and restarted again.

ADD COMMENT EDIT