Retaining custom properties on a TileLayer and BitMap to enable redrawing

Hi there,

I’m working on kind-of a custom TileLayer with BitMap layer setup.

In my approach I’m retrieving an array of integer values which I’m then converting into an image in the browser using a particular colour ramp (Edit: perhaps similar to this issue which I found after posting this).

What I’d like to be able to do is reuse my original array of data to regenerate my image based on a new colour ramp without having to redownload the tiles. From example switching from the viridis colour ramp to using a a magma colour ramp. The first hurdle I’ve got is that I don’t seem to be able to hold onto my original array.

new TileLayer({
  data: 'http://tiles:3000/{z}/{x}/{y}.pbf',
  tileSize: 256,

  getTileData: async function (tile) {
    const someBuffer = await makeRequest("GET", tile.url);

    tile._rawData = someBuffer <--- I want to save the original array

    const out = new ImageData(256, 256);
    for (let i = 0; i < this.data.length / 4; i++) {
      if (someBuffer.values[i] !== 999) {
        const rgba = d3.interpolateViridis(someBuffer.values[i])
        out.data[i * 4] = rgba[0];
        out.data[(i * 4) + 1] = rgba[1];
        out.data[(i * 4) + 2] = rgba[2];
        out.data[(i * 4) + 3] = 255;
      }
    };
    return out
  },

  renderSubLayers: props => {
    const {
    bbox: {west, south, east, north}
    } = props.tile;

    return new BitmapLayer(props, {
      data: null,
      image: props.tile.data,
      bounds: [west, south, east, north]
    });
}

I’m new to deckgl so just poking around the edges at the moment so this may not be the best way to go around this things so I’m open to suggestions, but hopefully you can make sense of the request 😃

Thanks, Rowan

[Pessimistress]

I do not recommend accessing the layer instance via this in getTileData - this may break in the future if we change the TileLayer implementation.

You can simply return the raw data in getTileData:

new TileLayer({
  data: 'http://tiles:3000/{z}/{x}/{y}.pbf',
  
  // Changing a TileLayer prop will re-evaluate `renderSubLayers` for each tile
  colorScheme: d3.interpolateViridis,

  getTileData: tile => makeRequest("GET", tile.url),

  renderSubLayers: props => {
    const {
	  data,
      bbox: {west, south, east, north}
    } = props.tile;

	// Convert buffer to image
    const image = new ImageData(256, 256);
    for (let i = 0; i < data.length / 4; i++) {
      if (data.values[i] !== 999) {
        const rgba = props.colorScheme(data.values[i])
        image.data[i * 4] = rgba[0];
        image.data[(i * 4) + 1] = rgba[1];
        image.data[(i * 4) + 2] = rgba[2];
        image.data[(i * 4) + 3] = 255;
      }
    };

    return new BitmapLayer(props, {
      data: null,
      image,
      bounds: [west, south, east, north]
    });
}

renderSubLayers is only called once for each tile until some TileLayer props change. If you want to introduce other props and avoid recreating the ImageData, wrap the buffer to image conversion in a memoized function.

[rowanwins]

So just jotting a final note on this - I’m fairly happy with where I’ve handed.

Ignore the dodgy gif quality - was just trying to keep under the github limits 😃

One thing I did notice was that when I changed by props, such as my color ramp, the more I’d browsed around previously the slower the re-rendering would take. From what I could tell it looked like the renderSubLayers method was being called for every tile that had been visited previously, irrespective of whether that tile was currently visible or not, I’m not sure if this is expected behaviour or not… So I’ve hacked around it by doing

this.deck.layerManager.layers = []