About custom raster tiles

[PZeide]

Hello,
I'm new to this "Interactive map" thing so I wanted to learn to try something.
So first, some context: I have 12 large images (4096x4096) that represent a single map if merged (4 images per row).
Using an API, I can easily resize/crop those images to fetch a single 256x256 tile for maplibre.

The problem is that:
I don't think I understand the Map thing very well, I've successfully rendered a little bit of the map but the map is stopping halfway through and repeating itself.

Here is the way I configured the map:

const map = new Map({
    container: container,
    interactive: true,
    style: {
      version: 8,
      sources: {
        "surface-raster-tiles": {
          type: "raster",
          tiles: ["map-tile://2?x={x}&y={y}&z={z}"],
          tileSize: 256,
        }
      },
      layers: [
        {
          id: "background",
          type: "background",
          paint: {
            "background-color": "red"
          },
        },
        {
          id: "surface",
          type: "raster",
          source: "surface-raster-tiles",
        }
      ]
    }
});

I use a custom protocol registered with maplibre.addProtocol to handle the tiles fetching.
I've tried to change the minzoom/maxzoom values and the render became weird. Also, when I don't specify any minzoom/maxzoom values, it seems that the z value from my protocol cannot reach 0 and is stuck at 2 (can't go any further than that). I don't know if there's a way to "expand" the map to show the entire map and not a little part.

I'm not sure if I'm doing those things right or if I'm going the wrong way.
Tell me if you need more information, thanks a lot for your time!

[HarelM]

The tile size you set is 256, so the add protocol callback should return an image in that size.
A codepen with an example of a single tile would help, but generally, I think you are in the right direction.
I also think you can define a larger tile size and avoid the need to split the tile, but you need the large tile to be "in the right place", I think.

[PZeide]

The tiles size is 256 and I'm pretty sure they are placed correctly, the thing is, only a part of the full map is rendered (because x, y, and z values of the addProtocol callback are looping over ?).

Here is the data provided to me to render the map:

"detail": {
        "slices": [
          [
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/0eec74713b864e6f639c9090484f8870_2123782535459474544.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/48b24b3804652a507e748be209e02211_5633794494794891662.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/1ff0d7b3297a3698a6cd05f7df7a4fc8_7516495825780863418.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/8610aeeb692a4680558458e00995f320_6195127829629973124.png"
            }
          ],
          [
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/48a25b70ff9cbeece03e3371f2975682_2440871639185650702.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/7e9ae7ee80a3fe0f7219446cda0dc199_4659037892013207556.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/6b2345be2f7b0463fd93493b2192e8ed_7251181825454192532.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/e42e2d81873ee038c755eba57c875d9e_1722125510266578757.png"
            }
          ],
          [
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/988fc4121c551cb649171df992c2a4a8_5951622372795360919.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/43051c6866dcef7866d1bb6183f31310_4072548634024658777.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/3fdcebc10c0f7e91349137144f235b57_5514023618566950125.png"
            },
            {
              "url": "https://act.hoyoverse.com/map_manage/20221215/28f01006fdbba947b09fe7a65392dbe9_423533981942125140.png"
            }
          ]
        ],
        "origin": [8939, 2286] as [number, number],
        "totalSize": [16384, 12288] as [number, number],
        "padding": [1024, 512] as [number, number]
      }

As you can see, each URL is a single "slice" of the map (a large 4096x4096 image). We can use oss-x-process-image to crop/resize the image:
?x-oss-process=image/resize,p_${resizePercentage}/crop,x_${cropX},y_${cropY},w_${tileSize},h_${tileSize}/format,webp.

If you want, here is the code that I use to extract the correct slice URL, correct crop values and correct resize percentage from x, y and z:

 const xSliceTotalSize = mapDetails.totalSize[0];
  const ySliceTotalSize = mapDetails.totalSize[1];

  const xLength = mapDetails.slices[0].length;
  const yLength = mapDetails.slices.length;

  const xSliceSize = xSliceTotalSize / xLength;
  const ySliceSize = ySliceTotalSize / yLength;

  const resizePercentage = 100 * Math.pow(2, z - 5);
  const fixedResizePercentage = Math.ceil(resizePercentage);
  const realTileSize = (TILE_SIZE * fixedResizePercentage / resizePercentage);

  const xSliceSizeAfterResize = Math.floor(xSliceSize * fixedResizePercentage / 100);
  const xTileIndex = realTileSize * x;
  const xCrop = Math.round(xTileIndex % xSliceSizeAfterResize );
  const xSlice = Math.floor(xTileIndex / xSliceSizeAfterResize );
  
  const ySliceSizeAfterResize = Math.floor(ySliceSize * fixedResizePercentage / 100);
  const yTileIndex = realTileSize * y;
  const yCrop = Math.round(yTileIndex % ySliceSizeAfterResize );
  const ySlice = Math.floor(yTileIndex / ySliceSizeAfterResize );
  
  const url = mapDetails.slices[ySlice][xSlice].url;

My variable naming is a bit weird but it's so I'm sure that everything is correct. I've checked with debug and every values are correctly computed and it should be all right.

I can provide you a Codepen if you really want but I use a cors proxy to bypass the cors policy of the act.hoyoverse.com website.
Also, as I said earlier, I'm pretty sure that the problem isn't coming from the actual data returned from act.hoyoverse.com or the way I compute those values, but rather that it is coming from the actual map config. The problem is that the tiles are looping over and libremap isn't giving me the chance to render the full map (but everything is working including the depth system):
lol.webm

Thanks !

[HarelM]

A codepen with a single image might help better see the problem.
Raster are working in general and so is the addProtocol so I'm guessing the problem is with the configuration or the callback, but I don't really know...

[PZeide]

A single image on the entire map or the whole map covered with the same image?

[HarelM]

An example with just one of the images you have (4096x4096) to see the issue, hopefully.
If a single image is not enough than two images. I want to narrow down the example to better understand the issue.

[PZeide]

I can't really because the image is protected by CORS and the thing that I use to crop/resize the image (x-oss-image-resize) is only available through this API. However I can't give you the code if you want. And you made me realized just now that only exactly 4 slices are rendered, so it can be a error on my side.

[PZeide]

After closer inspection, I've managed to find out that the x and y values passed in the protocol callback function are looping over and over again, so, it doesn't give any chance for the map to render every slice:

In this example: this is when I'm fully zoomed out, only x and y values between 0 to 3 are passed to the addProtocol callback so I'm returning the same tiles over and over... I don't know why can cause this and what to change in the configuration to tell maplibre the actual "size" of the map (if this is the correct terminology).