Mapping Floods With Lightweight Technology

Turn Around, Don’t Drown

Low water crossings aren’t something we get a lot of here in San Francisco, but many Austinites are intimately familiar with them. Flash floods and sudden high-volume rain cause runoff and will quickly fill or overflow riverbeds and low lying areas and cause low water crossings to close, making streets impassable.

When this happens, it’s important that drivers have enough information to know which routes to take. In person, it’s difficult to tell how quickly water is flowing, or even how deep it is. Oregon Trail-style attempts to ford these crossings result in multiple casualties each year.

In June, when I met Matt Porcher of the Watershed Department, for him to close crossings required leaving a message with the on-duty officer at Austin Homeland Security and Emergency Management. When they called back he would relay to them the closed crossing(s). Which the officer would then post to the website, here. Site visitors could then view the list to figure out if any of the listed closures were along their intended routes.

This was a great opportunity for lightweight technology to make this process better and easier. So we did. Matt and I built ATXfloods.com using CartoDB, Google Docs, HTML, CSS, and a little bit of JavaScript. It’s lightweight, easy to setup, and completely free. It’s also a responsive design that works on a smartphone or tablet.

Having something on a map makes it more usable, shareable, and easier to track. We’ve been delighted to see the use of it spread and increase the effectiveness of other efforts. For example, the Austin Fire Department uses it to track closures so they know which route to take for emergencies.

Here’s how it works:

CartoDB
With a CartoDB account, you can import a CSV file of locations.
For help setting it up, here’s a great tutorial by 2012 Fellow Jesse Bounds.
To see how to set up the open/closed status of the points in CartoDB, check out the readme on the github repo, here.
Bootstrap and HTML/CSS files
Download a Bootstrap template and customize it to give it your own style, or use this one. ATXfloods uses tabs to display some extra content like the Twitter hashtag #atxfloods, some extra tips, and links to helpful resources.
Tabletop.js and Google Docs
Next, we needed a good way for people to know when looking at the map how current the information is. We used Tabletop.js to easily integrate Google Docs spreadsheets and display the most recent status update at the top of the page.

Google Docs happens to be blocked in most of Austin City employees, so I used a Google form that can be filled out on a phone, or from email, and will directly update the spreadsheet and ATXfloods.com.