tilelayer data from private GitHub repo using authorization token

[cornhundred]

Hi, would it be possible to have TileLayer's getTileData retrieve data from a private GitHub repo by passing an Authorization token? I got the moon image example working on ObservableHQ (link), but I would like to read the JPEG pyramid images from a private repo using something like this (below I'm loading a JSON from a private repo by passing the token using ObservableHQ's secrets).

private_data = axios({
      method: 'get',
      url: 'https://api.github.com/repos/cornhundred/private-repo/contents/example.json',
      headers: {
        'Authorization': 'token ' + Secret("secret-token"),
        'Accept': 'application/vnd.github.v3.raw',
      }
    })
    .then(function (response) {
      return response.data
    });

Would I be able to pass in the token using the existing loader or would I need to make a custom loader?

[Pessimistress]

fetch data with credentials

If you need per-tile handling or post processing of the data, you can also provide your own getTileData prop.

[kylebarron]

You should be able to pass fetch options to the loadOptions prop, like

loadOptions: {fetch: {headers}}

[cornhundred]

Thanks for the quick help @Pessimistress and @kylebarron. I'll try that out and update here.

[cornhundred]

I tried adding loadOptions to the TileLayet, but I am getting a 404 error on the GET request (from the console). Am I setting the loadOptions correctly?

  const moonLayer = new deck.TileLayer({
      pickable: autoHighlight,
      tileSize: dimensions.tileSize,
      autoHighlight,
      highlightColor: [60, 60, 60, 100],
      minZoom: -7,
      maxZoom: 0,
      coordinateSystem: deck.COORDINATE_SYSTEM.CARTESIAN,
      extent: [0, 0, dimensions.width, dimensions.height],,
      getTileData: ({x, y, z}) => {
        return loaders.load(`${ROOT_URL}/moon.image_files/${15 + z}/${x}_${y}.jpeg`);
      },
      onViewportLoad: getMetaData,
      renderSubLayers: renderSubLayers,
      loadOptions: {
        fetch: {
          method: 'GET',
          headers: {
            'Authorization': 'token ' + Secret("secret-token"),
            'Accept': 'application/vnd.github.v3.raw',
          }
        }
      }
    
    });   

[cornhundred]

@Pessimistress, can I access the loaders that is bundled with deck.gl from the deck.gl object, like I do with the ScatterplotLayer: deck.ScatterplotLayer?

The loaders version bundled with the latest deck.gl release

[Pessimistress]

The deck.gl bundle adds a global object loaders.

[cornhundred]

Ok, I'm unsure how to access this on ObservableHQ. This notebook, which used to require loaders at the very bottom cell, but now tries to use the globally defined loaders from deck.gl is not working. This notebook with the loaders requirement at the bottom is working.

[Pessimistress]

If you import deck like this:

deck = require.alias({
  // optional dependencies
  h3: {}
})('deck.gl@latest/dist.min.js')

In another cell you can do

loaders = deck && window.loaders

[cornhundred]

Thanks @Pessimistress that works :D