---
title: "How to make a pop art map | Guides | Map design"
description: "Create custom maps with classic comic book aesthetics."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# How to make a pop art map

In this tutorial, you’ll learn how to create this cool **pop art map** using our visual map editor [Map Designer](https://docs.maptiler.com/guides/map-design/editor/):

Warning

Please note that this tutorial uses an [older generation of MapTiler maps](https://docs.maptiler.com/guides/updates/#2025-11-new-generation-of-maptiler-maps) and the described workflows **might not be accurate anymore**. We recommend to use this guide as a **source of design tips and tricks** from our cartographers rather than relying on detailed step-by-step instructions.

## Source files

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

-   [pop-art.zip](./pop-art.zip)

## Toner map style

Love the look of **classic comic books**? Create a **pop-art** map using a bit of contrast, halftone dots, and add cool icons. If there is one style that rules them all when it comes to pop art, it’s [Toner](https://cloud.maptiler.com/maps/toner-v2/). 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.  

![toner.png](./20350820970513_c7673f00d4.webp)

We will start from this map style and adjust it with the [Map Designer tool](https://cloud.maptiler.com/maps/editor?map=toner-v2) 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](https://snailbones.medium.com/halftone-bathymetry-in-maplibre-gl-js-b143651410c2)**. You can download the SVG circles of different sizes, adjust them in Inkscape, and then upload them to MapTiler.

I also prepared some **starburst and bubble speech icons** typical for comic books. I got inspired by the great works on the [Noun project](https://thenounproject.com/), 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](https://thenounproject.com/lucashelle/).

![pop-art-icons.png](./20350850690833_9ccb1868e8.png)

On top of this, I also want to use the **existing Toner patterns**. These can be found on the [OpenMapTiles GitHub](https://github.com/openmaptiles/maptiler-toner-gl-style/tree/master/icons).

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.

![convert.png](./image-20241031-123913.png)

If you don’t want to create your own icons and patterns, I attached my [ZIP file](./pop-art.zip) 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:

```json
{
  "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"]
}
```

![pop-art-ocean.png](./20351574456721_12c991c357.webp)

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.

![toner-countries.png](./20353710781841_1acf6763f1.webp)

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.

![toner-capitals.png](./20381581892753_f32d9fa322.webp)

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:

![toner-starburst.png](./20353737722513_4c6769593b.webp)

## 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.

![toner-shields.png](./20354287768849_144ca79dc4.webp)

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

![toner-offset.png](./20381581900945_c9102a1080.webp)

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. 

![toner-gallery.png](./20355172909457_0db63417ea.webp)

## Use your map

When done, you can [publish](https://docs.maptiler.com/guides/map-design/how-to-publish-a-map/) your custom map and share it with the world. The options are the same as when [using a ready-made map](https://docs.maptiler.com/guides/using-map/).

Tip

The easiest way is to add the map to your website [as an iFrame](https://docs.maptiler.com/guides/using-map/iframe/).

Let your black and white pop art map catch everyone’s eye like comic books once did!