Problems with booklet cards (GET cardboard tiles unauthorized 401)

I am trying to add elevator maps to my webpage and I am using Mapbox tiles. I can’t get the card to work in the main textbook, all I see is a gray screen. I have mp id from mapbox and I added it to my code. Attach the appropriate 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 see on the console:

 GET http://a.tiles.mapbox.com/v4/rakshak.l937n12c/13/4093/2723.png 401 (Unauthorized) 

In css, I just set the height of the map in height: 100vh.

All that I see on my screen are the map scaling controllers and the gray screen. Did I miss 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); 
+5
source share
1 answer

Configure your tileLayer to include your map id and 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 is a working example on Plunker: http://plnkr.co/edit/Kf3f8h?p=preview

+9
source

Source: https://habr.com/ru/post/1213821/


All Articles