OSM Bright¶

Free

Starter

Standard

Professional

The OSM Bright style was developed as a sensible starting point for quickly making beautiful maps based on the OpenStreetMap database. It highlights the content of the map itself. We recommend using OSM bright where you provide directions, have minimal overlays or other data that might clash with the styling, or want POI data.

Preview and Use OSM Bright¶

PreviewsStandard URLsEU URLsUse in MapLibre GL JSUse in LeafletUse in OpenLayers

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/osm_bright.json

Raster XYZ PNG URL format (up to zoom 20)

https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png

Raster XYZ PNG URL format (up to zoom 20; for OpenLayers, QGIS, MapLibre, and other renderers without retina placeholder support)

https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}@2x.png

Static Maps Base URL

https://tiles.stadiamaps.com/static/osm_bright

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.

Raster TileJSON

https://tiles.stadiamaps.com/styles/osm_bright/rendered.json

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/osm_bright.json

Raster XYZ PNG URL format (up to zoom 20)

https://tiles-eu.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png

Raster XYZ PNG URL format (up to zoom 20; for OpenLayers, QGIS, MapLibre, and other renderers without retina placeholder support)

https://tiles-eu.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}@2x.png

Static Maps Base URL

https://tiles-eu.stadiamaps.com/static/osm_bright

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.

Raster TileJSON

https://tiles-eu.stadiamaps.com/styles/osm_bright/rendered.json

MapLibre GL JS is the most advanced vector map renderer for the web. If you need features like 3D perspective and client-side styling, MapLibre GL JS is generally the best option. Check out our tutorials to get started with your favorite web framework or vanilla JavaScript.

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/osm_bright.json
  style: 'https://tiles.stadiamaps.com/styles/osm_bright.json',  // Style URL; see our documentation for more options
  center: [12, 53],  // Initial focus coordinate
  zoom: 4
});

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.

// 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/osm_bright/{z}/{x}/{y}{r}.png
L.tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '&copy; <a href="https://stadiamaps.com/" target="_blank">Stadia Maps</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);

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.

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.StadiaMaps({
        layer: 'osm_bright',
        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.

const map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}@2x.png',
        attributions: [
          '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</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
  })
});

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