Distance Calculator

If you have a travel related web site or any kind of site where your visitors are interested in distances then this distance calculator may be just the addition you are looking for to put on your site.

The following example displays the distances between a small number of cities in Europe but the script can be easily adapted to work with any locations simply by entering the names of the locations and the distance (in kilometres) between them into a multi-dimensional array. The script simply requires starting and destination cities to be selected and the distance between them will be extracted from the array and displayed.

To insert the distance calculator into your page the first thing you need to do is to put the following HTML into the body of your page where you want the calculator to appear. The form itself will be added by the JavaScript so that you don't end up with a broken form in your page when your visitor has JavaScript disabled.. This script is completely unobtrusive except for the id used in the div and you can even change that if you need to by simply amending the value in the line above the array at the bottom of the script.

<div id="f"></div>

You also need to add a small piece of HTML just before the </body> tag to link the Javascript into the page so that the calculator will function.

<script type="text/javascript" src="dist.js"></script>

Next, copy the following JavaScript code and save it in a file called dist.js (which you have just linked into your page. Don't worry about the fact that the cities in the array are not the ones you want, we'll fix that afterwards).


The final step in getting your own custom distance calculator on your web page is to modify the array that is at the bottom of the dist.js file so that it contains your list of cities (or other locations) and the distances between them. To be able to make the required modifications you will need to understand how that complex array structure needs to be arranged in order to work with the script.

There are actually three levels of arrays that are nested inside of one another in building up the structure that we need. The outermost array contains one entry for each city or location.


Each of these entries consists of an array that itself has two entries.


The array of distances (the third level of the array structure) contains one entry for each location entry that precedes it in the top level array. These entries are the distances in kilometres between this location and each of the preceding locations (starting from the top of the array). As the first location has no entries preceding it this location has no entries in this array. The second location has one location preceding it and so the array has one entry. In the supplied example code the 1268 is the distance in kilometres between Paris and Madrid (in either direction).


Similarly when we look at the third entry in the main array, 1786 is the distance between Paris and Lisbon in kilometres and 638 is the distance between Madrid and Lisbon in kilometres. The entries that follow are constructed the same way with each entry having one more value in the distances array than did the line before (since there is now one additional preceding line to give distances to).

The entries will be displayed in alphabetical order in the two drop down lists regardless of which order they are entered in the array so you can add the entries in to the array in whichever order is easiest. There is no limit as to how many locations that you can have in your drop down lists (apart from those imposed by browsers when your page starts to get ridiculously large). An extra entry can always be added to the array simply by supplying the distances to all of the locations from the new location to those locations already in the array.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow