---
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-beta-4y5.pages.dev/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 **pop art map** using our visual map editor [Map Designer](https://docs-beta-4y5.pages.dev/guides/map-design/editor/):

Warning

Please note that this tutorial uses an [older generation of MapTiler maps](https://docs-beta-4y5.pages.dev/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

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](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)

Open this map style in the [Map Designer tool](https://cloud.maptiler.com/maps/editor?map=toner-v2) 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](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.

Add some **starburst and speech bubble icons** typical for comic books. You can download SVG icons from the [Noun project](https://thenounproject.com/); don’t forget to credit the author. The starburst icons in this example come from [Lucas Helle](https://thenounproject.com/lucashelle/).

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

You can also 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** (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.

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

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

```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**, 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.

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

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.

![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, use 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

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.

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

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

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

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. 

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

## Use your map

When done, you can [publish](https://docs-beta-4y5.pages.dev/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-beta-4y5.pages.dev/guides/using-map/).

Tip

The easiest way is to add the map to your website [as an iFrame](https://docs-beta-4y5.pages.dev/guides/using-map/iframe/).