How to create a custom tile layer (BaseTileLayer) using 512x512 tiles?

RyanSutcliffe

In an ArcGIS JavaScript API project I am working on, we have a source dataset from an API that supports 512x512 as well as 256x256 tiling schemes. I'm keen to test if the 512x512 scheme improves performance on large and high resolution devices but cannot figure out how to set it up with the ArcGIS JavaScript API's BaseTileLayer.

I've got the 256x256 version working in an approach akin to the ESRI example here for a custom BaseTileLayer in an ArcGIS API map. 

- There is no mention of tiling scheme support or limitations on the BaseTileLayer API page, but looking at the API page of the TileLayer, there seems to be support for 512x512 tiling schemes, so I assume this extends to the BaseTileLayer as well.

- I see that there is a TileInfo property on the BaseTileLayer which has a size property, although its not 100% clear to me how this can be set.

What I Tried

I've tried using the 512x512 source dataset in my layer. It draws but with artifacts that suggest something is wrong with the tiling. I've then tried modifying the tileInfo property on the baseTileLayer after the layer is created like so:

const CustomTileLayer = baseTileLayer.createSubClass({
...
})

let myCustomLayer = new CustomTileLayer({
...
});

myCustomLayer.tileInfo.size = 512;

This will cause errors and nothing to draw. On a serverside rendered layer, the esriRequest within the fetchTile method will fail with 'unable to load [url]'. On a clientside rendered layer, the fail will happen when I try to read the data from the fetched ArrayBuffer stream of data:

const response = await esriRequest(url, {
	method: "GET",
	referrer: "origin",
	signal: options && options.signal,
	headers: {
	  Accept: "*/*",
	},
	responseType: "array-buffer",
  });

  const buffer = response.data;
  // buffer.bytelength = 0?
  
  //consuming buffer fails.

Can anyone spot what I am doing wrong or missing? What is the trick to configure a baseTileLayer with a custom 512x512 tiling scheme correctly?

Unfortunately the source dataset I am consuming is not public so I can't share any codePen examples of what I've tried or what I'm doing with 256x256 default approach? 

UndralBatsukh

Hi there, 

You cannot directly set the TileInfo.size as you are doing. It needs to be set in the custom layer constructor as shown below: 

 

const TintLayer = BaseTileLayer.createSubclass({
  constructor() {
    this.tileInfo = TileInfo.create({
      size: 512,
      spatialReference: { wkid: 102100 }
    });
  },
...

 

Please take a look at this codepen for how it is done. 

Here a link to the TileInfo.create() method.