Population Density
The Census Bureau publishes a treasure trove of interesting data about these United States. Here we show population density of 3,134 counties using a choropleth map; darker counties have higher population densities. A GeoJSON layer containing state boundaries is drawn over the counties using a thick white border. Try zooming in for higher resolution.
The map background is a monochrome image layer from CloudMade. Register a developer account with CloudMade for your own API key. We’re hosting GeoJSON tiles for states and counties on Google App Engine, and as with image tiles, you can always roll your own!
Where’s the data? Everything is styled, as if by magic, using a precompiled stylesheet! Each GeoJSON feature (i.e., county) is given a unique ID via its FIPS code.
A dynamic—and more flexible—approach to styling choropleth maps can be seen in the Statehood and Unemployment examples.
Source Code
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.center({lat: 39, lon: -96})
.zoom(4)
.zoomRange([3, 7])
.add(po.interact());
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/20760/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.geoJson()
.url("http://polymaps.appspot.com/county/{Z}/{X}/{Y}.json")
.on("load", load)
.id("county"));
map.add(po.geoJson()
.url("http://polymaps.appspot.com/state/{Z}/{X}/{Y}.json")
.id("state"));
map.add(po.compass()
.pan("none"));
function load(e) {
for (var i = 0; i < e.features.length; i++) {
var feature = e.features[i];
feature.element.setAttribute("id", feature.data.id);
}
}