Flex Pasta

Flex Heat Map

I recently had a request for a heat map created in Flex to display a state by state color coding based on a particular metric.  A coworker and I set out to create the heat map in Flex.   Here is an example heat map: a color coding breakdown of Flex developers working in a particular state.  This heat map shows the number of Flex developers by state(the data is not accurate).

Before I could make a heat map, I needed some mapping api to create a basic map.   I picked Yahoo! Maps because it is easy to understand and has good examples(everyone keeps asking…why not use Google?).  Yahoo! has some nice examples.  One that caught my eye was the Polyline Overlays example.  In Yahoo!’s api, the ability exists to draw a custom poly line over the map.  The code is pretty simple.  You supply the polyline an array of latitude and longitude points the map api graphs the line for you.

_polyline = new PolylineOverlay(0xFF0000, 0.85, 4);
_yahooMap.overlayManager.addOverlay(_polyline);

// disable the mouse so we can still click and drag the map when the mouse is over the polyline
_polyline.mouseEnabled=false;

// set the fill color and fill alpha of the overlay
_polyline.hasFill = true;
_polyline.fillColor = 0xFFFFFF;
_polyline.fillAlpha = 0.60;

// pass latlon values into the polyline data provider to draw the overlay.
_polyline.dataProvider = [new LatLon(47.610015,-122.187029), new LatLon(37.371612,-122.038258), new LatLon(40.714550,-74.007124)];

To make the heat map, I would need the Lat/Lon points for the borders of each state in the US.   To do this, you need a file that contains all of the lat/lons for the borders of each state.  The U.S. Census provides us with a wide library of shape files to download.  If you have downloaded shape zip files, you might be wondering what the heck to do with this binary looking .shp file.  A non-GIS person myself, I had no idea.  Thankfully, a coworker found a flash based application that reads in shape files, renders them on the screen, and allows you to scale down the map to make it less data intensive.  Afterall, there are a lot of nooks and crannies to all the United “States”(10 MB initially in lat/lon data).  And we don’t need it to be exact when we draw the polyline for the heat map, so we scaled the file down to about 80%.  Then you will want to convert the shape files to xml.  Once you have loaded the xml in Flex, you can just convert the data by state into an array.  Then just create a Polyline Overlay for each state with a different fill color.  Now you have a basic heat map in Flex!