Distance Calculator with Times

3. Modify the Code

The final step in getting your own custom time/distance calculator on your web page is to modify the dist array that is at the top of the dist.js file so that it contains your list of cities (or other locations) and the distances and times 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 three entries.

The arrays of distances and times (the third level of the array structure) contains one entry each for each location entry that precedes it in the top level array. These entries are the distances and times (respectively) 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 10 is the distance in miles between Bricktown and Will Rogers Airport (in either direction) and 15 is the expected travel time in minutes.

Similarly when we look at the third entry in the main array, 11 and 14 are the distance from Bethany to Bricktown and Will Rogers Airport respectively and 18 and 21 are the corresponding expected travel times in minutes. The entries that follow are constructed the same way with each entry having one more value in each of the distances and times arrays than did the line before (since there is now one additional preceding line to give distances and times 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 rediculously large). An extra entry can always be added to the array simply by supplying the distances and times to all of the locations from the new location to those locations already in the array.