Can't use custom MapTiler map with Pigeon Map

[alicerocheman]

So far I love Pigeon Maps.

But I've been trying to integrate a custom MapTiler map with Pigeon Maps, and it doesn't work.

After contacting MapTiler support, they confirmed it worked with other map libraries, but said that "Pigeon map's MapTiler() function as shown in their documentation seems to use a @2x parameter that's not supported by our API. Furthermore, it's based solely on raster tiles, whereas we advise you to use vector tiles (they're lighter) with MapLibre or ReactMapGl if React is imperative."

I tried removing the "@2x" param in the provider function, but it had no effect.

import { Map } from 'pigeon-maps';
const mapTilerProvider: (x: number, y: number, z: number, dpr?: number) => string = (x, y, z) => {
  return `${url}/${z}/${x}/${y}.png?key=${token}`;
};
[...]
<Map
  provider={mapTilerProvider}
  center={mapCenter}
  zoom={mapZoom}
  limitBounds="edge"
  metaWheelZoom
  onBoundsChanged={handleBoundsChange}
>
[...]
</Map>

This is a blocking issue for our product :(

[adedaniel]

Hi! I'm having this issue too. Is there any solution to this?

[lorenzosani]

Had the same issue, spent way too much time figuring something out. What I realised:

1. You need to be on the paid MapTiler plan to use custom raster tiles
2. You can use the @2x to increase the resolution, just stick "@2x" after the {y} parameter
3. MapTiler has a free map which looks much better than the ones on PigeonMap's docs. It's called "bright" and can be retrieved at: https://api.maptiler.com/maps/bright/256/{z}/{x}/{y}@2x.png?key={key}

[MrRainesE]

Hi! I'm having this issue too. Is there any solution to this without having a paid MapTiler plan?
I have an own maptiler function that returns the tiles based on the z, x, y as png but it still won't render this image