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 <></>;
};

[tubadan33]

Thank you, I was able to get this working.

[usefulthink]

Would you mind sharing your implementation so we can maybe build an example from it?

[tubadan33]

Not at all, its fairly simple. I'm using Remix, so the file should be suffixed with .client eg. 'UrlTileLayer.client.tsx' (or equivalent for other framework, 'use-client' for nextjs I think, and I think svelte kit would just need to not use .server files or something its been a minute for svelte-kit haha).

That looks like this:

const UrlTileLayer = () => {
  const map = useMap();
  useEffect(() => {
    if (!map) return;

    const mapType = new google.maps.ImageMapType({
      name: 'fishing-map',
      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: 5,
      maxZoom: 20,
      opacity: 0.8,
    });

    map.mapTypes.set('fishing-map', mapType);
    map.overlayMapTypes.setAt(1, mapType);
  }, [map]);

  return <></>;
};

I had to add the 'map.overlayMapTypes.setAt()' line to make the url layer appear. I tried other values for the tile size, as the tiles from my map server should be rendered at 512 then scaled to 1024, but no other value other than the 256 worked. Performance is ok, and should work for my use case.

Then you just use the layer as a child in the map component. (The map file also needs the .client suffix, or equivalent)

      <Map
        className={'h-full w-full'}
        defaultCenter={{lat: 38.7, lng: -105.33}}
        defaultZoom={9}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
        mapTypeId={'hybrid'}
      >
        <UrlTileLayer />
      </Map>

Thanks again for your help. Let me know if I can be of more help!