Where does your water come from?

Do you know where your water comes from? Many people don't, and it's important if you want to know how secure your water supply is. This new map shows you where the water comes from for almost 500 cities around the world, and for 27 of those cities we have maps showing how much of the place your water comes from is unprotected. The goal is to inspire people to realize that protecting nature near them helps to ensure their continued access to clean water. You can see the map here: http://www.nature.org/all-hands-on-earth/water


The report explaining how the data behind the map was generated is here: http://www.nature.org/idc/groups/webcontent/@web/@northamerica/documents/document/prd_056889.pdf

While I didn't have anything to do with generating the data, I'm pretty proud of how the map was put together, so for those interested, here's how it works. We wanted an easy to use interface (Google Maps being the best choice for simplicity), a really easy way for non-techies to update the data (Google Fusion Tables is great for this), but we also wanted to have full control over the look and feel of the base map (which is much harder to do with Google).

I found some existing code that lets you combine Esri map services (which we can easily customize the look of) with the Google Maps javascript API: http://google-maps-utility-library-v3.googlecode.com/svn-history/r172/trunk/arcgislink/docs/reference.html. That way we get the best features of each of the three publishing options without some of the baggage (fusion tables by default has an awkward interface, Esri products are harder to update and the interface isn't quite as nice, Google Maps has limited base map options).

Since we had two kinds of popups for different cities, we used two different Fusion Tables:

• The blue dots are cities with just a text description: https://www.google.com/fusiontables/DataSource?docid=19fmls00Ab-remGe5-80zFbQEws47wyK1DzQd0io
• The red dots are cities with nice maps: https://www.google.com/fusiontables/DataSource?docid=195lWSBIoJmn4L2Q2wq9iRAA1wvQioRD9-CAfN0k

The update process is pretty simple: to add more cities to the map, you just go to Fusion tables and import a spreadsheet with the new cities to add more rows. Google uses the concatenated "City, State" column to map each city (for international cities we use the format "City, Country").

You can simply view the source code of http://www.nature.org/all-hands-on-earth/water to see how it was accomplished, but I also have some simpler examples to help you get started if you want to replicate this approach:

• http://maps.tnc.org/wheredoesyourwatercomefrom/google_esri_example.html (uses an Esri base map, Google fusion tables data, and has a few extra features like limiting the zoom level and displaying the Esri logo) and 
• http://maps.tnc.org/wheredoesyourwatercomefrom/google_esri_simplest.html (uses a Google base map w/ fusion tables and a single Esri map service).