TravelTime platform blog

How to draw a radius on a map

Posted by Louisa Bainbridge on Aug 22, 2017 12:18:59 PM

This article is a how to guide to help draw a radius on a map and helps people visualise the surrounding area of a location. It start with simple ways that do not require development skills and expands to options that use code. Take a look at our blog for more tips on which map is best for you here.  

Option 1 - Drawing a radius on a map and comparing it to a travel time area

  1. Use our map tool to select a distance to draw the circle
  2. Click to compare radius catchment areas with a public transport travel time catchment area
  3. Click again to compare to driving time catchment areas
  4. Toggle the radius map and travel time map on and off 


Caption: Image taken from TravelTime Maps

Option 2 - Drawing a distance radius map using a web app

  1. Using Freemap tools select your straight line distance e.g. 5 miles from start point to perimeter
  2. Select a start point
  3. Select colours and line thickness
  4. Click draw radius


Caption: Image taken from Freemaptools

Option 3 - Using code

Take a look at our post that includes code snippets for how to create this shape below. 

Screenshot from 2018-06-27 13-44-40

Option 4 - Drawing a distance radius using a KML file and importing to a map program

  1. Create your radius shape here
  2. Create an account on Google My Maps and upload the KML using Google My Maps (or any other map program that accepts KML)
  3. Can edit the shape’s colours or change the base map to a satellite, terrain or different coloured view


Image taken from Google Maps

Option 5 - Creating a simple sample app that can generate a radius

  1. Create boilerplate code on a map application of your choice such as Mapbox
  2. Form a request for a mapping application such as Mapbox using your access token and radius parameter 
  3. Draw the response on a map

For more detailed instructions see Mapbox's documentation. 


Image is taken from Mapbox.

Option 6 - Drawing a travel time radius (an isochrone) using a web app

  1. Using the TravelTime Maps tool enter a start location and travel time area e.g. within 30 minutes
  2. Select a transport mode from public transport, driving, cycling and walking

draw a radius on a map

Image from TravelTime platform

New Call-to-action

Option 7 - Creating a simple sample app that can generate a travel time shape

  1. Create boilerplate code on a map application of your choice such as Leaflet
  2. Use a geocoder such as Google's Geocoding API to translate a location name into coordinates for use by the TravelTime API
  3. Form a request for the TravelTime API using your own API key that can be generated here 
  4. Draw the response on a map

For detailed instructions see this article. 


Image is taken from GISLounge article on TravelTime platform

Learn more

For information on radius apps and APIs check out: 

For more details check out our complete guide to radius map


Topics: radius maps, TravelTime Analytics, TravelTime Search, isochrone maps

Leave a Reply