Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build visualizations to see how far you can commute based on transportation mode and real world traffic.

Blog Post

For additional information read my extensive blog post.


  • Visualize commute times and range both from home or to a destination
  • See commute times for walking, bicycling, public transit, or driving.
  • See commute time *with traffic (driving only)
  • Specify driving traffic conditions: Best Guess, Optimistic, Pessimistic
  • Works in any city for which Google Maps has data


fts_commute_visualizer.html is the only file you need. It contains all HTML, CSS, and JS. It can be run locally. There is no build system. You don't need a webserver.

Google Maps API Key

You will need your own API key. Creating a new one is free and easy.

  1. Enable Google Dev Console with a Google account.
  2. Create a new project.
  3. Enable Google Maps Javascript API
  4. Enable Google Maps Distance Matrix API
  5. Enable Google Maps Time Zone API
  6. Replace "YOUR_API_KEY" with your API key.

The Google cloud free tier is limited to 2500 requests per day. Each hexagon counts as 1 request. After reaching your daily limit Google Maps API calls are heavily throttled.

If you give Google your credit card and sign up for a free trial you can get $300 in free credits. Curiously I'm still not being charged for Distance Matrix queries. I am still throttled, but it's significantly faster. I strongly recommend doing this if you're building large maps or many maps.

Using the Tool

This is, ahem, a bit of a programmer tool. There are several gotchas and silent errors. Here's what the tool looks like.


On the bottom of the map there's a draw button. (It says 'Clear' in the image above). You want to click that then click and drag on the map. This lets you draw an arbitrary outline for the area you wish to search.

Advanced Search

When performing an advanced search you must search for a time in the future. If you specify a time in the past it will silently fail. I need to add error messaging.


When doing a transit search you almost always want to do an advanced search. Otherwise you will search for routes with a time of "now". Which if you're doing this at home at 8pm is probably not very many routes!

In hindsight I should have made those settings mandatory and always on. It'd prevent a lot of confusion.

Secret Options

If you open fts_commute_visualizer.html and go to line 452 you should see the following line.

<div id="styleOptionsDiv" style="display:none">

Change "display:none" to "display:block". This turns on some secret options. Of particular note is the ability to hide map UI elements. Which is useful for taking screenshots. You can also mess with hexagon color and opacity at run-time if you feel like changing them.

I wouldn't call these hidden options "officially supported". But they may be of some use.


What is fts_commute_visualizer?

A tool I built to help visualize how long it takes to commute based on a mode of transport and travel time.

What license?

All source code is embedded with a dual license. Choose either MIT or Unlicense. See fts_commute_visualizer.html for details.

What is FTS?

My initials; Forrest Thomas Smith.

Why a single file?

Why would this be more than one file? It's a simple project. The whole thing is just 1500 lines long. Google Maps does all the real work.

It doesn't need a framework. It doesn't need a build system. It doesn't even need jquery. Vanilla JS is more than enough.

Why is the code so bad?

I'm a video game programmer. I don't know how to write idiomatic JavaScript. I tried my best to keep things easy to understand. Dynamic languages are hard.


Here is some example output produced by my tool. For a more detailed look please read my blog post.

South Lake Union

South Lake Union is a booming Seattle neighborhood. Located within are offices for Amazon, Google, Facebook, and more. Here is what it looks like to commute to South Lake Union at 8:00 am.

Kenmore, Wa

A few years ago I lived in the Seattle suburb of Kenmore. Located at the northern tip of Lake Washington it allows for access to both the west and east side. Even better there's a large park and ride transit hub. Here's what it looks like to commute from Kenmore at 8:00 am.


Visualize commute times based on travel mode and traffic






No releases published


No packages published