Problem with displaying GeoJSON in EPSG:3575 projection in Leaflet

Question

In the EPSG:3575 projection in the Leaflet, all settings are identical, but GeoJSONs are displayed differently for different rasters. For rasters, the difference is only in the size of the tiles. The first tiles 2048x2048 https://tile.gbif.org/3575/omt/3/5/5@4x.png?style=osm-bright-en The second tiles 256x256 https://c.tiles.arcticconnect.ca/osm_3575/4/7/9.png What should I try to display correctly the second option?

render() {

    const MAX_ZOOM = 16;
    const TILE_SIZE = 512;

    const extent = Math.sqrt(2) * 6371007.2;
    const resolutions = Array(MAX_ZOOM + 1)
    .fill()
    .map((_, i) => extent   / TILE_SIZE / Math.pow(2, i - 1));

    console.log(resolutions);

    const ARCTIC_LAEA = new Proj.CRS(
        "EPSG:3575",
        "+proj=laea +lat_0=90 +lon_0=10 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs",
        {
            origin: [-extent, extent],
            bounds: L.bounds(L.point(extent, -extent), L.point(extent * (-1), extent)),
            resolutions:  resolutions
        }
    );

    const ARCTIC_TILES_URL =
        "https://tile.gbif.org/3575/omt/{z}/{x}/{y}@4x.png?style=osm-bright-en";
        //"https://c.tiles.arcticconnect.ca/osm_3575/{z}/{x}/{y}.png";

    let tiles = [];
    this.props.tileData.forEach((data) => {
        tiles.push(
            <TileLayer
                url={ARCTIC_TILES_URL}
                key={data.name}
                tileSize={TILE_SIZE}
                minZoom={2}
                maxZoom={MAX_ZOOM}
            />
        );
    });
    let gobjects = [];
    
    this.props.gobjects.forEach((gobject, index) => {
        gobjects.push(
            <GeoJSON
                data={gobject.geojson}
                pointToLayer={this.injectCustomIcon}
                style={() => this.getStyleForGeoJson(gobject.name)}
                key={index}
                attribution={gobject.name}
            />
        );
    });
    const question = this.props.gobjects[this.curGobjIndex].name;
    // @todo what if empty?
    return (
        
        <>
            <MapContainer
               maxBounds={this.getBounds()}
               style={{ height: '100vh', width: '100vw' }}
               whenCreated={this.handleWhenCreated}
               maxBoundsViscosity={0.9}
               worldCopyJump
               crs={ARCTIC_LAEA}
               center={[90, 135]}
               zoom={2}
               minZoom={2}
               maxZoom={MAX_ZOOM}
            >
                <Marker position={[90, 135]}>
                    <Popup>Popup for Marker</Popup>
                    <Tooltip>Tooltip for Marker</Tooltip>
                </Marker>
                <Marker position={[34.5531, 18.0480]}>
                    <Popup>Popup for Marker</Popup>
                    <Tooltip>Tooltip for Marker</Tooltip>
                </Marker>
                {tiles}
                {gobjects.reverse()}
            </MapContainer>

            {!this.config && <ConfigurationModal objects={this.props.gobjects} onStart={this.onStart}/>}
        </>
    )
}

Answer 1

If you look at the implementation of this projection in Leaflet at https://webmap.arcticconnect.ca/polarmap.js/examples/PolarMap/geosearch/index.html#ac_3575/4/90.00/0.00, which uses tiles https://{s}.tiles.arcticconnect.ca/osm_3575/{z}/{x}/{y}.png, code should look as follows (plain JS, tested):

var max_zoom = 16;
var tile_size = 256;      
var extent = L.Projection.Mercator.R * Math.PI;

var maxResolution = ((extent - -extent) / tile_size);
var resolutions = [];
for (var zoom = 0; zoom <= max_zoom; zoom++) {
  resolutions.push(maxResolution / Math.pow(2, zoom));
}
var origin = [-extent, extent];

var crs = new L.Proj.CRS(
  'EPSG:3575',
  '+proj=laea +lat_0=90 +lon_0=10 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs',
  {
    origin: origin,
    resolutions: resolutions
  }
);

var map = L.map('map', {
  crs: crs,
}).setView([51.6, -2.8], 11);

L.tileLayer('https://{s}.tiles.arcticconnect.ca/osm_3575/{z}/{x}/{y}.png', {
  tileSize: tile_size,
  minZoom: 1,
  maxZoom: max_zoom,
}).addTo(map);