How to Use the TravelTime Analytics API to do Geocoding for Free

by Niharika Sisodia
on Aug 23, 2018

What is a geocoding?

A geocoder is a service that converts an address into coordinates to be displayed on a map. It is also possible to use a reverse geocoder to convert coordinates to an address.

Free geocoding is available to be integrated into your app. It allows users to visualise their search results as pins on a map, as well as having a list view of addresses.

Free-geocoder

How to use the free geocoding API

The examples below will show you how to:

  • Create a simple geocoding request
  • Reverse geocode
  • Geocode with autocomplete
  • Geocode using TimeMap

TimeMap allows you to view areas that are reachable within a certain travel time. For example, show me all locations within 45 minutes drive time from JFK Airport at 6pm. To start using TimeMap and other features of the TravelTime Search API get in touch.

Download an API key

To add geocoding to your app, you’ll first need to request a TravelTime API key.

Simple Geocoding request

This example will show you how to geocode a location string to coordinates and show the location on the map.

geocoding

All of this will be done in a single HTML document using a Leaflet map library, jQuery for sending AJAX requests and the TravelTime Search API.

Step 1: Create/import templates

First, we need to create a HTML template:

In the header, we import Leaflet’s CSS template and JavaScript library as well as jQuery. The single <div> element will contain the map.

Step 2: Set location name

To make the example easier, we set the name for the location as a variable inside the code. In real-world use that will most likely to be typed into the search bar by the user.

Step 3: Add headers

The TravelTime API authenticates using headers so we will need to include those too:

Step  4: Send request

Now we can send a request to the Geocoding API. It is a very simple GET request that requires only a `query` field containing the name of the location. You can view a reference in the TravelTime Search API Geocoding documentation.

Step 5: Draw markers

In the success parameter, we reference a function that draws a marker on the map using the coordinates returned by the API. Here is the code:

Full code

Finally, we just call the `sendGeocodingRequest’ function to run everything.

The full code should look like this:

Reverse Geocoding

As well as converting an address into coordinates, you might need to convert coordinates into a place name or an address for that location. The reverse geocoding API can help achieve that.

reverse-geocoder

Step 1: Create/import templates

This example is similar to the one above. We will be using the same HTML template and tools. The only difference will be the JavaScript code.

Step 2: Set coordinates

In this case, instead of setting a name for the location, we set the coordinates:

Step 3: Add headers

We will also need the authentication headers from the previous example:

STEP 4: SEND REQUEST

This time the request is sent to a different endpoint and the request parameter contains two properties: `lat’ and ‘lng’.

Step 5: Draw markers

Drawing the marker on the map is similar to the geocoding example, except that we take the name of the location from the response and display it as a tooltip near the marker.

Full code

Finally we call the geocoding request function:

The full code should look like this:

Geocoder with Autocomplete

In practice, the most common use of geocoding in a web application is in conjunction with an autocomplete text input. Here is an example of how to achieve that.

geocoding

Step 1: Create/import templates

In this example, we need to change the HTML template as we will need an additional input element for the autocomplete text field, and a style for the autocomplete element itself. We will be using DevBridge Autocomplete script for this example. 

Step 2: Add limits

Now we need to set up the autocomplete plugin for the input element. To prevent flooding the API with requests and improve the page’s responsiveness, we will limit when the request can be sent. In this case, it will be that at least 2 characters have been typed. There will also be a delay of 100ms after the last character has been typed.

Step 3: Add transformer function

As the API and plugin were not designed to be compatible, the API’s response will not match the expected result. So, we will need to add a transformer function that will format the suggestions for the plugin. We will also need to add a function that will move the marker and the view of the map when a suggestion is selected.

Step 4: Map response locations

The expected response from the API from the plugin is of [ { value: “<text to display>”, data: <payload>}, … ] format, so we map through the response locations and reformat them accordingly. In this case, the data we need are the coordinates.

Step 5: Respond to suggestion

Finally, this is the function that is called when a suggestion is clicked. It moves the map marker to the locations set in the data property of the suggestion.

Full code

The final code should look like this:

Geocoding and TimeMap

This is a practical example of how to combine the free Geocoding and TimeMap functionality of the API into your application.

To start using the free geocoder, TimeMap and other features of the TravelTime Search API get in touch.

geocoding-Map

This example uses code from the autocomplete and geocoding sections of this tutorial (above). It also uses code from a previous tutorial on how to display a time map.

Step 1: Send request

Send a TimeMap request and display the response.

Step 2: Draw an isochrone

After adding the code above, we need to add a call to the sendTimeMapRequest function in the moveMarker function. This will initiate the drawing of the isochrone from the coordinates returned by the geocoder.

Full code

The full code should look like this:

Sign up for an API key now and start using the free geocoder and reverse geocoder.

 

Click

 

Related

Alternatives to the Google Driving Distance Matrix API

Cost effective alternative to the Google driving distance matrix API. Calculate driving times using the TravelTime Search API. Search from a single origin to 100,000 potential locations.

Niharika Sisodia Sep 27, 2018
READ

Google Maps Drive Time Polygon Tutorial: A Guide to Driving Radius

Visualise ‘how far can I travel’ on a Google Map within a drive time limit, for example a 30 minute driving radius. Follow the free developer guide using an API or use our quick tool to build without code.

Evelina Bezubec Sep 11, 2020
READ

Creating Isochrones Using Alteryx & Tableau (Part 2)

Use isochrones for tableau spatial analysis. Create a polygon to see where's reachable within a travel time limit. Useful for site selection and more.

Chris Hutchinson May 25, 2020
READ

Creating Isochrones Using Alteryx & Tableau (Part 1)

Tutorial of how to prepare isochrone data using Alteryx to visualise using Tableau. Useful for site selection, network analysis or field management.

Chris Hutchinson May 25, 2020
READ

Creating a Population Radius Using TravelTime

Catchment area analysis: a distance-based radius doesn’t reflect accessibility to the location. TravelTime allows search based on time instead of distance.

Chris Hutchinson Feb 17, 2020
READ

How to Create Isochrones with Postman and the Traveltime API

With this Time Map endpoint tutorial using postman, you can get a list of coordinates showing a perimeter of where’s reachable within a travel time limit.

Evelina Bezubec Nov 4, 2019
READ