How to style a pop art map

Map design Advanced cartography examples

This set of articles represents a recommended selection of advanced cartography examples.

1. How to make custom map design in MapTiler Cloud
2. How to style a retro map
3. How to style a pop art map
4. Map styled like a picture
5. How to make an Oktoberfest map
6. How to style a choropleth map in the Customize
7. How to use MapTiler Ocean

Do you love the look of classic comic books? Your basemaps can also scream pop-art! Just use a bit of contrast, mingle it with halftone dots, and add cool icons. Here’s how.

Toner map style

If there is one style that rules them all when it comes to pop art, it’s Toner. Toner was originally developed by Stamen Design as a black and white map, rendered as raster tiles.  MapTiler’s Toner is a vector tile GL JS style adapted by our team.  

We will start from this map style and adjust it with the Customize tool so it’s more pop-arty.

First, I removed a few label layers that would crowd our map too much once I added more patterns and icons over the top:

• Town labels
• Village labels
• Ocean labels
• Lake labels
• Lakeline labels
• Park labels

Icons & patterns

Now, let’s prepare some pop-arty icons and patterns. For the halftone dot pattern, I recommend following this amazing blog about Halftone Bathymetry in MapLibre GL JS. You can download the SVG circles of different sizes, adjust them in Inkscape, and then upload them to MapTiler Cloud.

I also prepared some starburst and bubble speech icons typical for comic books. I got inspired by the great works on the Noun project, where you can again download SVGs and use them for your maps. Just don’t forget to credit the author. These starburst icons come from Lucas Helle.

On top of this, I also want to use the existing Toner patterns. These can be found on the OpenMapTiles GitHub.

Compress all SVG files into one ZIP and upload it to your map. The icons upload is available in the menu in the top-right corner. Choose vector icons (we are uploading SVGs) and toggle off the Convert to Customizable icons (SDF sprite) option to have the icons rasterized. This way the patterns will work properly.

If you don’t want to create your own icons and patterns, I attached my ZIP file at the end of this article. You can upload this one straight away to your map.

Styling the map

Let’s return to the map and style it using the icons and patterns.

Add the Ocean bathymetry layer: Ocean > contour as a Polygon. Go to the Verticality tab and move it above the Water layer. Using the JSON Editor (Alt+E), add different dot patterns based on the depth. Your code for the layer should look something like this:

{
  "id": "Contour",
  "type": "fill",
  "source": "ocean",
  "source-layer": "contour",
  "layout": {
    "visibility": "visible"
  },
  "paint": {
    "fill-pattern": [
      "step",
      [
        "get",
        "depth"
      ],
      "dot-1",
      -6000,
      "dot-1",
      -5000,
      "dot-2",
      -4000,
      "dot-3",
      -3000,
      "dot-4",
      -2000,
      "dot-5",
      -1000,
      "dot-6",
      -500,
      "dot-7",
      -100,
      "dot-8"
    ]
  },
  "filter": [
    "==",
    [
      "geometry-type"
    ],
    "Polygon"
  ]
}

For the Country labels, I changed the font to Nunito Black, adjusted the size to 16 on Zoom 3 and 18 on Zoom 5, and transformed it to uppercase. If you change the Outline Width to a size of about 50px, you will get a nice newspaper effect underneath.

I also want to differentiate Capital cities from regular cities. Duplicate the City labels layer and name it Capitals labels. Go to the Data tab and filter out only capital of value 2 (all the others need to be red). The opposite needs to be done for the City labels.

For the Capitals, you can adjust the visibility and move the min zoom to 3 so the labels will appear sooner. Now add the boom-1 icon or any other starburst icon. For City labels, I added the boom icon. You can also adjust the text size and other properties. Your map can now look like this:

Finetuning

Now that the map looks pop-arty and pretty, it’s time to play with details! As for me, I choose to add US Highway shields and Art galleries. 

You can add highway shields from MapTiler Planet > transportation_name. When adding the layer, use the Filter network to select only us-interstate highways and choose the Symbol visualization. In the Verticality tab, move the layer just on top of the Road labels.  Change the text field to ref and add an icon of your choice - I used bubble. Now you can adjust other properties such as color, font, or size.

If the icon doesn’t fit, you can move it using the Layout section > Advanced layout properties under Ofset (same for the text).

As for the Art galleries, I decided to add them so that the deeper zooms are also not without any pop-arty icons. Add the layer from MapTiler Planet > poi. Go to Filter class, add value art_gallery and disable “All other values” and “No value”. Choose the Symbol visualization. 

To see the galleries, you need to go to Zoom 14+.  You can again adjust the text color, font, and add an outline and icon. 

Black&White Pop-art map

Now the black and white pop-art map is ready to catch anyone’s eye like the comic books used to do!

Of course, it is possible to have it colored in the Customize tool. Just don’t forget to color your icons and patterns in Inkscape beforehand.

Downloadable resources

• pop-art.zip

Next steps

Continue to Map styled like a picture to learn how to turn your favourite picture into a map.