The most common maps built with CartoDB highlight a specific topic or theme of information. Cartographers refer to these as thematic maps. Typically, thematic maps have two components: a basemap and a thematic overlay.
The logical ordering (or visual hierarchy) of elements on thematic maps is especially important. The thematic layer should be highest in the visual hierarchy designed with bold colors to stand out against the more subtly designed basemap.
Building on these ideas, and this previous discussion on map projections in CartoDB, this blog walks through the steps to make a thematic map of current drought conditions in the United States using data from the [United States Drought Monitor].
All of the maps in this post are pannable and zoomable so as you go through the different steps, interact with them along the way!
First, we’ll design a simple basemap that is made up of a base layer and a reference layer. The purpose of the basemap is to provide our map readers with just enough geographic context to interpret the drought conditions around the country without distracting them from the overall pattern of drought.
ne_50m_admin1_states
), highlight it and click CREATE MAPNext, add the US states layer again. This is done so we can use one layer for the base and the second copy for the reference information placed on top of the drought monitor data as seen in the final map.
ne_50m_admin_1_states
and click the option to ADD LAYERThe state labels on the final map transition from two letter postal codes at zoom 4, to abbreviated names at zoom 5, and full state names appear at zooms 6 and larger.
Let’s take a look at the attributes for the reference layer to determine which attributes we’ll use for labeling:
postal
(the two letter postal code for a state), abbrev
(an abbreviated version of the state name), and name
(the state’s full name)Keep note of these attributes as we’ll use them in the SQL query we construct for the reference layer.
Our final map uses the Albers Equal Area Conic projection centered on the contiguous United States (SRID 5070). This is a very common projection for thematic maps of the US. This is an equal area projection meaning areas are preserved and distortion is minimized.
This projection is part of the default spatial_ref_sys
table in your CartoDB account. If you have trouble accessing this SRID in your map, you can insert it into your spatial_ref_sys
table using the instructions outlined in this blog.
For the reference layer we’ll need to add two pieces to the SQL query: the projection information and the attributes that we need for labeling.
SELECT
ST_Transform(the_geom, 5070)
AS
the_geom_webmercator,
postal,
abbrev,
name
FROM
ne_50m_admin_1_states
SELECT
ST_Transform(the_geom, 5070)
AS
the_geom_webmercator
FROM
ne_50m_admin_1_states
At this point, your map should look something like this:
First, let’s turn off Postiron as the basemap and set the background to white:
#FFFFFF
)Next, color the US polygon (base) that will show everywhere there is not drought:
CSS
and copy and paste the following CartoCSS (or add your own!)#ne_50m_admin_1_states {
polygon-fill: #E2E4DC;
}
State Lines
0.5px
, and some transparency:#ne_50m_admin_1_states {
line-color: #FFF;
line-width: 0.5;
line-opacity: 0.8;
}
#ne_50m_admin_1_states {
line-color: #FFF;
line-width: 0.5;
line-opacity: 0.8;
//at a zoom level greater than or equal to 5
//the line width changes to `1px`
[zoom>=5]{line-width: 1;}
}
State Labels
The three attributes we are using for the state labels are postal
,abbrev
, and name
. We’ll use zoom level conditions to determine when the labels turn on and zoom dependent styling to determine which version of the label draws when.
::label
#ne_50m_admin_1_states {
line-color: #FFF;
line-width: 0.5;
line-opacity: 0.8;
//at a zoom level greater than or equal to 5
//the line width changes to `1px`
[zoom>=5]{line-width: 1;}
//state labels begin at zoom 4
::label[zoom>=4]{
//states labeled with postal code to start out using a 9pt font size
text-name: [postal];
text-face-name: 'Lato Bold';
text-fill: #7F858E;
text-size: 9;
//transform state labels to uppercase
text-transform: uppercase;
text-halo-fill: fadeout(#fff,70);
text-halo-radius: 2;
//at zoom 5 change to abbreviated state label and increase the font size
[zoom=5]{
text-name: [abbrev];
text-size: 10;
}
//at zoom 6 change to the full name for state labels,
//increase the font size,
//and wrap text for longer state labels
[zoom>=6]{
text-name: [name];
text-size: 11;
text-wrap-width: 20;
}
//at zooms 7 and larger increase font size
[zoom>=7]{
text-size:12;
}
}
}
Projected and styled, the finished basemap looks like this:
Next, we’ll add the latest drought monitor readings to the map, compose the layer’s SQL query, and apply a style.
+
sign on the right hand panel to Add LayerThe drought monitor data will not be visible in the current map view because we still need to project it!
Before we do, let’s take a look at the attributes that we’ll need for styling:
dm
The values in the dm
field range from 0-4
where 0
represents abnormally dry areas and 4
, areas of exceptional drought as seen in [the metadata] and authoritative maps.
SELECT
ST_Transform(the_geom, 5070)
AS
the_geom_webmercator,
dm
FROM
usdm_20151103
NOTE: if you download a different time period of drought monitor data, you will have to change the table name accordingly. This query assumes that your table name is usdm_20151103
.
dm
field@0: #FAEECA;
@1: #F7E4AB;
@2: #F7C791;
@3: #E99083;
@4: #CB6787;
polygon-fill
for each dm
value to its associated color variable in the CartoCSS and click Apply StyleAt this point, this is what our CartoCSS looks like:
/** category visualization */
@0: #FAEECA;
@1: #F7E4AB;
@2: #F7C791;
@3: #E99083;
@4: #CB6787;
#usdm_20151103 {
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
#usdm_20151103[dm=0] {
polygon-fill: @0;
}
#usdm_20151103[dm=1] {
polygon-fill: @1;
}
#usdm_20151103[dm=2] {
polygon-fill: @2;
}
#usdm_20151103[dm=3] {
polygon-fill: @3;
}
#usdm_20151103[dm=4] {
polygon-fill: @4;
}
And this is what our map looks like:
By default, the Editor assigns global styles to the layer. Since the drought monitor readings are the main focus of the map, we’ll remove the default polygon-opacity
. Additionally, the default white lines make the drought data look more abrupt than continuous so we’ll remove that style as well.
/** category visualization **/
@0: #FAEECA;
@1: #F7E4AB;
@2: #F7C791;
@3: #E99083;
@4: #CB6787;
//remove this block
//starting here
#usdm_20151103 {
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
//ending here
#usdm_20151103[dm=0] {
polygon-fill: @0;
}
#usdm_20151103[dm=1] {
polygon-fill: @1;
}
#usdm_20151103[dm=2] {
polygon-fill: @2;
}
#usdm_20151103[dm=3] {
polygon-fill: @3;
}
#usdm_20151103[dm=4] {
polygon-fill: @4;
}
We now have our basemap and drought monitor data styled and are ready to put a couple final touches on the map!
On the map above, the labels in areas of exceptional drought (like California!) are hard to read against the darkest color in our palette. A slight adjustment you can make here is to add a white halo that has transparency by adding text-halo-fill: rgba(255,255,255,0.5)
to the state label properties. Alternatively, you can adjust the text-fill
to a color that you feel is more suitable.
I used a small transparent halo on my state labels:
Other map elements that I customized for the the final map are:
You can check out a live version of the [final map here].
My talented co-worker, UI Developer and Designer, Emilio made a template that can be used to compare drought readings over three different time periods. This example shows maps of drought severity for the same week in November in 2015, 2014, and 2013. You can find the template here.
Happy thematic mapping!
When building new software applications, developers wrestle with doubts on whether their design decisions will deliver users the best possible experience. From interface la...
App DevelopmentModern connectivity has produced a new way of understanding spatial relations, often transcending administrative boundaries in favor of functional geographies. And while ou...
App DevelopmentOn Friday, February 9th, the 2018 Winter Olympic Games kicked off in Pyeongchang, South Korea. Featuring athletes from 92 countries around the world, this Winter Games prov...
App DevelopmentPlease fill out the below form and we'll be in touch real soon.