Example - Building a Custom Basemap through Styling - Part 2

Learn how to create a custom Game of Thrones basemap with Builder.

• Based on Our Game of Thrones Basemap is here to unite the Seven Kingdoms blogpost.

Resources

• Template .carto file
• Final .carto file

*All thematic data was built from the gvSIG’s ebook, Learning GIS with Game of Thrones. Textures and icons were created from Textures and The Noun Project websites.

Getting started

• Import the template .carto file to your account.
• Open the map.
• Rename your map as Game of Thrones Basemap.
• Make sure that the order and names of your layers are as follows:
  
  1. locations > Locations
  2. wall > The Ice Wall
  3. political > Regions
  4. rivers_and_roads > Rivers and roads
  5. mountains_lakes > Mountains and lakes
  6. political > Beyond the Wall
  7. continents_and_islands > Continents and islands
  8. continents_and_islands > Ripples

Ocean and ripples

• First, change the basemap:
  1. Click on the Positron basemap
  2. Select COLOR
  3. Replace the default color with #98b4ae

• In order to create a coastal ripple effect, follow these instructions:
  1. Click on the Ripples layer and go to the ANALYSIS tab
  2. Click on ADD ANALYSIS button to add a new analysis
  3. Select Create Areas of influence
  4. Click on ADD ANALYSIS
  5. Set the parameters as follows:
     • TYPE: Distance
     • UNITS: mi (miles)
     • RADIUS: 60
     • TRACTS: 4
     • BOUNDARIES: Dissolve (try to use Intact!)
  6. Click APPLY
  7. Go to the STYLE tab and switch from VALUES to CARTOCSS
  8. Replace the default style with the following one:

#layer {
  line-width: 1;
  line-color: #FFF;
  line-opacity: 0.2;
  line-comp-op: soft-light;
}

soft-light composite operation will soften the parts where two lines overlap when unsing Intact buffers.

• Click APPLY

Continents and islands

• Hide all layers from your Map View except for Continents and islands
• In order to style the land, follow these steps:
  1. Click on Continents and islands layer
  2. Switch from VALUES to CARTOCSS
  3. Replace the default style with the following:

#layer {
  polygon-pattern-file:
  url('https://s3.amazonaws.com/com.cartodb.users-assets.production/production/mamataakella/assets/20170822202613TexturesCom_PaperDecorative0061_1_seamless_S.jpg');
  polygon-pattern-opacity: 0.4;
  polygon-fill:mix(#6ea92f,#CCBE9A,40);
  polygon-opacity: 0.8;
  polygon-comp-op: multiply;
  line-width: 5;
  line-color: fadeout(#fff,85);

  [zoom<=4]{line-width: 2.5;}
}

As you can see, the pattern we have given to the land has a feeling of rugosity. Also, mixing two colors in the polygon-fill property and using fadeout to simulate the end of the land masses are good cartography tricks.

• Click APPLY

Mountains and lakes

• Show the Mountains and lakes layers from the Map View
• Again, follow these instructions to style this layer:
  1. Click on Continents and islands layer
  2. Switch from VALUES to CARTOCSS
  3. Replace the default style with the following:

#layer [type = 'mountain']{
  polygon-pattern-file: url('https://s3.amazonaws.com/com.cartodb.users-assets.production/production/mamataakella/assets/20170823212836mountain-range.png');
  polygon-pattern-opacity: 0.3;
}

#layer[type='lake'] {
  polygon-fill: #718c9f;
  polygon-opacity: 0.7;
  line-width: 1;
  line-color: rgba(255,255,255,0.1);
}

#layer[type='swamp']{
  polygon-opacity: 0.4;
  polygon-fill: mix(#6ea92f,#718c9f,30);
}

We are using a pattern with a grid of mountain icons to emulate mountain ranges. In addition, swamps were colored mixing water and ground colors.

• Click APPLY

Rivers and roads

• Enable the view from the Rivers and roads layer
• Follow these instructions to style this layer:
  1. Click on Rivers and roads layer
  2. Switch from VALUES to CARTOCSS
  3. Replace the default style with the following:

#layer {
  [type='river']{
    line-width: 1;
    line-color: #718c9f;
    line-opacity: 0.9;

    [zoom<=4]{line-width: 0.5;}
    [zoom>=6]{line-width: 1.5;}
}
 [type='road']{
    ::case {
      line-width: 4;
      line-color: #3b3b3b;
      line-opacity: 0.3;

        [zoom<=4]{line-width: 0;}
        [zoom>=6]{line-width: 5;}
      }

    ::fill{
      line-width: 2;
      line-color: lighten(#8C9F71,10);
      line-opacity: 0.9;

        [zoom<=4]{line-width: 0;}
        [zoom>=6]{line-width: 3;}
    }
  }
}

Rivers and roads were styled based on zoom.

