Url tiles

[tubadan33]

I've been looking around and I can't seem to find an answer to the question of custom tile layers. Also called 'UrlTiles' in some libraries. This is a good example here for the react-native-maps package. Is there anyway to do this with this package? I've looked around at the Deck.gl package as well, but can't seem to get it to work. I wouldn't expect to have to use a 3rd party package for this functionality anyway. Any help?

[usefulthink]

Tile-based layers can be added using the mapTypes registry and ImageMapType class.

Something along these lines:

const TILE_URL = 'https://example.com/sample/{z}_{x}_{y}.jpg';

const TileLayer = () => {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
  
    const mapType = new google.maps.ImageMapType({
      name: 'my-map-type',
      getTileUrl(coord, zoom) {
        return TILE_URL
          .replace('{x}', coord.x)
          .replace('{y}', coord.y)
          .replace('{z}', zoom);
      },
      tileSize: new google.maps.Size(256, 256),
      minZoom: 1,
      maxZoom: 20
    });
  
    map.mapTypes.set('my-map-type', mapType);
  }, [map]);
  
  return <></>;
};