Raster maps for web

Displaying a grid of image tiles to make up a map is the traditional way of doing electronic maps. These consume more bandwidth and will be slower to load as a result, but some applications work only with raster tiles. If you are able to use vector, we encourage you to do so, as they will always look better and usually load faster.

For raster maps, many JavaScript libraries exist. We recommend using the well-known Leaflet library for most applications.

For advanced users, we recommend OpenLayers. While it is a little heavier and has a steeper learning curve than the others, it's feature set is second to none.

Displaying a map (Leaflet)

Below is an example of how to use our tiles in Leaflet. Nothing special is required. Just point to the tile URL for the style you want and everything should work seamlessly as long as you have an active plan for your domain. Be sure to include the {r} placeholder as shown below to support retina screens.

<!DOCTYPE html>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Raster Map Demo</title>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
        <script type="text/javascript" src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
        <style type="text/css">
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
    <body >
        <div id="map"></div>
        <script type="text/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
            L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{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="http://openstreetmap.org">OpenStreetMap</a> contributors',

Further reading

This certainly isn't all there is to know about Leaflet. Check out the official documentation for Leaflet to learn about more advanced usage, including markers, overlays, and more.