Step by step free geocoding for Leaflet

by Louisa Bainbridge
on May 7, 2019 4:17:24 PM

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.

leaflet-geocoding

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.

geocoding-for-leaflet

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 iGeolise (@igeolise) 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.

GET AN API KEY

 

Related

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 21, 2019 10:15:50 AM
READ

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

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 Mar 14, 2019 11:10:35 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

The top 10 office relocation blogs

Our 10 favourite blogs to help with office relocation. Moving office guides to analyse potential areas for your office and plot staff addresses and manage time effectively when relocating.

Niharika Sisodia Jan 14, 2019 1:12:12 PM
READ