Free geocoding using the TravelTime API

by Niharika Sisodia
on Aug 23, 2018 4:17:17 PM

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.

 

SIGN UP FOR TRAVELTIME SEARCH API KEY

 

Related

TravelTime case study: healthcare development analysis

The Megahospital challenge is a tool created using the TravelTime API by Border City Data. See how the app was built for healthcare development analysis.

Niharika Sisodia Apr 8, 2019 9:08:00 AM
READ

Google Distance Matrix API vs. the TravelTime Search API

Google Distance Matrix and TravelTime Search both calculate travel times and distances from one to many points of interest. Compare the API features and pricing.

Niharika Sisodia Jan 28, 2019 4:04:45 PM
READ

10 brick and mortar store locator pages for inspiration

Get inspired by brick and mortar store locator pages. View store locator pages from top global retail brands. Attract customers to your brick and mortar store by creating an effective store locator page design.

Niharika Sisodia Dec 20, 2018 10:21:18 AM
READ

How to convert visitors into customers using map view

Improve your map UI. Perfect your website map view to streamline the user journey. Convert visitors to your site into customers for your product or service.

Niharika Sisodia Dec 18, 2018 3:30:14 PM
READ

How far can I travel in 15 minutes or 1 hour? This map shows you.

How far can I travel within a time limit? Make a map to show you where you can reach within a certain travel time. Change the mode of transport and time of day. Add up to three starting locations and filter the intersection between them.

Niharika Sisodia Nov 26, 2018 9:17:41 AM
READ

What is geocoding? Use geocoding to display postcodes on a map

What is geocoding and how does it work. Use a geocoder to convert place names and postcodes into coordinates. Display coordinates on a map. Use geocoding to improve routing and map display.

Niharika Sisodia Nov 22, 2018 9:26:41 AM
READ