Mapbox.js zoom level 0 is not showing world map

Question

So according to Mapbox documentation, https://docs.mapbox.com/help/glossary/zoom-level/ at zoom level 0 we can have the view of the world map, which I thought would be similar to the one explained in leaflet.js which is https://leafletjs.com/examples/zoom-levels/ shown below at zoom 0 for Carto tile.

However, why is it that at zoom level 0, Mapbox shows a blank screen instead?

If you play around with the map in https://docs.mapbox.com/mapbox.js/example/v1.0.0/ at the most minimum zoom its a total blank screen.

I implemented it in my HTML page as well and it is showing the same result as well.

var mymap = L.map('map').setView([0,0], 0);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox/streets-v11',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiY2x0YW4iLCJhIjoiY2todTF0eTZ2MTh5MzJ5cGJzMWlnM2RpcCJ9.jVxTCY664slDpTiOjhzhwA'
}).addTo(mymap);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#output2 {
    height: 90vh;
    width: 25%;
    border: 1px solid black;
}

#map {
    height: 40%;
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>
</head>
<body>
  <div id = "output2">
    <div id = "map"></div>
  </div>
  <script src="test.js"></script>
</body>
</html>

treecon treecon · Accepted Answer · 2020-12-15T07:13:38

What produces this problem is the zoomOffset property that you set to -1. With this offset, when you zoom to level 0, it actually zooms to -1 which does not exist and therefore, the map is not rendered.

Just remove it (0 is the default value) or set it to 0.

....
zoomOffset: 0,
....

Mapbox.js zoom level 0 is not showing world map

1 Answers