michael henry keller

I’ve been wanting to make a google map with workable mouseovers for a quite a while. Fusion Tables are super useful for drawing shapes on a map and clicking for more info. But, the excessive clicking can be tedious and hide a great deal of the data.  

I decided to play around with Albert Sun’s GMap Features that draws shapes based on a KML file. Link: https://github.com/albertsun/gmap-features. And since the payroll tax extension was in the news, I took the median income by census tract dataset from the American Community Survey through American Fact Finder2 and calculated how much people would save for the approved tax cut extension, which is 3.1% of income under $110,100. I got the shapefiles from the census (link: http://www.census.gov/geo/www/tiger/tgrshp2010/tgrshp2010.html) and merged the data and the shapes into one Fusion Table. Why a Fusion Table? FT seemed like the easiest way I knew of to quickly merge a table of polygons with a table of data as long as they shared a common column. Also, FT lets you export all of this as a single KML file, which I could plug into Sun’s template.

I did all that but it wasn’t working and wasn’t giving me an error. After comparing the sample KML files with my FT export, I noticed that my data was wrapped in <Polygon> tags but the sample files were <Multigeometry>. I wrote a simple macro in TextMate that added the tag and it worked! I looked deeper into Sun’s code and it looks like it searches specifically for the <Multigeometry> tag when it draws the shapes, but I’m no KML expert so perhaps there are other important differences for drawing polygons.

UPDATE: After learning some more about KML shapes, I found that you need to clean up the data a bit more to render complex shapes correctly. Sometimes FT outputs some KML polygons as MultiGeometry shapes by default. If you just run a find change to replace “<Polygon>” with “<MultiGeometry><Polygon>” and “</Polygon>” with “</Polygon></MultiGeometry>” you’ll get duplicates on those shapes that are already wrapped in MG tags. The structure should look like:

The (simplified) structure looks something like:

<multigeometry><polygon>otherTagsAndNumbers</polygon><polygon>otherTagsAndNumbers</polygon></multigeometry>

as opposed to with duplicates:

<multigeometry><multigeometry><polygon>otherTagsAndNumbers</polygon></multigeometry><multigeometry><polygon>otherTagsAndNumbers</polygon></multigeometry></multigeometry>

The macro I recorded is just a series of find/replaces but if you’d like a copy, send me a message at @mhkeller.

Sun included callbacks, which let me add the hoverbox that updates on mouseover, which was awesome and what I’ve been wanting to do for ages now. Here’s the map — more code talk after the jump: