Tutorials  /  Map Styling  /  Guides

Example - Building a Custom Basemap through Styling - Part 1

Learn how to create a vintage Africa map with Builder techniques.

  • Based on Mamata Akella’s CARTO Summit workshop inspired by this “Submarine Cable Map”:

submarine cable map

Resources

  • .carto file
  • image url: https://s3.amazonaws.com/com.cartodb.users-assets.production/production/mamatablog/assets/20151025140245land_paper.png

Continent

  • Import carto file into your account.
  • Open the map
  • Rename your map as Vintage Africa Map.
  • Order and rename your layers as follows:
    1. ne_50m_admin_0_countries > Countries
    2. continent > Continent
    3. ne_50m_ocean > Ocean
  • Select Africa:
    1. Click on ADD ANALYSIS just below Continent layer name
    2. Select Filter by column value
    3. Click on ADD ANALYSIS
    4. Set parameters as folows:
      • COLUMN: continent
      • INPUT: Africa
      • RESULT: Show
    5. Click on APPLY

filter by column value

  • Create coastal ripple effect:
    1. Click on + symbol button to add a new analysis
    2. Select Create Areas of influence
    3. Click on ADD ANALYSIS
    4. Set parameters as folows:
      • TYPE: Distance
      • UNITS: miles
      • RADIUS: 100
      • TRACTS: 6
      • BOUNDARIES: Intact
    5. Hit APPLY

ripples

  • Style:
    1. Go to STYLE tab
    2. Use the slider button to open CartoCSS view
    3. Apply this code:
    #layer{
      line-width: ramp([data_range],0.4,1,equal);
      line-color: teal;
      line-opacity: 0.5;
    }
    

Countries

Global styles

  • In order to style all countries by categories and using a pattern file follow these instructions:
    1. Go back to LAYERS pane
    2. Click on Countries layer
    3. Go to STYLE tab
    4. Open CartoCSS view by clickin the slider button
    5. Apply this code:
    #layer{
      polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/mamatablog/assets/20151025140245land_paper.png);
      polygon-pattern-opacity: 0.3;
      polygon-fill: ramp([mapcolor7], cartocolor(Bold), category(7));
      polygon-opacity: 0.2;
    }
    

global

Style for Africa

  • In order to highlight African countries add the following snippet at the end of the CartoCSS code. It will improve some cartographic-related issues, as line’s color and offset, as well as labels.
  [continent='Africa']{
    polygon-opacity: 0.3;
    line-width: 2;
    line-color: ramp([mapcolor7], cartocolor(Bold), category(7));
    line-opacity: 0.4;
    line-offset: -1;

    ::labels  {
    text-name: [abbrev];
    text-face-name: 'Gravitas One Regular';
    text-size: 10;
    text-fill: #000;
    text-label-position-tolerance: 0;
    text-halo-radius: 0;
    text-halo-fill: #6F808D;
    text-dy: 0;
    text-allow-overlap: true;
    text-placement: point;
    text-placement-type: dummy;
    text-transform: uppercase;
    text-character-spacing: 0.5;
    text-wrap-width: 25;
    }
  }

africa

Ocean

  • In order to style Ocean layer:
    1. Go back to LAYERS pane
    2. Click on Ocean layer
    3. Go to STYLE tab
    4. Open CartoCSS view by clicking the slider button
    5. Apply this code:
#layer{
  polygon-fill: lighten(#b3d1cf,0);
  polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/mamatablog/assets/20151025140245land_paper.png);
  polygon-pattern-opacity: 0.4;
}

ocean

Basemap

  • Finally, go back to LAYERS pane to style the basemap:
    1. Click on Positron.
    2. Set COLOR as Source
    3. Set #c3d1c7 as HEX value.

basemap

Publish

  • Go back to LAYERS pane in order to share your map:
    1. Click on *SHARE`
    2. Click on PUBLISH blue button
    3. Click on PUBLISH (below)
    4. Copy the link and paste it in a new browser tab: https://public.carto.com/builder/6675193e-39bb-4dbe-96ee-708361c642aa/