Click the screenshot to view the working map.
This map was one of my first attempts using the Google Maps API and Google Fusion Tables to build an interactive map. It turned out a bit trickier than I had originally planned since it eventually combined four maps from four data sets into the space of one map.
To my relief, the Google Maps API and Fusion Tables made the actual mapping simple and quick. Figuring out how to fit the maps into the space provided proved the real challenge.
The map had to occupy the a rather narrow space because we wanted to be able to put it into the middle of the online story, but that would require it to fit into that story’s column; a measly 650 pixels wide. The map would go into the middle of the story, text would both precede and follow the map, so it had to be short as well as skinny. These considerations ruled out using all four maps separately.
I eventually decided that since the maps were effectively paired, two of the maps showed the same information but for different geographic breakdowns, that it would be best to just create a toggle between the two types of data (population growth and race). The Google Maps API has a built in set of “listeners” which execute a code function when the map performs a certain function. I set one of these listeners to trigger the maps to swap from the county level data to the census tract level data at a certain zoom level, and vice versa.
The map swapping based on zoom level cut the number of maps I needed to squeeze into my space by half. But that wasn’t quite good enough. I still had two maps when I really only had the space for one. By creating buttons and using javascript to clear the map and then redraw on a different data set I finally whittled down to the one map I had space for.