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 MAP
Next, 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_statesand click the option to ADD LAYER
The 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.
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:
Next, color the US polygon (base) that will show everywhere there is not drought:
CSSand copy and paste the following CartoCSS (or add your own!)
0.5px, and some transparency:
The three attributes we are using for the state labels are
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.
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 Layer
The 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:
The values in the
dm field range from
0 represents abnormally dry areas and
4, areas of exceptional drought as seen in [the metadata] and authoritative maps.
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
dmvalue to its associated color variable in the CartoCSS and click Apply Style
At this point, this is what our CartoCSS looks like:
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.
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 Development
On 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 Development
Please fill out the below form and we'll be in touch real soon.