Free Your Maps from Web Mercator!

Most maps that we see on the web use the Web Mercator projection. Web Mercator gained its popularity because it provides an efficient way for a two-dimensional flat map to be chopped up into seamless 256x256 pixel map tiles that load quickly into the rectangular shape of your browser.

If you asked a cartographer which map projection you should choose for your map, most of the time the answer would not be Web Mercator. What projection you choose depends on your map’s extent, the type of data you are mapping, and as with all maps, the story you want to tell.

Well, get excited because with a few lines of SQL in CartoDB, you can free your maps from Web Mercator!

This blog covers how you can go from the standard Web Mercator:

To Albers Equal Area Conic (a popular choice for thematic maps of North America):

Projections in CartoDB

Every CartoDB account comes with a set of default projections. Even if the projection you are looking for isn’t in the default set, no problem! In a few steps, you can start using nearly any projection you want for your web maps.

Even better, this is all done on the fly and you can project the same dataset in multiple ways for different maps.

For a more detailed discussion on projections, see this tutorial.

Getting Started

Let’s start by accessing the list of default projections available in CartoDB:

From your account open any SQL tray, and type in

SELECT * FROM spatial_ref_sys

Next, click Apply Query

What you will see is a table load with all of the projections that you can use for your maps. Take some time to sort through the table to see what is available. As mentioned before, even if you don’t see the projection you are looking for, its ok!

Adding a Projection

Our final map is in Albers Equal Area Conic centered on North America. I know this projection isn’t in the default list, so let’s add it.

To add a projection, we need to insert its definition into the spatial_ref_sys table. There are a couple of great websites out there where you can copy and paste the definition that you need. Two of the ones that I’ve found most useful are spatialreference.org and epsg.io.

In a web browser go to epsg.io
In the search bar, type Albers Equal Area

Scroll to the bottom of the first page and click on the link for North America Albers Equal Area Conic
Under the Export list on the left hand side of the page, click on PostGIS and copy the projection definition text

Back in your CartoDB dashboard, paste the definition text into a SQL tray and click Apply Query

Your projections table is now updated with North America Albers Equal Area Conic (SRID 102008)

Let’s Make a Map!

Now that we have added the projection definition to CartoDB, we can use its SRID to project any data layers on the fly. In this example, we’ll use two datasets from Natural Earth (land and ocean) that are available in CartoDB’s Data Library.

From your Maps dashboard, click the option NEW MAP
In the Add Dataset window, we’ll search for available Natural Earth datasets by typing ne_50m into the data search bar
From the available list, highlight Land (ne_50m_land) and Ocean (ne_50m_ocean) and click the option to CREATE MAP

Next, we’ll project each layer using ST_Transform and the projection’s SRID

Copy/paste or type in the following query into each layer’s SQL tray and click Apply Query

ne_50m_land

SELECT 
	ST_Transform(the_geom, 102008)
AS 
	the_geom_webmercator
FROM 
	ne_50m_land

ne_50m_ocean

SELECT 
	ST_Transform(the_geom, 102008)
AS 
	the_geom_webmercator
FROM 
	ne_50m_ocean

The land and ocean datasets should now be projected and your map probably looks something like this:

Ok! Let’s add some final touches to the map.

Since we are using the Albers projection centered on North America, let’s zoom our map to focus on that part of the world
Next, we’ll remove Positron as our basemap and instead use a white background. To do this click on the option to Change Basemap and choose white (#FFFFFF) for your Custom color

As a final design touch, change the color of the land and ocean. If you would like to use similar colors to the final map, here is the CartoCSS:

ne_50m_land

#ne_50m_land {
  polygon-fill: #98B087;
}

ne_50m_ocean

#ne_50m_ocean {
  polygon-fill: #B8D0CB;
}

And here is our final map! (If you would like to add graticule lines to your map you can download them from Natural Earth, and add the ST_Transform SQL from above.)

Coming Soon

In the coming weeks, look for more detailed blog posts going over some advanced cartographic effects on a variety of maps… most of which are NOT Web Mercator!

Other Projections and Additional Resources

And for fun, here are some other projections that you might like to use in your maps. This CartoDBlock has a more detailed overview with links to the projection text and SQL examples.

North Pole Azimuthal Equidistant

World Bonne

Lambert Conformal Conic centered on Asia

Winkel Tripel

We’ll be hosting a CartoCamp here at the CartoDB offices in NYC on Tuesday, November 10th. Join us to learn more about advanced mapping techniques (including projections) with CartoDB! You can sign up here.

Happy Mapping!