How to make a pop art map

In this tutorial, you’ll learn how to create this pop art map using our visual map editor Map Designer:

Source files

To create this exact map, you’ll need these files:

• pop-art.zip

Toner map style

A pop-art map imitates classic comic books with high contrast, halftone dots, and bold icons. The best map style to start from is 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.  

Open this map style in the Map Designer tool to adjust it.

First, remove a few label layers that would crowd the map once you add patterns and icons over the top:

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

Icons & patterns

Next, prepare the icons and patterns. For the halftone dot pattern, follow the blog post 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.

Add some starburst and speech bubble icons typical for comic books. You can download SVG icons from the Noun project; don’t forget to credit the author. The starburst icons in this example come from Lucas Helle.

You can also 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 (you 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, upload the ZIP file from the Source files section.

Styling the map

Now style the map 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, change the font to Nunito Black, adjust the size to 16 on Zoom 3 and 18 on Zoom 5, and transform it to uppercase. Changing the Outline Width to about 50px creates a newspaper effect underneath.

Next, 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, use the boom icon. You can also adjust the text size and other properties. Your map can now look like this:

Finetuning

Finally, add details. This example adds 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, such as 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 Offset (same for the text).

Art galleries add pop art icons at deeper zoom levels. 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. 

Use your map

When done, you can publish your custom map and share it with the world. The options are the same as when using a ready-made map.