Travel Time API Example

In this example we use a lightweight JavaScript app to map an origin and two destinations, and display the walking travel times between them on the page. The page load triggers an AJAX request to our server-side script, which calls the Travel Time API and returns the response.

In this example we use the jQuery JavaScript library to make the AJAX request and we use PHP for the server-side script. We also use the handy Underscore.js JavaScript library when processing the response. You can use those or other technologies in your implementation.

Notes:

• The second store takes much longer to walk to because routing requires walking to a bridge.
• Hover over the table rows to highlight the corresponding marker
• Left-click the map to add a marker. Right click (control-click on Mac) on a marker to remove it

Sample code overview:

• Initiate an AJAX request for travel times (Use your browser's view source command to see the JavaScript that runs on this page).
• Call the Travel Time API from your server-side script and returning the response to the JavaScript client (see PHP example below).
• We receive the response in JavaScript and use it to map the results and display their corresponding travel times in the page HTML.

Making a Server-Side API Request

Calls to the Travel Time API must originate from your server. This is a PHP example script that can be called from your site's JavaScript.

<?
//IMPORTANT: Put your Walk Score API Key here:
$WS_API_KEY = "YOUR_KEY_HERE";
//Your API key should never appear in your client code sent to the browser

header('Content-Type: application/json');

function getTravelTimes($queryString) {
  global $WS_API_KEY;
  $baseUrl = "https://api2.walkscore.com/api/v1/traveltime/json";
  $url = $baseUrl . "?wsapikey=$WS_API_KEY&$queryString";
  $str = @file_get_contents($url);
  return $str;
}

$json = getTravelTimes($_SERVER['QUERY_STRING']);
echo $json;
?>
        

Back to the Travel Time API documentation.

Contact us for tech support.