fts_commute_visualizer
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.
Features
- 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
Installation
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.
- Enable Google Dev Console with a Google account.
- Create a new project.
- Enable Google Maps Javascript API
- Enable Google Maps Distance Matrix API
- Enable Google Maps Time Zone API
- 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.
Drawing
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.
Transit
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.
FAQ
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.
Examples
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.
