If you’ve ever wondered how far you can drive with a certain amount of time, a drive time polygon map is a great way to visualise this.
This tutorial will show you how to create a drive time polygon on a map using Google Maps and the TravelTime API. There is no Google Map Polygon API, but TravelTime can work with any third party mapping provider. The TravelTime API creates 1,000 free shapes per month – signup here.
These drive time polygons arealso known as an isochrones. They show the areas you can travel to within a time limit. The Isochrone API works with any transport mode, not just driving, so you can follow along to create a walking, cycling or public transport polygon too.
To follow along with the tutorial, you’ll need the following:
- The TravelTime API. If you’re new to TravelTime, you can sign up for a free API key here.
How to build a drive time map without code
This tutorial is intended for developers who want to implement a travel time polygon in on their projects. The polygon we are going to create will show us all the reachable areas within a 15 minute travel time from the Waterloo Train Station in London using various transporation types.
If you don’t want to code but still want to create a travel time map, you can use our free TravelTime app. In a few clicks, you can create a travel time map for driving and other transport modes.
Step 1 – Set up your map
To have a full-sized map on a page, you’ll need to add some styles to the code. In this case, we’ll use an .html file.
First, add the following elements to the body:
- A div tag with id of ‘map’;
- A script for Google Maps API: here, enter your API key;
- A script to handle the initMap() function. This will be used to initialise the map on the screen. In the mapOpts variable you can set the centre position of the map, the zoom level that will be shown by default.
Once you’ve added these elements, you can now create the map and have a marker positioned at the specified coordinates.
Step 2 – Draw the driving radius in Google Maps
To do this, you’ll need to add a couple of items to the initMap() function.
First, you need a polygon handling method for getting the bounds of the isochrone. This will allow you to zoom to the drawn polygon shape when it’s received after the search.
Then you’ll need to add the sendGeocodingRequest function. This will send a request to the TravelTime API and allow a polygon to be drawn.
In the second script, add the following setting variables:
- startingLocation – a string that will be geocoded as the starting point
- departureTime – this variable adds function to use the current date, but it can be changed
- travelTime – this indicates the travel time in seconds
- APPLICATION_ID – application won't work without correct authorisation
- API_KEY – the application won't work without correct authorisation
After you’ve defined the variables, you can add functions for communicating with the TravelTime API.
The sendGeocodingRequest function will send a query to the TravelTime API. This will get coordinates of the location written in the ‘location’ variable and call the sendTimeMapRequest function.
The sendTimeMapFunction function will convert parameters into a JSON format and send a POST request to the TravelTime API.
In this function, use the latitude and longitude that was geocoded in the previous step. Here, you can also define the parameters of the polygon. For example, you can change the “public_transport” type to “driving” or any other transport mode.
The final function in the script is drawTimeMap. This function handles drawing of the polygons received from TravelTime API.
The full Google Maps API polygon example code can be found here.
Step 3 – Visualising where you can drive within a time limit
Following the steps above, you can create a set of different travel time polygons. Here are a few examples, using different transport modes:
15-minute public transport travel time polygon
15-minute drive time polygon
15-minute cycling travel time polygon
15-minute walking travel time polygon
Step 4 - Calculate the total area of a Google Maps polygon
The most simple and fast-forward way of calculating Google Maps polygon's total area is by using the Geometry library. While extending the full Google Maps API polygon example code above, this can be done in two steps:
- Calculate the area size using the built-in library method
To summarize the purpose of the code snippet above, it can be said that firstly, we are creating a polygon showing all the locations that are reachable within a 15 minute travel time using public transport from the Waterloo Train Station in London. We assume the user is departing at 12 PM GMT. Afterwards, using Google's built-in library, we calculate the total area, which in this case sums to 2735418.9 m2.
Step 5 - Check if a points falls inside polygon
What else can I do with the TravelTime API?
Creating a single drive time map is only the tip of the iceberg when it comes to what you can do with the TravelTime API.
Here are three ideas of what else you can do with doing slight modifications to the base code that we already went through:
1. Create a heat map using different travel times
You can create visualisations representing incremental increases in your travel time radius.
The example compares where's reachable within 10 minutes, 20 minutes, 30 minutes, 40 minutes using public transport. Adding several layers of the shapes gives the appearance of a travel time heat map.
Check out the full code example for creating this visualisation here.
2. Find common areas between several travel times
You may want to find common areas between a few drive time radiuses. With the TravelTime API you can overlap multiple polygons and highlight the overlapping area on a map.
The example below shows an intersection of two shapes. One shape shows 30 minutes of reachable area from London Waterloo Station and the other shape shows 30 minutes of reachable area from Canary Wharf, both using public transport. The purple shows where both shapes overlap.
You can find the full code for this visualisation here.
3. Create unions of multiple travel time polygons
If you want to make a larger visualisation, you may be interested in making unions of many travel time shapes
The New York Times used this technique to analyse the whole of the US and see which parts of the country have limited access to emergency rooms during the COVID-19 pandemic.
The visualisation below was created by sending thousands of requests to TravelTime API and later processed to create a large-scale map. The orange sections show all locations more than 30 minutes away from an emergency room.
Now that you’ve built a drive time map, why not try creating travel time polygons for other transport modes?
With the TravelTime API, you can build travel time polygons for any mode of transport, including public transport, cycling and walking. There are many ways to use this in your applications, including showing house hunters where they can live within a specific commute time to work.
Check out our documentation to learn more about what you can do with the TravelTime API or sign up for a free API key.