OSM Bright¶

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.

Free

Starter

Standard

Professional

Preview and Use OSM Bright¶

PreviewsURLsUse in LeafletUse in MapLibre GL JS

Static Maps Base URL

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

Vector Style

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

Raster XYZ PNGs

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

Raster XYZ PNGs (for MapLibre)

https://tiles.stadiamaps.com/tiles/osm_bright/{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/osm_bright/rendered.json

// 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/osm_bright/{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);

var map = new maplibregl.Map({
  container: 'map',
  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
});

Next Steps¶

Get Started With a Free Account