Happy Thanksgiving! What am I thankful for? Besides my friends and family, I’m thankful for the Cartographer Javascript library. This library makes it easy to add choropleths, pie charts and point clusters into Google maps. The project is in the early stages, but looks promising. I especially love the ability to call color schemes from ColorBrewer. I’m excited to see developers actually take cartography into account when building mapping libraries.
Here is a quick tutorial to show how easy it is to make this interactive Google choropleth map. Download a zip of the project.
This project has 3 parts.
- A project folder.
- A folder for the javascript libraries, called “js.”
- HTML page.
How it works:
First we call the javascript libraries. The first call is for Google Maps. The examples are using V2…so you will need to grab an API code for this to work on your server. The next call is the Cartographer.js library and the third is the Raphael.js library. Cartographer uses the SVG engine from Raphael.
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=GOOGLE-API-KEY-HERE"></script>
<script type="text/javascript" language="javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" language="javascript" src="js/cartographer.min.0.4.js"></script>
<script language="javascript">
The next section is the javascript that makes the map work. Basically, Cartographer places pre-encoded polygons on the Google map.
function load() {
if( GBrowserIsCompatible() ) {
var map = new GMap2(document.getElementById("map"));
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(18, 0), 2);
map.addControl(new GLargeMapControl());
map.addControl(new GHierarchicalMapTypeControl());
map.setMapType(G_PHYSICAL_MAP)
var countyNames = (new String("APACHE,COCHISE,COCONINO,GILA,GRAHAM,GREENLEE,LA-PAZ,MARICOPA,MOHAVE,NAVAJO,PIMA,PINAL,SANTA-CRUZ,YAVAPAI,YUMA")).split(",");
var percentBrewer=(new Array(34,62,43,62,65,48,67,55,73,54,47,58,32,65,57));
var countyData = [];
for( var i=0, ii=countyNames.length; i<ii; i++ ) {
var name = countyNames[i];
var value = percentBrewer[i];
var code = "AZ-" + name;
countyData.push( { region:code, val:value, label: Cartographer.regions[code].name + " County, " + "AZ" } );
}
var cartographer = Cartographer( map, { colorize:"#000", colorizeAlpha:.3 } );
cartographer.choropleth(countyData, { colorScheme:"RdBu", reverseColors:"true"});
}
}
The first part of this code creates the Google map.
Then we declare the variables. CountyNames is a alphabetical list of counties in Arizona. PercentBrewer is the percentage of votes Jan Brewer got in the mid-term election.
Next we loop the number of counties and place the counties and the values on the map.
Finally is the Cartographer declarations. ColorScheme can be customized or use a list of standard colors. This uses “RdBu” and then reverses it. The higher the number, the more Red the polygon will be. The lower the number the more Blue it will be. Read more about the choropleth declarations.
(To change counties: Create an alpha list of your counties. Put a dash “-” for any counties with spaces in them, like La-Paz. Change the “AZ-” to your two digit state code. For example CA for California. )
Now we build the map with some HTML.
<body onload="load()" onunload="GUnload()">
<h3>Percent of votes Brewer, 2010</h3>
<div id="map" style="width:500px; height:500px;"></div>
</body>
Here is the complete code.
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ADD-GOOGLE-API-KEY-HERE"></script>
<script type="text/javascript" language="javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" language="javascript" src="js/cartographer.min.0.4.js"></script>
<script language="javascript">
function load() {
if( GBrowserIsCompatible() ) {
var map = new GMap2(document.getElementById("map"));
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(18, 0), 2);
map.addControl(new GLargeMapControl());
map.addControl(new GHierarchicalMapTypeControl());
map.setMapType(G_PHYSICAL_MAP)
var countyNames = (new String("APACHE,COCHISE,COCONINO,GILA,GRAHAM,GREENLEE,LA-PAZ,MARICOPA,MOHAVE,NAVAJO,PIMA,PINAL,SANTA-CRUZ,YAVAPAI,YUMA")).split(",");
var percentBrewer=(new Array(34,62,43,62,65,48,67,55,73,54,47,58,32,65,57));
var countyData = [];
for( var i=0, ii=countyNames.length; i<ii; i++ ) {
var name = countyNames[i];
var value = percentBrewer[i];
var code = "AZ-" + name;
countyData.push( { region:code, val:value, label: Cartographer.regions[code].name + " County, " + "AZ" } );
}
var cartographer = Cartographer( map, { colorize:"#000", colorizeAlpha:.3 } );
cartographer.choropleth(countyData, { colorScheme:"RdBu", reverseColors:"true"});
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<h3>Percent of votes Brewer, 2010</h3>
<div id="map" style="width:500px; height:500px;"></div>
</body>
</html>
Download a complete version of this project. Make sure you change the Google map API. More examples of choropleths using this method are available at the Cartographer website.
