Learn How to Create a Distance Meter Application using HTML5

In this article, we are going to create a Distance Meter Application using HTML5. This responsive application is helpful for tracking distance from one point to another, using HTML5 and the JavaScript Geo-location API. If you hit on the start tracking button, it will show you the coordinates in terms of longitude and latitude.

Steps for creating the structure: –
1. Now, we are going to create a folder called distance_meter. Inside this folder, we will create two files named – index.html and script.js

2. We need XAMPP (if you already have WAMPP, then you don’t need to download XAMPP). Ignore the next steps if you already have WAMPP or XAMPP installed.

FOR XAMPP: –
Download XAMPP from the link “https://www.apachefriends.org/index.html”according to your operating system.
Once you complete downloading, open it and you will get the “XAMPP Control Panel”. Click on the start button for Apache and MySQL, it should look something like this.

3. Once you start XAMPP, go to your installation drive and click on the “xampp” folder. Inside the folder, you will be able to see “htdocs” folder; open it and copy your “distance_meter” folder into it. I’ve attached the screen-shot below for reference:

Steps for Implementation: –
1. Now its time to start designing our project. We are going to design our UI using HTML, so we are going to add the following code in our index.html.

2. Once you are done with html we are going to add css part but we are not including any css file.We are adding css part in header tag using style element.I added the following code in my index.html after closing the title.

1

2

3

4

5

6

7

8

9

<style>

body{background:#f4f4f4;font-family:arial;font-size:18px;}

button{font-size:20px;padding:3px13px}

button#stopBtn{display:none;}

#container{width:100%;margin:0auto;text-align:center}

header{background:#333;padding:5px;}

header h1{color:#fff;font-size:30px;margin:0;padding:0;}

footer{background:#333;color:#fff;padding:8px;font-size:16px;}

</style>

So, after adding HTML and CSS our UI will look like this:

3. Now, we want to know about the user location. So, we are going to use The getCurrentPosition() method, which is used to return the user’s position. We are going to add the following code into our script.js file.

4. Now, we are going to add a few additional codes in our script.js file for error handling. It should look something like this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//Error handler

functionshowError(error){

switch(error.code){

caseerror.PERMISSION_DENIED:

alert('User denied the request for Geolocation');

break;

caseerror.POSITION_UNAVAILABLE:

alert('Location not available');

break;

caseerror.TIMEOUT:

alert('The request has timed out');

break;

caseerror.UNKNOWN_ERROR:

alert('There was an unknown error');

break;

}

}

5. Now, it time to add a logic for calculating the distance between start and updated as well as we are going to add the codes for stop tracking. You have to add the following code in your script.js file. The code is attached below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

//Calculate the distance between start and updated

functioncalculateDistance(lat1,lon1,lat2,lon2){

varR=6371;// km

vardLat=(lat2-lat1).toRad();

vardLon=(lon2-lon1).toRad();

vara=Math.sin(dLat/2)*Math.sin(dLat/2)+

Math.cos(lat1.toRad())*Math.cos(lat2.toRad())*

Math.sin(dLon/2)*Math.sin(dLon/2);

varc=2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));

vard=R *c;

returnd;

}

Number.prototype.toRad=function(){

returnthis*Math.PI/180;

}

//Stop tracking

functionstopTracking(){

navigator.geolocation.clearWatch(watchId);

alert('Tracking Has Stopped');

document.getElementById('stopBtn').style.display='none';

document.getElementById('startBtn').style.display='inline';

}

No we have completed coding in both the files – index.html and script.js. The files should look like this:Index.html: