CartoDB 2.0

If you have not tried out CartoDB, I recommend you give it a spin.  It makes doing some basic mapping really easy, and paves the way for getting into more dynamic maps.  What exactly is CartoDB?  It is at once a few things: an online interface create a georeferenced database that in turn creates a map, and it is an API that allows you to dynamically  interact with your maps.  You can sign up for a free account which allows you to run five tables / maps.

My first tests were to try and connect it to Android an android app.  Thanks to all of the documentation online, this was not too tough.  Now with the release of CartoDB 2.0, creating data-driven maps has become a lot easier.

Take a look at this map:

It is driven by a table which has columns for latitude and longitude as well as some other data such as city name.  Now, what if I want to use another column to drive the size of my markers?  Well, CartoCSS makes this trivial.  I created another column called ‘value’ to stand in for a generic metric.  I have a value in each marker’s row from 1-5.  I can some CartoCSS to change the size of the marker according to the value in the value column:

Here is the CartoCSS:

#base [value= 0 ] {
   marker-width:5;
   marker-opacity:1;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-fill: rgba(255,0,0,.25);
}

#base [value= 1 ] {
   marker-width:15;
   marker-opacity:1;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-fill: rgba(255,0,0,.25);
}

#base [value= 2 ] {
   marker-width:25;
   marker-opacity:1;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-fill: rgba(255,0,0,.25);
}
#base [value= 3 ] {
   marker-width:35;
   marker-opacity:1;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-fill: rgba(255,0,0,.25);
}
#base [value= 4 ] {
   marker-width:45;
   marker-opacity:1;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-fill: rgba(255,0,0,.25);
}
#base [value= 5 ] {
   marker-width:55;
   marker-opacity:1;
  marker-line-width: 1;
  marker-line-color: #000000;
  marker-fill: rgba(255,0,0,.25);
}

Here, #base is the name of the map/table.  the [value = #] element is a conditional which filters the results and paints the table rows that contain this value with this CSS.  Of course, you can change color, opacity, marker type, etc.  This is just a small example.  For more, check out the CartoDB CSS syntax.



Leave a Reply