Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Driving distance calculator

    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/Cal...tance_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

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    This any use?

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

    Code:
    <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>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    621
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Code:
    <!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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •