Skip to content

Stamen Watercolor

Free

Starter

Standard

Professional

Styled Raster Tiles

Static Map Images API

Reminiscent of hand drawn maps, the watercolor maps from Stamen Design apply raster effect area washes and organic edges over a paper texture to add warm pop to any map.

Info

Note that the Stamen Watercolor tileset is the original raster tileset from Stamen Design, and it is missing the same tiles as the original. This is particularly noticeable at higher zoom levels. We recommend configuring your library (ex: Leaflet or OpenLayers) to not request tiles higher than zoom level 16 for best results.

Preview and Use Stamen Watercolor

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
https://tiles.stadiamaps.com/styles/stamen_watercolor.json
Vector Style (API key auth)
https://tiles.stadiamaps.com/styles/stamen_watercolor.json?api_key=YOUR-API-KEY
Raster XYZ JPG URL format (up to zoom 16)
https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg

Static Map Images API Base URL
https://tiles.stadiamaps.com/static/stamen_watercolor.jpg
Raster TileJSON
https://tiles.stadiamaps.com/styles/stamen_watercolor/rendered.json

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
https://tiles-eu.stadiamaps.com/styles/stamen_watercolor.json
Vector Style (API key auth)
https://tiles-eu.stadiamaps.com/styles/stamen_watercolor.json?api_key=YOUR-API-KEY
Raster XYZ PNG URL format (up to zoom 20)
https://tiles-eu.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg

Static Map Images API Base URL
https://tiles-eu.stadiamaps.com/static/stamen_watercolor.jpg
Raster TileJSON
https://tiles-eu.stadiamaps.com/styles/stamen_watercolor/rendered.json

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
11
// 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 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_watercolor/{z}/{x}/{y}.jpg
L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg', {
    maxZoom: 16,

    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://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>', 
}).addTo(map);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
var map = new maplibregl.Map({
  container: 'map',
  // You can also explicitly request tiles from our EU servers using the following URL:
  // https://tiles-eu.stadiamaps.com/styles/stamen_watercolor.json
  style: 'https://tiles.stadiamaps.com/styles/stamen_watercolor.json',  // Style URL; see our documentation for more options
  center: [12, 53],  // Initial focus coordinate
  zoom: 4,
  maxZoom: 16
});

// 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_watercolor',
        retina: false,
      }),
    }),
  ],
  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
const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg',
        attributions: [
          '&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://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>'
        ],
        tilePixelRatio: 1,
        maxZoom: 16
      })
    }),
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([12, 53]),
    zoom: 5
  })
});

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