Skip to content

Stamen Toner

Free

Starter

Standard

Professional

The most popular of the excellent styles from Stamen Design, these high-contrast B+W (black and white) maps are the perfect backdrop for your colorful and eye-catching overlays. Available with raster layer groups separating the background, lines, and labels to enable composition with your own raster layers.

Preview and Use Stamen Toner

Notice a Missing or Outdated Tile?

Today we are still serving the original Stamen tilesets. Note that these have missing tiles, particularly at higher zoom levels. Sometime in September, we will deploy updated styles which will have the same update cadence as our other tiles (approximately monthly) and full global coverage at high zoom levels.

No action further will be required on your part to use the tiles when they are deployed.

Our standard endpoints will serve requests from the fastest server no matter where your users are, and is backed by our global CDN with multiple layers of redundancy.

Vector Style (BETA)
https://tiles-beta.stadiamaps.com/styles/stamen_toner.json
Raster XYZ PNG URL format (max zoom 20)
https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png
Raster XYZ PNG URL format (for OpenLayers, QGIS, MapLibre, and other renderers without retina placeholder support)
https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}@2x.png

Static Maps Base URL
Coming Soon
Raster TileJSON
Coming Soon

What do {x}, {y}, {z}, and {r} mean?

The {x}, {y}, and {z} placeholders represent x, y, and zoom following the standard slippy map tilename convention. This format is used by most popular libraries. Note that our tile numbering uses the XYZ scheme, not TMS.

The {r} placeholder is used for HiDPI ("retina") display suppoort. Popular web map renderers like Leaflet understand this placeholder. If your renderer does not understand this (e.g., MapLibre GL JS or QGIS), you can either remove the placeholder to get raw 256x256 PNGs, or replace it with @2x for 2x scaled images.

Our EU endpoints allow you to explicitly route all requests to our EU servers. See our EU Endpoints page for more details.

Vector Style
Coming Soon
Raster XYZ PNG URL format (max zoom 20)
https://tiles-eu.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png
Raster XYZ PNG URL format (for OpenLayers, QGIS, MapLibre, and other renderers without retina placeholder support)
https://tiles-eu.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}@2x.png

Static Maps Base URL
Coming Soon
Raster TileJSON
Coming Soon

What do {x}, {y}, {z}, and {r} mean?

The {x}, {y}, and {z} placeholders represent x, y, and zoom following the standard slippy map tilename convention. This format is used by most popular libraries. Note that our tile numbering uses the XYZ scheme, not TMS.

The {r} placeholder is used for HiDPI ("retina") display suppoort. Popular web map renderers like Leaflet understand this placeholder. If your renderer does not understand this (e.g., MapLibre GL JS or QGIS), you can either remove the placeholder to get raw 256x256 PNGs, or replace it with @2x for 2x scaled images.

Leaflet is one of the oldest mapping libraries still in active use, and its longevity is a testament to its quality. What it lacks in fancy 3D support, it makes up for in ease-of-use and a vibrant plugin ecosystem. Check out our tutorials to get started with your favorite web framework or vanilla JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Initialize a map centered at (53, 12) at zoom level 5
var map = L.map('map').setView([53, 12], 5);

// Style URL format in XYZ PNG format; see our documentation for more options
// You can also explicitly request tiles from our EU servers using the following URL:
// https://tiles-eu.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png
L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors', 
}).addTo(map);
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// NOTE: These styles are currently in beta, but are expected to be finalized by mid-September.
// If you want to test your integration today, use the following MapLibre code snippet.
// Note that the final URL will remove beta designation once the vector styles are finalized (the beta URLs will
// continue working, but you should update to the production endpoint to receive the best performance and stability
// once it is available).
var map = new maplibregl.Map({
  container: 'map',
  style: 'https://tiles-beta.stadiamaps.com/styles/stamen_toner.json ',  // Style URL; see our documentation for more options
  center: [12, 53],  // Initial focus coordinate
  zoom: 4
});

// Add zoom and rotation controls to the map.
map.addControl(new maplibregl.NavigationControl());

In OpenLayers v8.0.0 and newer, Stadia Maps is one of the bundled tile sources, so it's only a few lines of code to get started.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.StadiaMaps({
        layer: 'stamen_toner',
        retina: true,
      }),
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});

If you're using a version before v8.0.0, you'll need to create an XYZ source like so.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}@2x.png',
        attributions: [
          '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a>',
          '&copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a>',
          '&copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a>',
          '&copy; <a href="https://www.openstreetmap.org/about/" target="_blank">OpenStreetMap contributors</a>'
        ],
        tilePixelRatio: 2,
        maxZoom: 20
      })
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});

Lite Variant

Stamen's Toner style is also available in a slightly lighter variant!

Our standard endpoints will serve requests from the fastest server no matter where your users are, and is backed by our global CDN with multiple layers of redundancy.

Vector Style (BETA)
https://tiles-beta.stadiamaps.com/styles/stamen_toner_lite.json
Raster XYZ PNG URL format (max zoom 20)
https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png
Raster XYZ PNG URL format (for OpenLayers, QGIS, MapLibre, and other renderers without retina placeholder support)
https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}@2x.png

