Step by step free geocoding for Leaflet

by Louisa Bainbridge
on May 7, 2019

Leaflet is an open source javascript library for interactive maps. While it is designed to be as simple to use as possible, you can extend Leaflet functionality by using external plugins. There are several plugins you can use for geocoding with Leaflet. The example below will show you how to create a simple geocode request for a Leaflet map using the free TravelTime Search API.

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.

To start geocoding for Leaflet using this free geocoder, 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.


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:

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

See the Pen Geocoding for Leaflet by TravelTime (@traveltime) on CodePen.

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.




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

5 ways to do geocoding for free

Discover solutions that do geocoding for free. Find out which free geocoders have the best functionality. Convert addresses and postcodes into coordinates.

Evelina Bezubec Sep 9, 2019

5 Google Places API alternatives for points of interest data

Find Google Places API alternatives. Connect to a reliable 'points of interest' database via an API. Improve user experience and perfect your location search tool.

Louisa Bainbridge Jun 14, 2019

The guide to TravelTime API limits

Discover the volume of searches you can do per month and per minute on the TravelTime API free plan. You can use more than one search in an API request.

Louisa Bainbridge May 16, 2019

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 Mar 26, 2019

Isochrone API tutorial: see how far you can travel within a time limit with Leaflet & TravelTime API polygons

How far you can travel within 'X' minutes using different modes of transport? This isochrone API tutorial helps you make travel time maps. Use the TravelTime API for smart location intelligence.

Niharika Sisodia Feb 26, 2019