How to make a distance radius map

by Niharika Sisodia
on Jun 28, 2018 11:21:48 AM

What is a distance radius map?

You can create a map with distance radius by drawing a straight line from a central point to all possible points in a circle. Distance radius maps are useful for discovering points of interest in an area.distance-radius-map

How do I make a distance radius map?

If you are not a developer, don’t worry. You don’t have to be able to code to draw a distance radius map. If you are, jump to the code here. There are lots of free tools online that do the heavy lifting for you.The tool below can help you make radius distance maps in seconds, or use the code example below.

TravelTime Platform Distance Radius Map tool

iGeolise have created a distance radius map tool that allows you to draw a radius map with distance, and to make isochrones using time.

distance-radius-map-searchbar

  • Enter the distance you would like the radius map to cover (in miles or km)
  • Enter the central point you would like to start from (postcode or area)
  • Click ‘GO’

distance-radius-map

To view travel times click ‘view reachable area by public transport’

distance-radius-map-public-transport

Click ‘view reachable area by driving’

distance-radius-map-result-driving

 To edit the departure/arrival time, or create cycling, walking, driving and train maps use the TravelTimePlatform

map-with-distance-radius

 You can also code radius distance maps, which allows you to integrate maps into your products and services. A radius distance map can be useful for data analysis and can enhance user experience.  For more on radius maps take a look at our resource page.

How do I code a map with radius distance?

map-with-radius-distance

The code example below shows you how to code a 10 mile radius from The White House, Washington DC on a Leaflet map. This example creates a map like the one displayed above. 

Step by step

Create boilerplate code on a map application, the example below uses Leaflet

However, currently this displays a blank page. To set up the map to be displayed on the page we should use a function like this:

To allow users to interact with the map, you will also need to use a geocoder, such as the free TravelTime API Geocoder. A geocoder turns location names and postcodes into coordinates to be displayed on a map. This means that users will be able to enter a distance and location and create their own radius distance maps. 

Use a geocoder translate a location name into coordinates

First we need to define everything needed for the geocoding request. Usually the name of the location is taken from an input element on the page but for our example we will use a single constant.

Our geocoding api requires authentication in the header:

Now we can send the geocoding request:

Finally we get to actually showing the radius on the map. A radius is just a circle. We want to draw a radius of 10 miles.

Now let’s take a look at all of our code in one place:

How do I code a map with travel time distance?

You can also use an API to show where you can get within X minutes. The example below shows where you can reach in 30 minutes by public transport in London. Get API keys here and contact support with any questions.   

time-travel-GIS-london

 

 

 

 

 

 

 

 

 

 

 

 

 

New Call-to-action

 

Related

Isochrone analysis made easy

Isochrone analysis simplified. Learn how to use isochrone analysis in mapping. Improve customer service, logistics or plan an office relocation using isochrones analysis techniques. Save time and costs, and retain staff using the TravelTime platform.

Niharika Sisodia Apr 1, 2019 10:15:00 AM
READ

Isochrone map design inspiration

Perfect your isochrone map design. Use these tips to make your isochrone map easy to understand. Improve user experience by creating a simple and aesthetically pleasing isochrone map.

Niharika Sisodia Feb 11, 2019 9:05:01 AM
READ

10 must read articles about map user experience

Read 10 articles that analyse map user experience. Take UX tips from expert analysis to help you build the perfect user experience for the map page on your website or app.

Niharika Sisodia Jan 16, 2019 10:00:00 AM
READ

Top 10 interactive map design & UX examples

Discover the best interactive map designs. Use map design to improve user experience for mobile and desktop users.

Niharika Sisodia Jan 7, 2019 10:09:19 AM
READ

6 ways to display a map on a website

Discover the best way to display a map on a website. Improve the user experience and encourage viewers to become customers with a clear and simple map display.

Niharika Sisodia Dec 10, 2018 3:06:44 PM
READ

Map circle distance or map drive time distance

Map circle distance using the TravelTime radius map tool. Compare distance to travel time. Create your own travel time map using the TravelTime Platform.

Niharika Sisodia Oct 23, 2018 11:34:54 AM
READ