This geocoder allows users to visualise their search results as pins on a map, as well as having a list view of addresses. It is available to be integrated into your app or website.
Simple geocoding request
This example will show you how to geocode a location string to coordinates and show the location on the map.
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 and import templates
First we need to create a HTML template:
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 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:
The full code
Finally we just call the `sendGeocodingRequest’ function to run everything. The full code can be found here.
Live code editor environment
Use CodePen to start testing now. You will need to sign up for a free API key.
About the TravelTime API
The TravelTime API can do many things as well as free geocoding:
- Display where's reachable within a time limit on a map, based on the mode of transport
- Calculate a travel time matrix (often called a distance matrix) from an origin to thousands of destinations
- A to B routing
To start using the TravelTime geocoder sign up for an API key. To learn more about geocoding for Leaflet, get in touch.