map tile urls are wrong when using mapbox provodier

[JaosnHsieh]

Mapbox tile requires to set offset zoom level -1, which causes wrong urls generated.

We can know first and last tile image x y z by below code

result

first tile image url x 13691 y 7078
last tile image url x 13697 y 7084

const zoom = 14;

const northWestLatLng = [23.75156801631958, 120.83896636962892];
const southEastLatLng = [23.628483651032216, 120.96118927001955];

console.log(
  `first tile image url x ${lon2tileX(northWestLatLng[1], zoom)} y ${lat2tileY(
    northWestLatLng[0],
    zoom,
  )}`,
);
console.log(
  `last tile image url x ${lon2tileX(southEastLatLng[1], zoom)} y ${lat2tileY(
    southEastLatLng[0],
    zoom,
  )}`,
);

function lon2tileX(lon, zoom) {
  return Math.floor(((lon + 180) / 360) * Math.pow(2, zoom));
}
function lat2tileY(lat, zoom) {
  return Math.floor(
    ((1 -
      Math.log(Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)) / Math.PI) /
      2) *
      Math.pow(2, zoom),
  );
}
// lon2tileX, lat2tileY are from: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)

Whereas, by using getTileUrls, we can wrong urls result as below

first tile image url x 6845 y 3539 z 14
last tile image url x 6848 y 3542 z 14

I run below code on docs/src/index.js file

const map = L.map('map');
// offline baselayer, will use offline source if available
const baseLayer = L.tileLayer
  .offline(urlTemplate, {
    attribution:
      '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    urlTemplate:
      'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=xxxxx,
    zoomOffset: -1,
    tileSize: 512,
  })
  .addTo(map);

const zoom = 14;
const northWestLatLng = [23.75156801631958, 120.83896636962892];
const southEastLatLng = [23.628483651032216, 120.96118927001955];

const bounds = new L.Bounds(
  map.project(northWestLatLng, zoom),
  map.project(southEastLatLng, zoom)
);
const tiles = baseLayer.getTileUrls(bounds, zoom);
const firstTile = tiles[0];
const lastTile = tiles[tiles.length - 1];
console.log(`first tile image url x ${firstTile.x} y ${firstTile.y} z ${zoom}`);
console.log(`last tile image url x ${lastTile.x} y ${lastTile.y} z ${zoom}`);

It seems to be caused by zoomOffset is not added to Leaflet map.project so we have to set offset zoom level manually.

To get correct urls, +1 on map.project zoom level

from

const bounds = new L.Bounds(
  map.project(northWestLatLng, zoom),
  map.project(southEastLatLng, zoom)
);

to
```javascript

const bounds = new L.Bounds(
  map.project(northWestLatLng, zoom+1),
  map.project(southEastLatLng, zoom+1)
);