I am trying to add leaflet maps to my webpage and I am using Mapbox tiles. I am not able to get the map in the basic tutorial to work, all I am seeing is a grey screen. I have a mp id from mapbox and I have added it to my code. Attaching relevant code below.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tiles.mapbox.com/v3/rakshak.l937n12c/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(map);
and this is what I am seeing in the console:
GET http://a.tiles.mapbox.com/v4/rakshak.l937n12c/13/4093/2723.png 401 (Unauthorized)
In the css I have just put the map height to height: 100vh.
All I am seeing on my screen are the map zoom controllers and a grey screen. Am I missing an important step ?
Edit 1: Update JS code:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://api.tiles.mapbox.com/v4/rakshak.l937n12c/{z}/{x}/{y}.{format}?access_token=pk.eyJ1IjoicmFrc2hhayIsImEiOiJ5cHhqeHlRIn0.Vi87VjI1cKbl1lhOn95Lpw', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18
}).addTo(map);
As of December 2018, If you're looking to use tiles that were built with Mapbox Studio within Leaflet: Go to the list of Styles in Studio (current url is https://www.mapbox.com/studio/) click on the 'share & use' button for style you wish to use. click on the use tab in the new pop-up that appeared.
Leaflet is "just" a map API. It doesn't provide data/maps itself. Mapbox is a service to design and publish maps, where the end-result is a bunch of generated map-tiles stored in the cloud (and some json files).
Mapbox pricing is described here - mapbox.com/pricing - the free tier applies to public and free-to-access apps. For private or pay-for apps you don't get a free tier.
To obtain an access token, sign in to Mapbox and visit the Account Apps page. For Mapbox. js, a "Public" token (starting with "pk") is required. You may create multiple tokens and use different ones for different applications.
Set up your tileLayer to include your map's id and your user token:
var tileLayer = L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
subdomains: ['a','b','c','d'],
mapId: <YOUR MAPID HERE>,
token: <YOUR TOKEN HERE>
});
Here's a working example on Plunker: http://plnkr.co/edit/Kf3f8h?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With