Static Maps Base URL
Coming Soon
Raster TileJSON
Coming Soon

What do {x}, {y}, {z}, and {r} mean?

The {x}, {y}, and {z} placeholders represent x, y, and zoom following the standard slippy map tilename convention. This format is used by most popular libraries. Note that our tile numbering uses the XYZ scheme, not TMS.

The {r} placeholder is used for HiDPI ("retina") display suppoort. Popular web map renderers like Leaflet understand this placeholder. If your renderer does not understand this (e.g., MapLibre GL JS or QGIS), you can either remove the placeholder to get raw 256x256 PNGs, or replace it with @2x for 2x scaled images.

Our EU endpoints allow you to explicitly route all requests to our EU servers. See our EU Endpoints page for more details.

Vector Style
Coming Soon
Raster XYZ PNG URL format (max zoom 20)
https://tiles-eu.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png
Raster XYZ PNG URL format (for OpenLayers, QGIS, MapLibre, and other renderers without retina placeholder support)
https://tiles-eu.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}@2x.png

Static Maps Base URL
Coming Soon
Raster TileJSON
Coming Soon

What do {x}, {y}, {z}, and {r} mean?

The {x}, {y}, and {z} placeholders represent x, y, and zoom following the standard slippy map tilename convention. This format is used by most popular libraries. Note that our tile numbering uses the XYZ scheme, not TMS.

The {r} placeholder is used for HiDPI ("retina") display suppoort. Popular web map renderers like Leaflet understand this placeholder. If your renderer does not understand this (e.g., MapLibre GL JS or QGIS), you can either remove the placeholder to get raw 256x256 PNGs, or replace it with @2x for 2x scaled images.

Leaflet is one of the oldest mapping libraries still in active use, and its longevity is a testament to its quality. What it lacks in fancy 3D support, it makes up for in ease-of-use and a vibrant plugin ecosystem. Check out our tutorials to get started with your favorite web framework or vanilla JavaScript.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Initialize a map centered at (53, 12) at zoom level 5
var map = L.map('map').setView([53, 12], 5);

// Style URL format in XYZ PNG format; see our documentation for more options
// You can also explicitly request tiles from our EU servers using the following URL:
// https://tiles-eu.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png
L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/about" target="_blank">OpenStreetMap</a> contributors', 
}).addTo(map);
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// NOTE: These styles are currently in beta, but are expected to be finalized by mid-September.
// If you want to test your integration today, use the following MapLibre code snippet.
// Note that the final URL will remove beta designation once the vector styles are finalized (the beta URLs will
// continue working, but you should update to the production endpoint to receive the best performance and stability
// once it is available).
var map = new maplibregl.Map({
  container: 'map',
  style: 'https://tiles-beta.stadiamaps.com/styles/stamen_toner_lite.json ',  // Style URL; see our documentation for more options
  center: [12, 53],  // Initial focus coordinate
  zoom: 4
});

// Add zoom and rotation controls to the map.
map.addControl(new maplibregl.NavigationControl());

In OpenLayers v8.0.0 and newer, Stadia Maps is one of the bundled tile sources, so it's only a few lines of code to get started.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.StadiaMaps({
        layer: 'stamen_toner_lite',
        retina: true,
      }),
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});

If you're using a version before v8.0.0, you'll need to create an XYZ source like so.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}@2x.png',
        attributions: [
          '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a>',
          '&copy; <a href="https://stamen.com/" target="_blank">Stamen Design</a>',
          '&copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a>',
          '&copy; <a href="https://www.openstreetmap.org/about/" target="_blank">OpenStreetMap contributors</a>'
        ],
        tilePixelRatio: 2,
        maxZoom: 20
      })
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});

Raster Layer Groups

If you're building a raster map and want to intersperse your own overlays (for example, to use as layers in QGIS), we offer three separate layer groups.

Name Leaflet URL format QGIS URL format Description
Toner Background https://tiles.stadiamaps.com/tiles/stamen_toner_background/{z}/{x}/{y}{r}.png https://tiles.stadiamaps.com/tiles/stamen_toner_background/{z}/{x}/{y}@2x.png Includes only background layers (water, landcover, etc.) and lines (roads, borders, etc.)
Toner Lines https://tiles.stadiamaps.com/tiles/stamen_toner_lines/{z}/{x}/{y}{r}.png https://tiles.stadiamaps.com/tiles/stamen_toner_lines/{z}/{x}/{y}@2x.png Includes only line layers (road, borders, etc.)
Toner Labels https://tiles.stadiamaps.com/tiles/stamen_toner_labels/{z}/{x}/{y}{r}.png https://tiles.stadiamaps.com/tiles/stamen_toner_labels/{z}/{x}/{y}@2x.png Includes only label layers (places, road names, etc.)
Looking for Toner Hybrid?

The toner-hybrid flavor offered by Stamen Design is deprecated and you should migrate away from it by August 31, 2023. You can achieve the same effect by combining the lines and labels layer groups, or using vector styles (coming soon).

Next Steps

Take the next step and follow one of our tutorials to set up a map for your website or app. Just plug in one of the appropriate URLs above!

Get Started With a Free Account