How to draw a radius on a map

by Louisa Bainbridge
on Aug 16, 2017

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 

radius-map-app-drive-time

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

radius-map-london-bridge

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

Google-Maps-Radius-Map

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.

Mapbox-radius-map-example

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

Click

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. 

isochrone-radius-example-london.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Image is taken from GISLounge article on TravelTime

Learn more

For information on radius apps and APIs check out: 

For more details check out our complete guide to radius map

 

Related

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
READ

Make a commute radius map

How to make a commute radius map. Easy steps to use our commute calculator tool using driving, cycling, walking and public transport.

Louisa Bainbridge Jul 28, 2020
READ

Totaljobs launch with TravelTime, increase conversions 10%

How one of the largest UK job portals, Totaljobs, implemented TravelTime on their website to increase conversions by 10%.

Evelina Bezubec Apr 22, 2020
READ

The Telegraph use TravelTime to highlight access to hospitals across the UK

The Telegraph used TravelTime analysis to identify how many people in the UK do not have access to a coronavirus test centre within 1 hour drive times. Explore the case study.

Louisa Bainbridge May 7, 2020
READ

Tutorial for Making Isochrones With Postman & Traveltime API

With this Time Map endpoint tutorial using postman, you can get a list of coordinates showing a perimeter of where’s reachable within a travel time limit.

Evelina Bezubec Nov 4, 2019
READ

IKEA's marketing team uses TravelTime to create a drive time map

IKEA uses TravelTime to build a drive time map. See how their marketing team use it to adjust messaging to their audience.

Evelina Bezubec Oct 9, 2019
READ