...

View Full Version : Driving distance calculator



kalas
12-17-2004, 09:59 AM
Hello


I am trying to create a driving distance calculator with JavaScript.
The first 2 pull down menus will be used for the list of starting cities and destinations cities.
If you select for instance city3 from the starting cities list and cityD from the desination cities list, you will get the driving destination on a box beneath those 2 lists, like this http://www.convertit.com/Go/Maps/Calculators/Geography/Driving_Distance_Calc.ASP
but only in Km.

Could this be done? Could you help me to creati this script, because I am newbie at this field. Just give me an example with two cities on the starting cities list and two cities at the destination cities list. Then I will found my way, based at your example.

I have to say that the URL that I gave you uses a latitude and longitude mechanism in order to calculate the distance between the starting and destination cities. I donít want this to happen with my script. I want to give the driving distance between cities by myself as I create it.

Thanks in advance
Peter

Spudhead
12-17-2004, 03:19 PM
This any use?

I hope it's fairly self-explanatory; it's just a multidimensional array basically.



<html>
<head>
<title></title>

<script language="JavaScript">
var distances = new Array(5);
distances["London"] = new Array('0','2','3','4','5');
distances["Paris"] = new Array('6','0','8','9','10');
distances["Berlin"] = new Array('11','12','0','14','15');
distances["Moscow"] = new Array('16','17','18','0','20');
distances["Sydney"] = new Array('21','22','23','24','0');

function getDistance(originCity, destCity){
return distances[originCity][destCity];
}


</script>


</head>

<body>

<select id="sOriginCity">
<option value="London">London</option>
<option value="Paris">Paris</option>
<option value="Berlin">Berlin</option>
<option value="Moscow">Moscow</option>
<option value="Sydney">Sydney</option>
</select>

<select id="sDestCity">
<option value="0">London</option>
<option value="1">Paris</option>
<option value="2">Berlin</option>
<option value="3">Moscow</option>
<option value="4">Sydney</option>
</select>

<input type="button" value="Calculate" onClick="alert(getDistance(document.getElementById('sOriginCity').options[document.getElementById('sOriginCity').selectedIndex].value, document.getElementById('sDestCity').options[document.getElementById('sDestCity').selectedIndex].value))">

</body>
</html>

jalarie
12-17-2004, 06:15 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US">
<head>

<title>Distance Between Cities</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Author" content="James Alarie - jalarie@umich.edu" />
<link rev="made" href="mailto:jalarie@umich.edu" />

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="expires" content="0" />

<!--
Author: James Alarie
Company: University of Michigan - Flint
Address: Murchie Science Building - 203E
303 E Kearsley St
Flint MI 48502
United States of America

Telephone: +1-810-762-3394x21
Fax: +1-810-762-3687
Web Site: http://spruce.flint.umich.edu/~jalarie/
E-Mail: jalarie@umich.edu
Comments: Having said that, I've probably told you more than I know.
-->

</head>

<body background="jaa_bgnd.jpg" bgcolor="#ffffee" text="black"
link="blue" vlink="#800088" alink="red">
<!-- Page Header -->
<center><h1>Distance Between Cities</h1></center>
<hr />

<!-- Content -->
<noscript>
<font color="red">
You must have javascript to make use of this page.
</font>
</noscript>
<script type="text/javascript">
<!-- Hide this code from non-JavaScript browsers
CityList=new Array(
'Flint~fnt~dtm=60~lax=1100',
'Detroit~dtm~fnt=61~lax=1500',
'Los Angeles~lax~fnt=1101~dtm=1599'
);
Out ='';
Out+=' <br \/>\n';
Out+=' <center>\n';
Out+=' <form method="post" action="" onsubmit="return GetDistance()">\n';
Out+=' From:&nbsp;&nbsp;\n';
Out+=' <select name="GoFrom" id="GoFrom">\n';
document.write(Out);
for (ix1=0; ix1<CityList.length; ix1++) {
CL_line=CityList[ix1];
CL_items=CL_line.split(/~/);
Out ='';
Out+=' <option value="'+CL_items[1]+'">'+CL_items[0]+'<\/option\n';
document.write(Out);
}
Out ='';
Out+=' <\/select>\n';
Out+=' &nbsp;&nbsp;&nbsp;&nbsp;To:&nbsp;&nbsp;\n';
Out+=' <select name="GoTo" id="GoTo">\n';
document.write(Out);
for (ix1=0; ix1<CityList.length; ix1++) {
CL_line=CityList[ix1];
CL_items=CL_line.split(/~/);
Out ='';
Out+=' <option value="'+CL_items[1]+'">'+CL_items[0]+'<\/option\n';
document.write(Out);
}
Out =''
Out+=' <\/select>\n';
Out+=' <br \/><br \/>\n';
Out+=' <input type="submit" value=" Submit " title=" Submit " \/>&nbsp;\n';
Out+=' <input type="reset" value=" Reset " title=" Reset " \/>\n';
Out+=' <br \/><br \/>\n';
Out+=' Distance:&nbsp;&nbsp;\n';
Out+=' <input type="text" name="result" id="result" \/>\n';
Out+=' </form>\n';
Out+=' </center>\n';
document.write(Out);

function GetDistance() {
f1=document.forms[0]; // abbreviation
FI=f1.GoFrom.selectedIndex; // the 'from' index
FV=f1.GoFrom.options[FI].value; // ...code
FT=f1.GoFrom.options[FI].text; // ...text
TI=f1.GoTo.selectedIndex; // the 'to' index
TV=f1.GoTo.options[TI].value;
TT=f1.GoTo.options[TI].text;
if (FV == TV) { // short trip!
f1.result.value=0;
return false;
}
CL_line=CityList[FI];
CL_items=CL_line.split(/~/);
for (ix1=2; ix1<CL_items.length; ix1++) {
CL_item=CL_items[ix1];
ix2=CL_item.indexOf('=');
Code=CL_item.substring(0,ix2);
Distance=CL_item.substring(ix2+1);
if (Code == TV) {
f1.result.value=Distance;
return false;
}
}
f1.result.value=FT+' to '+TT+' not found.';
return false;
}
// End hiding -->
</script>

<!-- Page Footer -->
<br clear="all" /><hr />
Written on December 17, 2004, by:&nbsp;
<a href="mailto:jalarie@umich.edu">James Alarie</a>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum