Sep 24, 2021 • Blog

How to Use Free Geocoding with TravelTime API Today

facebook iconx icon

Contents

What is a geocoder?

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

 

facebook iconx icon

Contents

Calculate thousands of travel times with the TravelTime API

Discover more
cta accent icon