I’m using Leaflet React, and my question is this.

How can I make sure that my TileLayer is not limited to -180/180 in X and Y?

For example, I have some rectangular maps, and some square ones. For the square maps, it’s not a problem if it’s 180×180 (for marker positions), but for my rectangular maps, it’s more of a problem…

For example, I have a 5000x2000px rectangular map (which has worked well so far), but I need to quadruple it (20,000×8,000) because I need to add elements to it. But that’s the problem.

When I make the maps, I use it, ok, but the map is still 180×180 (so the markers are badly positioned as the map is visually 4x smaller (compared to the tileLayer).

Example code:

<MapContainer
          className="MapSize"
          center={[0, 0]}
          zoom={3}
          scrollWheelZoom={true}
          attributionControl={false}
        >
          <TileLayer
            url={"/path/to/your/image/{z}/{x}/{y}.png"}
            maxZoom={5}
            minZoom={0}
            tileSize={256}
            noWrap={true}
          />
          <MapClicker />
          <MapMarker />
        </MapContainer>

I’ve tried crs=, but it moves the map (to the bottom right), without the “0” point remaining the same for my map.

Basically, I’d like the “0” of my map to be the same, BUT, if I double the size (for example 5000×2000 which theoretically gives 15000×6000) since I’m duplicating, I need to keep the same spacing ratio.

Thank you

Leaflet-React CRS tested