Trouble with leaflet maps (GET mapbox tiles unauthorized 401)

DrkStr picture DrkStr · Feb 20, 2015 · Viewed 8.9k times · Source

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);

Answer

iH8 picture iH8 · Feb 20, 2015

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