Knowing the goegraphical position of a stationary object or tracking the path of a mobile one can find enormous applications in Civil Engineering, particularly in fields like Traffic Engineering, Transport Planning, Advanced Surveying, etc. For example, tracking the path of a large set of moving vehicles in a city/town may help a traffic engineer in analysing the traffic patterns of the region and in identifying the most busy roads of the city/town. Similarly, surveyors can use the geographical coordinates of the points at the boundary of a large region to find the enclosed area.
The applications are many, but if manual methods (and not digital ones) are used to complete these objectives, it may turn out to be extremely tedious and time-taking. In the present article, we will see how to track the position of a point, a stationary object or a mobile one using the HTML5 Geolocation API (Application Program Interface) with the basics of web development. The article has been divided into two parts. In the first part (current one), we will see what is Geolocation, how it works, and how to get your geograhical coordinates with the API and display it in a map. In the forthcoming discussion, i would recommend you to learn basic HTML for a better understanding of the topic, though i have tried to explain the building of the source code and its execution in great detail.
Knowing the geographical position of any object in the world primarily consists of knowing two major attributes associated with it: the lattitude and the longitude (and sometimes altitude as well). HTML5 Geolocation API helps in getting these position attributes (and more), associated with it's user. One simply needs to incorporate the API in one's website or app in order to get those attributes. This task is accomplished in two steps. The first step involves getting the geolocation of the target user as input, which is done with the help of basic HTML5 and Javascript. The second step involves transferring this data to the owner (or tracker) and display the data as part of map (using the Google Map API).
First of all, you would need a text-editor in order to write the code. Open Notepad++ in your computer. If you don't have Notepad++, you can also use other text-editors like Sublime or Windows' built-in text-editor Notepad. However, i would encourage you to avoid notepad and install Notepad++ (to download, click here). After opening the text-editor, start with the following code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your global position coordinates.</p>
<button onclick="getLocation()">Get your position</button>
<p id="demo"></p>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude + "<br>accuracy: " + position.coords.accuracy;
}
function showError(error) {
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>
</body>
</html>
Quick Explanation
Before proceeding further, it is important to mention that the Geolocation API is not compatible with all the browsers, though it works well with Chrome 5.0 and above, IE 9 and above, and Firefox 3.5 above. The code above verifies if your browser supports Geolocation, if yes, then the getCurrentPosition function is used to record your position, which is then displayed in the "demo" division of the web page and if not, "Geolocation is not supported by this browser" is returned as output. The next part of the code displays the coordinates of your position in a map, held by the "mapholder" division of the webpage; in case in any errors occur in the above task, it is displayed as handled by the error handler in the last part of the this code.
Get your hands dirty by running the above code yourself; simply, copy the above code in notepad++ and save the file with .html extension (and file type as All files) and then open the saved file with your browser.
The above code detects the position of the user and displays it using the Google Map API in the same page the user visits. Thus, it helps the user in identifying his own position, and does no use to the surveyor or the owner of the web page.
Two Important Functions
The getCurrentPosition function gets the target's (preferably a stationary target) position only for one single time. It takes two arguments in the form of callbacks: one for a success position query and the other for a failure position query. The position object has the following properties:
The getCurrentPosition function is primarily for getting the position of a stationary object. Another function called the watchPosition returns constantly updated position attributes for a moving object.
To read the full documentation of the HTML5 Geolocation API, click here.
In the above code, getCurrentPosition has been used to return the values of three primary position object properties: lattitude, longitude and the accuracy.
Speaking of accuracy, it's value can largely vary with the type of device used for running the API code. Now, different devices have different degrees of accuracy. A cell phone that has a GPS unit inside of it that is switched on is usually accurate within thirty meters. A cell phone without a GPS unit, with the GPS unit switched off to maximize battery, or at a location where the GPS can’t contact the GPS satellites will have to use cell tower triangulation to estimate the users location and is typically accurate within 3000 meters which is almost completely useless for our purposes.
For our purpose, it is highly recommended that you use a phone with "GPS On" in order to get the most accurate tracking results of the moving object. What i mean to say is that, after the coding is done, and the web page is uploaded in a server(it has to be, so that the web page can be accessed from any device and not just your laptop), it should be accessed with a "GPS On" device for good results.
In this part of the article, we have seen what is Geolocation, how it works, and how to get your geograhical coordinates with the API and display it in a map. We will see the remaining portion in the second part of the article.
Did this article help you? Comment below and follow my blog for the second part...
The applications are many, but if manual methods (and not digital ones) are used to complete these objectives, it may turn out to be extremely tedious and time-taking. In the present article, we will see how to track the position of a point, a stationary object or a mobile one using the HTML5 Geolocation API (Application Program Interface) with the basics of web development. The article has been divided into two parts. In the first part (current one), we will see what is Geolocation, how it works, and how to get your geograhical coordinates with the API and display it in a map. In the forthcoming discussion, i would recommend you to learn basic HTML for a better understanding of the topic, though i have tried to explain the building of the source code and its execution in great detail.
Knowing the geographical position of any object in the world primarily consists of knowing two major attributes associated with it: the lattitude and the longitude (and sometimes altitude as well). HTML5 Geolocation API helps in getting these position attributes (and more), associated with it's user. One simply needs to incorporate the API in one's website or app in order to get those attributes. This task is accomplished in two steps. The first step involves getting the geolocation of the target user as input, which is done with the help of basic HTML5 and Javascript. The second step involves transferring this data to the owner (or tracker) and display the data as part of map (using the Google Map API).
First of all, you would need a text-editor in order to write the code. Open Notepad++ in your computer. If you don't have Notepad++, you can also use other text-editors like Sublime or Windows' built-in text-editor Notepad. However, i would encourage you to avoid notepad and install Notepad++ (to download, click here). After opening the text-editor, start with the following code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your global position coordinates.</p>
<button onclick="getLocation()">Get your position</button>
<p id="demo"></p>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude + "<br>accuracy: " + position.coords.accuracy;
}
function showError(error) {
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>
</body>
</html>
Quick Explanation
Before proceeding further, it is important to mention that the Geolocation API is not compatible with all the browsers, though it works well with Chrome 5.0 and above, IE 9 and above, and Firefox 3.5 above. The code above verifies if your browser supports Geolocation, if yes, then the getCurrentPosition function is used to record your position, which is then displayed in the "demo" division of the web page and if not, "Geolocation is not supported by this browser" is returned as output. The next part of the code displays the coordinates of your position in a map, held by the "mapholder" division of the webpage; in case in any errors occur in the above task, it is displayed as handled by the error handler in the last part of the this code.
Get your hands dirty by running the above code yourself; simply, copy the above code in notepad++ and save the file with .html extension (and file type as All files) and then open the saved file with your browser.
The above code detects the position of the user and displays it using the Google Map API in the same page the user visits. Thus, it helps the user in identifying his own position, and does no use to the surveyor or the owner of the web page.
Two Important Functions
The getCurrentPosition function gets the target's (preferably a stationary target) position only for one single time. It takes two arguments in the form of callbacks: one for a success position query and the other for a failure position query. The position object has the following properties:
| Property | Value | Unit |
| coords.latitude | double | degrees |
| coords.longitude | double | degrees |
| coords.altitude | double or null | meters |
| coords.accuracy | double | meters |
| coords.altitudeAccuracy | double or null | meters |
| coords.heading | double or null | degrees clockwise |
| coords.speed | double or null | meters/second |
The getCurrentPosition function is primarily for getting the position of a stationary object. Another function called the watchPosition returns constantly updated position attributes for a moving object.
To read the full documentation of the HTML5 Geolocation API, click here.
In the above code, getCurrentPosition has been used to return the values of three primary position object properties: lattitude, longitude and the accuracy.
Speaking of accuracy, it's value can largely vary with the type of device used for running the API code. Now, different devices have different degrees of accuracy. A cell phone that has a GPS unit inside of it that is switched on is usually accurate within thirty meters. A cell phone without a GPS unit, with the GPS unit switched off to maximize battery, or at a location where the GPS can’t contact the GPS satellites will have to use cell tower triangulation to estimate the users location and is typically accurate within 3000 meters which is almost completely useless for our purposes.
For our purpose, it is highly recommended that you use a phone with "GPS On" in order to get the most accurate tracking results of the moving object. What i mean to say is that, after the coding is done, and the web page is uploaded in a server(it has to be, so that the web page can be accessed from any device and not just your laptop), it should be accessed with a "GPS On" device for good results.
In this part of the article, we have seen what is Geolocation, how it works, and how to get your geograhical coordinates with the API and display it in a map. We will see the remaining portion in the second part of the article.
Did this article help you? Comment below and follow my blog for the second part...
