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.

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.

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:

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:

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


You will get the following output:


I hope this tutorial blog has been helpful for you guys in understanding how to create a Distance Meter Application using HTML5. Goodluck and Happy Coding!


Please enter your comment!
Please enter your name here