Sep 24, 2021 • Blog

How to Draw a Radius on a Map

facebook iconx icon

Contents

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.

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
Visualise locations like never before.
Transform journey time data into an unlimited number of dynamic isochrones maps every month, for one fixed price.
Try for free
cta accent icon
facebook iconx icon

Contents

Calculate thousands of travel times with the TravelTime API

Discover more
cta accent icon