Rendering overlapping MBTiles files: How to combine tiles that cover the same coordinates?

[BenOnTrack]

Background

I have multiple MBTiles files that contain vector tile data for the same geographic areas but with different/complementary data. For example:

• region_A.mbtiles covers part of tile z/x/y with basemap data
• region_B.mbtiles covers the remaining part of the same z/x/y tile with additional basemap data

Currently, my tile server (web worker) only returns data from whichever MBTiles file it finds first, meaning I'm missing data from the other files.

You can clearly see here that the yellow tile (from region_A.mbtiles, which stops at its own region boundary, and has empty data for everything up north) is overlapping ("eating") the red tile (from region_B.mbtiles)

Current Implementation

I'm using a custom protocol handler that queries MBTiles files via SQLite in a web worker:

// Simplified current logic
const dbEntry = sourceDbs.find((entry) => {
  // Find first database that contains this tile
  return tileCoordinatesIntersectBounds(z, x, y, entry.bounds)
})

// Return tile data from first matching database only
return getTileData(dbEntry, z, x, y)

Desired Outcome

I want to combine/merge the vector tile data from multiple MBTiles files when they contain overlapping tiles at the same z/x/y coordinates, so that all features from all sources are rendered.

Questions

1. Is it possible to merge vector tiles at the binary level? (e.g., concatenating ArrayBuffers)
2. Should this be handled at the tile server level or MapLibre level?
3. Are there existing patterns/solutions for this use case?
4. Would MapLibre handle multiple tile sources for the same layer automatically if configured differently?

What I've Considered

• Binary concatenation: Simply concatenating the ArrayBuffers from multiple tiles
• Protobuf parsing: Parsing vector tiles, merging at feature level, and re-encoding
• Multiple sources: Using separate MapLibre sources/layers (but this affects styling/rendering)
• Tile prioritization: Selecting the "best" tile instead of merging (loses data)
• Merging beforehand A and B to generate C: In that case, I lose control on A and B and cannot easily update those region (or even delete a region to save storage)

Any guidance on the recommended approach would be greatly appreciated!

[HarelM]

You can do it on the server side as you pointed out, and also at the client side.
I don't know the internals of MVT format, but I don't think you can simply concat the binary data, but you should be able to test it relatively easily.
I think you have the right answers in general.

[BenOnTrack]

Thanks for the feedback. I've managed to do the following

I start with a list of Uint8Array[] tiles (in case multiple tiles share the same x/y/z box), which I parse according to the MVT 2.1 specification (thank you Claude and GPT for the support).

Since all layers across these tiles are identical (to avoid style duplication), I merge the features layer by layer, combining them one by one.

After merging, I insert the results into a new VectorTile and finally output a single Uint8Array.

And the result is

[HarelM]

If you can share the code here for future readers it would be amazing, thanks!

[BenOnTrack]

Here is the code: https://github.com/BenOnTrack/mergeTiles/blob/master/mergeTiles.ts