Trouble with leaflet maps (GET mapbox tiles unauthorized 401)

leaflet, mapbox

Solution

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 &copy; <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

Problem

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 &copy; <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 &copy; <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); ```

Original source