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.
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.