• Click APPLY

The Ice Wall and beyond

• In order to create a 2.5D effect, follow these instructions:
  1. Click on the The Ice Wall layer and go to the ANALYSIS tab
  2. Click on ADD ANALYSIS button to add a new analysis
  3. Select Create Areas of influence
  4. Click on ADD ANALYSIS
  5. Set the parameters as follows:
     • TYPE: Distance
     • UNITS: km (kilometers)
     • RADIUS: 9
     • TRACTS: 1
     • BOUNDARIES: Intact
  6. Click APPLY
  7. Go to the STYLE tab and switch from VALUES to CARTOCSS
  8. Replace the default style with the following:

#layer {
  line-width: 0.25;
  line-color: #FFF;
  line-opacity: 0.5;
  building-fill: #ffffff;
  building-fill-opacity: 1;
  building-height: 55000;
}

The 2.5D effect was made because of the building properties. Check CartoCSS documentation for more detailed information about this method.

• Click APPLY

• Show the Beyond the Wall layer from the Map View
• Again, follow these instructions to style this layer:
  1. Click on Beyond the Wall layer
  2. Switch from VALUES to CARTOCSS
  3. Replace the default style with the following:

#layer[cartodb_id=3] {
  polygon-fill: #fff;
  polygon-opacity: 0.65;
}

• Click APPLY

Regions and towns

• Show the Locations layer from the Map View
• Follow these instructions to style this layer:
  1. Click on Locations layer
  2. Switch from VALUES to CARTOCSS
  3. Replace the default style with the following:

Map{
  buffer-size: 512;
}
#layer[type='City'][zoom>=4]{
  ::inner{
    marker-fill-opacity: 1;
    marker-fill:#2b2b2b;
    marker-line-width: 0;
    marker-line-opacity: 0.65;
    marker-placement: point;
    marker-type: ellipse;
    marker-width: 5;
    marker-line-color: #2b2b2b;
    marker-allow-overlap: true;
  }
  ::labels {
    text-name: [name];
    text-face-name: "Lato Bold Italic";
    text-size: 11;
    text-fill: #2b2b2b;
    text-halo-fill:fadeout(lighten(#7E9968,12),70);
    text-halo-radius: 1.5;
    text-placement-type: simple;
    text-placements: "E,W,NW,NE,SE,8";
    text-dx:-5;
    text-dy:-4;
    text-character-spacing: 0;

      [zoom>=5]{text-size: 12;}
      [zoom>=6]{text-size: 13;}
      [zoom>=7]{text-size: 15;}
  }
}

Location labels are also styled based on zoom. Labels work nicely because of the font, size, halo and placement.

• Click APPLY

• Show the Locations layer from the Map View
• Follow these instructions to style this layer:
  1. Click on Locations layer
  2. Switch from VALUES to CARTOCSS
  3. Replace the default style with the following:

#layer [zoom>=4] {
  text-name: [name];
  text-face-name: "Lato Bold Italic";
  text-size: 11;
  text-fill: lighten(#7E9968,35);
  text-halo-fill: fadeout(darken(#7E9968,12),70);
  text-halo-radius: 1.5;
  text-allow-overlap: true;
  text-character-spacing: 1.5;
  text-transform: uppercase;

  [zoom>=5]{
    text-size: 12;
    text-halo-radius: 2;
    text-character-spacing: 3;
  }

  [zoom>=6]{
    text-size: 14;
    text-character-spacing: 4;
  }

  [zoom>=7]{
    text-size: 16;
    text-character-spacing: 6;
  }
}

Regions were styled based upon zoom, similar to how location labels were styled. A very cool effect is giving some spaces between the word characters and transforming them into uppercase.

• Click APPLY

You know nothing!

• Share your map following these instructions:
  1. Click on SHARE
  2. Click on PUBLISH

  a. Share the URL of your map: https://public.carto.com/builder/d6700550-7314-434f-9691-0645d86c7cc3/embed

  b. Embed the iframe into your website: <iframe width="100%" height="520" frameborder="0" src="" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

• As a bonus, we are going to convert this Builder map into a basemap. This will allow us to put on top character thematic data:
  1. Open the Network tab from your browser developer tools console.
  2. Look for the call that starts with json and get the template id from the Request URL:

iii. Replace your user name and template id in the following URL:

https://http://cartocdn-gusc.global.ssl.fastly.net/USERNAME/api/v1/map/named/TEMPLATE_ID/all/{z}/{x}/{y}.png

iv. You will end up with a URL similar to this one:

https://cartocdn-gusc.global.ssl.fastly.net//ramirocartodb/api/v1/map/named/tpl_756aec63_3adb_48b6_9d14_331c6cbc47cf/all/{z}/{x}/{y}.pngg

• Finally, you can add this custom basemap following this guide.