[javascript] archive category

Building a cluster map using CartographerJS

Behold the Canadian NoProrogue Protests as a Cluster Map:

Today I’m building a cluster map using the way cool CartographerJS thematic JavaScript library. The library greatly simplifies the creation of “heat map” style overlays for Google Maps. In order to follow along, you will need to be familiar with GMap2 and JavaScript.

To create a cluster map, you need to include a few libraries:

  1. Google Maps GMap2 API – Makes maps from divs
  2. RaphaelJS – Library to draw vector graphics
  3. CartographerJS

Download Raphael and Cartographer somewhere webby and then include them in the head of your html page with your GMap API key URL (Google provides this):

  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAkWkoIqBrrWjZm_w3j6xq2hSa3-TS0yNMl32jU2eh6AwgDkL60hSCs7jQoaWypWYc5VCS-RKonhKskg" type="text/javascript"></script>
  <script type="text/javascript" language="javascript" src="raphael-min.js"></script>
  <script type="text/javascript" language="javascript" src="cartographer.min.0.3.js"></script>

The data that we are going to plot comes from the NoProrogue.ca protest actions that took place on 23 Jan 2010 across Canada. This dataset was converted from the early estimates produced by Ian Capstick in his Globe and Mail article.

<script type="text/javascript" language="javascript" src="http://www.kelvinwong.ca/code/html/protest_maps/protest_data.js"></script>

The data is a simple array packed with object literals. The important parts of the object literals are: the latitude of the point (lat), the longitude of the point (lng), the value to use when plotting (val) and the label to use on the callout (label):

var protest_data = [
{lat:43.656076, lng:-79.380279, val:9000, label:"Toronto: 9000, Police place at 7000 - organizers claim 15,000"},
// Other object literals here!!!

If you tried out the Hello World demo from the GMap2 documentation, then this code should look familiar. The plan is to place an empty div on the page and fill it with a map and an overlay dynamically written with JavaScript. Here is the target div:

<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 650px; height: 450px"></div>

And here is the code that draws the map then places the map object into the cartographer object:

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(61.856149,-95.625), 3);
    var mapoptions = { colorize:"#fff",
    var cartographer = Cartographer( map, mapoptions );
    var options = { color:"red", enableGrid:false };
    cartographer.cluster( protest_data, options );

The mapoptions object literal specifies the colour of the overlay (colorize) and the opacity of the overlay (colorizeAlpha). If the opacity is set to 1.0 you won’t be able to see the map underneath, so set it to a sane value like 0.1 or 0.3. We pass that object literal and the Google map object as parameters to initialize the cartographer object.

The options object literal is used to construct a cluster map on the overlay. In this case I wanted to specify the colour of the data points (color) and to disable the grid (enableGrid). There are many other settings you can specify based on your own needs. When you are ready to draw your overlay, pass the options object and the data as parameters into the cluster method of the cartographer object. Ecco fatto!

You can view the file without the iframe!

Tags: , , , , , , , ,


hasLayout falsehasLayout true

I was building a little demo tonight to show how to create a multiple document interface (MDI) using divs, some image files and the “script.aculo.us” JavaScript library. Of course, when I was just about finished, Internet Explorer 6 starts acting up.

Firing up the old IE Developer Toolbar I discovered that my lil’ol div didn’t “have layout“. This one property (unique to Internet Explorer) has given me more grief than all of WCAG, CSS, div-hell and XHTML combined – well, that’s pushing it – but, you get the idea. Okay, give the little guy layout (sets height to some value) and voila; it works. The MDI article will have to wait another day; I’m going to bed.