A custom CRS for Leaflet in order to display mapbox raster tiles

leaflet-crs-mapbox.js

const customCRS = L.extend({}, L.CRS.Earth, {
  projection: L.Projection.SphericalMercator,
  transformation: (function () {
    var scale = 0.5 / (Math.PI * L.Projection.SphericalMercator.R);
    return new L.Transformation(scale, 0.5, -scale, 0.5);
  }()),
  scale: function (zoom) {
   return 512 * Math.pow(2, zoom);
 }
});

const map = L.map('map', {
  crs: customCRS,
  center: config.map.center
});
  
const tileLayer = L.tileLayer(config.map.tileLayer, {
  attribution: config.map.attribution,
  accessToken: config.map.accessToken,
  tileSize: 512
}).addTo(map);