Blank map tiles - Error 410 gone (Mapbox & Leaflet JS)

Question

I am using Leaflet JS and MapBox to create a map. My browser displays as below:

The map does not show at all, my map tile is blank. The errors that I get in t

Answer 1

Mapbox changed the url schema from:

var map = L.map('map');

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: '© Mapbox © OpenStreetMap Improve this map',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(map);

To:

var map = L.map('map');

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: '© Mapbox © OpenStreetMap Improve this map',
    tileSize: 512,
    maxZoom: 18,
    zoomOffset: -1,
    id: 'mapbox/streets-v11',
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
}).addTo(map);

The url https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken} and the {id: 'mapbox/streets-v11'} changed.

Doc: Mapbox Leaflet Implementaton (On the right side is a switch with before and after(now)).

Url params: Static Tiles Style

Default Styles

The new default style Ids:

• mapbox/streets-v11
• mapbox/outdoors-v11
• mapbox/light-v10
• mapbox/dark-v10
• mapbox/satellite-v9
• mapbox/satellite-streets-v11