Skip to content

Stadia Outdoors

Make the great outdoors your playground. Based on the well-known OSM Bright style, the Stadia Outdoors style highlights a moderate number of features, adds useful outdoor features such as ski slopes, and displays natural features such as mountains, parks, and paths.

We recommend using Outdoors any place you provide directions—especially for hiking, have minimal overlays that might clash with the styling, or want POI data. While the name is "outdoors," we try to keep this style applicable to a wide range of uses.

Free

Starter

Standard

Professional

Preview and Use Stadia Outdoors

Matterhorn

Matterhorn @ zoom 11 with ski slopes

Berlin
Berlin @ zoom 11

New York City
New York City @ zoom 11

San Francisco
San Francisco @ zoom 10

Static Maps Base URL
https://tiles.stadiamaps.com/static/outdoors
Vector Style
https://tiles.stadiamaps.com/styles/outdoors.json
Raster XYZ PNGs
https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png
Raster XYZ PNGs (for MapLibre)
https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}@2x.png

What are these {x}, {y}, {z} things?

The {x}, {y}, and {z} placeholders represent x, y, and zoom following the standard slippy map tilename convention.

The {r} placeholder should be understood by most raster map libraries and will be replaced with @2x on devices with a HiDPI ("retina") display. If yours does not understand this (e.g., MapLibre GL JS), you can either remove this to get raw 256x256 PNGs, or manually replace it with @2x for 2x scale.

Raster TileJSON
https://tiles.stadiamaps.com/styles/outdoors/rendered.json
1
2
3
4
5
6
7
8
// 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
L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
}).addTo(map);
1
2
3
4
5
6
var map = new maplibregl.Map({
  container: 'map',
  style: 'https://tiles.stadiamaps.com/styles/outdoors.json ',  // Style URL; see our documentation for more options
  center: [12, 53],  // Initial focus coordinate
  zoom: 4
});

Next Steps

Get Started With a Free Account