Skip to content

Vector Map Tiles

Vector tiles are the best choice for most interactive map applications. They look great at any zoom level, and are razor sharp on high pixel density screens like the retina displays on most Apple devices. They also allow for dynamic applications with adaptive styling that you can change dynamically as needed.

Our OpenMapTiles-compatible vector tiles work are distributed using the ubiquitous Mapbox Vector Tile format. We recommend the web and mobile renderers from MapLibre, but our tiles will work in any MVT-compatible renderer.

Tile URLs

In mast cases, all you need is a MapLibre JSON Style URL. Renderers like MapLibre GL JS and MapLibre Native will handle the rest for you! We have a number of styles to get you started. If you are using a renderer that doesn't use MapLibre JSON styles, or need the raw tiles for some other purpose like spatial analysis, there are a few ways you can access them.

TileJSON is a widely supported tileset description file. It includes the URL as well as other metadata such as the bounds, attribution, and supported zoom levels.

Standard URL
https://tiles.stadiamaps.com/data/openmaptiles.json

If you want to explicitly route all tile requests to our EU servers, we offer a separate URL See our EU Endpoints page for more details.

EU URL
https://tiles-eu.stadiamaps.com/data/openmaptiles.json

If you need raw access to the tiles, you can access them with the following URL format. Your application or framework must fill in the placeholder values with an XYZ (not TMS) tile number. We support zoom levels 0 through 14. Any additional rendering beyond zooom 14 is done by "over-zooming" the z14 tile, which contains all possible information.

Standard URL format
https://tiles.stadiamaps.com/data/openmaptiles/{z}/{x}/{y}.pbf

If you want to explicitly route all tile requests to our EU servers, we offer a separate URL See our EU Endpoints page for more details.

EU URL format
https://tiles-eu.stadiamaps.com/data/openmaptiles/{z}/{x}/{y}.pbf

Authentication

For local development on a web server at localhost or 127.0.0.1, you can get started without any special setup! For mobile, server, and non-local web development, sign up for a free account to configure domain auth or an API key. Our authentication guide has all the gritty details.

Tutorials

We have an extensive tutorial library to help you get started with the most popular libraries/frameworks. If your library/framework isn't listed, let us know! Our tiles are compatible with vector map renderers capable of loading Mapbox Vector Tiles.

Web

Mobile

Alternative Renderers

Stadia Maps serves tiles that conform to the MVT specification, which means you have the option of using any renderer that supports the MVT format, not just MapLibre GL JS. You can use our vector tiles with Leaflet, OpenLayers and Tangram with varying degrees of support and polish.

Stadia Maps will always support your rights to use any library that you choose. While we aren't quite ready to distribute styles for alternative renderers with our stamp of quality, we have official styles for other renderers on our roadmap. Please reach out if this is important for you and your project.

OpenLayers

You can use any (OpenMapTiles schema-compatible) JSON style with OpenLayers thanks to the ol-mapbox-style plugin. This library will attempt to convert a GL JSON stylesheet into an OpenLayers one. You’ll notice there are a some differences between the OpenLayers version and the MapLibre GL rendering, but it is close enough for many applications and enables you to leverage the power of OpenLayers with our vector tiles.

Try it in JSFiddle
<!DOCTYPE html>
<html>
    <head>
        <title>OpenLayers Vector Tile Demo</title>
        <!-- Note that fonts will not perfectly match our Mapbox GL styles at present -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css">
        <style>
            html, body {
                height: 100%;
                margin: 0;
            }
            #map {
                width: 100%;
                height: 100%;
                background-color: #f8f4f0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
        <script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
        <script src="https://unpkg.com/ol-mapbox-style@9.4.0/dist/olms.js"></script>
        <script>
            olms.apply('map', 'https://tiles.stadiamaps.com/styles/alidade_smooth_dark.json').then(function(map) {
                // Callback to configure the map if necessary
            });
        </script>
    </body>
</html>

Tangram

Tangram offers a number of unique features compared to other vector renderers, including custom GLSL shaders, unique 3D rendering customizations, and custom camera and lighting controls. We don't yet offer official styles, but have an experimental tool that attempts to migrate our JSON styles to Tangram ones. You can follow the development of the Cartogrify project on GitHub.

Further Reading

For more details on MapLibre GL JS, check out the official documentation.

You can also explore the Leaflet, OpenLayers, and Tangram projects.