Troubleshooting: Blank or missing map tiles

There are a few reasons why you may be seeing blank tiles or tiles aren’t loading.

Your account is over its usage limits

Check your account status by going to your account billing page. If your account is over the limit then you can upgrade your plan from our Pricing page. Upgrading your account will restore your tiles shortly after the upgrade.

Your map ID is invalid

You can test the map ID by finding the map ID you’ve added to your code and navigating to the following link in your web browser (be sure to replace the MAPID with your own):

https://api.mapbox.com/v4/MAPID/page.html?access_token=<your access token here>

If this page doesn’t load, your map ID is invalid. You can find valid map IDs on your Projects, Styles, and Data pages. You may also use any of the Mapbox map IDs.

Your access token is invalid

You can test your access token by navigating to the following link in your web browser, making sure to use the access token in your code:

https://api.mapbox.com/v4/mapbox.streets/page.html?access_token=<your access token here>

If this page doesn’t load, your access token is faulty. Head to your apps page, generate a new access token, and try again.

You’re using v3 of the maps API

Check your code to see if you’re requesting v3. If you’re still using v3, you’ll need to update to v4. You’ll also need to pass one of your access tokens with the request.

Your map is hidden

If you’re hiding your map initially with something like display:none and showing it dynamically with JavaScript, it may have some problems appearing and sizing correctly. The map can’t figure out its own size when it’s hidden from the page, since it doesn’t have a size in the browser’s calculation.

With Mapbox GL JS you can call map.resize() to detect and resize the map and with Mapbox.js you can call map.invalidateSize() to invalidate the size of your map.

Mapbox GL JS

When working with Mapbox GL JS, call map.resize() on the map object after its containing element is resized or shown:

// your code that shows the map div
$('#map-div').show();

// detect the map's new width and height and resize it
map.resize();

Read more about resize in the documentation.

Mapbox.js

When working with Mapbox.js, call map.invalidateSize() after showing the map:

// your code that shows the map div
$('#map-div').show();

// invalidate the size of your map
map.invalidateSize();

For instance, if you’re using Bootstrap’s modals, they have an event you can use to trigger the size change:

// Given that your modal has the id #modal
// and your map is under the variable map
$('#modal').on('shown.bs.modal', function() {
  map.invalidateSize();
});
Additional questions? Ask our support team or learn more about How Mapbox Works.