CODEWITHSUNDEEP
javascriptcssdictionaryleafletmapbox
Luis Antionio
Luis Antionio

Reputation: 35

Is it possible to use a style made in Mapbox studion in Leaflet?

I have made a style in Mapbox Studio and was wondering if it's possible to use that style in a Leaflet project. I have a style URL and my access token, but not an Mapbox ID. How do I make this work with Leaflet? Is it possible?

Style url: mapbox://styles/gustavsvensson/cin1hwd9a00bncznomsx507se

Upvotes: 0

Views: 545

Answers (1)

cammace
cammace

Reputation: 3168

You'll need to get your Mapbox ID by uploading to Mapbox online or using their enterprise system Atlas Server. They have a free account where you can put it and get your style ID.

Here's an example snippet I've tested with one of my map styles created in Studio and it worked. Notice that I need to provide the key, my username, and Mapbox ID to get the tiles to render properly.

<!DOCTYPE html>

<html>
   <head>
      <meta charset=utf-8 />
      <title>Add styles made with Mapbox Studio to a Leaflet map</title>
      <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
      <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
      <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
      <style>
         body { margin:0; padding:0; }
         #map { position:absolute; top:0; bottom:0; width:100%; }
      </style>
   </head>
   <body>
      <div id='map'></div>
      <script>
         L.mapbox.accessToken = '<Your access token here';
         var map = L.map('map').setView([38.97416, -95.23252], 15);


         // Add tiles from Mapbox Style API(https://www.mapbox.com/developers/api/styles/)
         // Tiles are 512x512 pixels and are offset by 1 zoom level
         L.tileLayer(
         'https://api.mapbox.com/styles/v1/<mapbox username>/<style ID>/tiles/{z}/{x}/{y}?access_token=' + L.mapbox.accessToken, {
             tileSize: 512,
             zoomOffset: -1,
             attribution: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map);
      </script>
   </body>
</html>

Upvotes: 1

Related Questions