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 © <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:
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 © <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);
source share