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 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 - 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 4 - 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 5 - 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

travel-time-radius-isochrone-example-map-london-bridge

Image from TravelTime platform

New Call-to-action

Option 6 - 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 platform

Learn more

For information on radius apps and APIs check out: 

 

Visit the map resource centre

Topics: radius maps

Leave a Reply

Convert 300% more users 

TravelTime search is 3x more effective in converting users than a miles radius location search 

Whether your users are searching for their next property, job or a place to stay, it’s important that they’re given the right locations to choose from. Instead of assuming they can go as the crow flies, TravelTime Search API finds and filters points of interest by time.  

  • Personalised: users can filter by transport mode and time of travel
  • Contextual: search areas change with congestion and location
  • Relevant: results are 60% more relevant when using time vs. distance

TRY TRAVELTIME SEARCHING NOW

Subscribe to Email Updates

Recent Posts