Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trouble with leaflet maps (GET mapbox tiles unauthorized 401)

Tags:

leaflet

mapbox

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);
like image 679
DrkStr Avatar asked Feb 20 '15 17:02

DrkStr


People also ask

How do you use Mapbox in leaflet?

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.

What is the difference between leaflet and Mapbox?

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

Are Mapbox tiles free?

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.

How do I get Mapbox access token?

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.


1 Answers

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

like image 162
iH8 Avatar answered Nov 10 '22 18:11

iH8