Skip to main content

Use a Mapbox style in Leaflet

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. You can add a Mapbox style to a Leaflet map using the Mapbox Static Tiles API to generate raster tiles from your Mapbox Studio style.

Use the L.TileLayer class to add the raster tiles to your Leaflet map:

var map = L.map('map')
        .setView([38.8929, -77.0252], 14)
        .addLayer(
          L.tileLayer(
            'https://api.mapbox.com/styles/v1/YOUR_MAPBOX_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_MAPBOX_ACCESS_TOKEN,
            {
              maxZoom: 19,
              attribution:
                '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="https://www.mapbox.com/about/maps/">Mapbox</a> <strong><a href="https://labs.mapbox.com/contribute/" target="_blank">Improve this map</a></strong>'
            }
          )
        );
Was this example helpful?