GeoJS - Multiple Frame Large Image

Step 1

Active

Inactive

Step 2

Active

Inactive

const imageServer = 'https://demo.kitware.com/histomicstk/api/v1';
const imageId = '60e6135c25f89bfa9369f2c9';

let map, layerA, layerB, tileinfo, baseUrl, nextframe, updating;

const framectl = document.getElementById('frame');

// fetch information about our image.  It contains the image size, tile
// size, and a list of frames
let promise = fetch(
  `${imageServer}/item/${imageId}/tiles`
).then(response => response.json()).then(response => {
  // we store several values in variables in the upper scope so that the
  // setFrame function can access them.
  tileinfo = response;
  // get appropriate parameters to make a map and layers in pixel space
  let params = geo.util.pixelCoordinateParams(
    '#map', tileinfo.sizeX, tileinfo.sizeY, tileinfo.tileWidth, tileinfo.tileHeight);
  map = geo.map(params.map);
  // our server can send different tiles by changing the frame parameter
  baseUrl = `${imageServer}/item/${imageId}/tiles/zxy/{z}/{x}/{y}?frame=`;
  // don't auto share the renderer.  We don't want a blink when we swap
  // which layer is on top.
  params.layer.autoshareRenderer = false;
  // create a background layer for loading new frames; start it with white
  // tiles
  params.layer.url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAACklEQVQI12P4DwABAQEAG7buVgAAAABJRU5ErkJggg==';
  layerB = map.createLayer('osm', params.layer);
  // create a foreground layer for the current frame
  params.layer.url = `${baseUrl}0`;
  // have the layers share a fetch queue.  Since both tile layers are from
  // the same server, this prevents requests from getting backlogged.
  params.layer.queue = layerB.queue;
  layerA = map.createLayer('osm', params.layer);
  layerA._frame = 0;
  // adjust the frame slider and listen to changes
  framectl.setAttribute('max', tileinfo.frames.length - 1);
  framectl.addEventListener('input', (event) => {
    setFrame(event.target.value);
  });
  framectl.setAttribute('title', `1 of ${tileinfo.frames.length}`);
  // if we wanted to run more code after everything is loaded, we could
  // add something like
  //   promise.then(map => map.onIdle(() => { <more code> }));
  // in the next tutorial block
  return map;
});

Step 3

Active

Inactive

const imageServer = 'https://demo.kitware.com/histomicstk/api/v1';
const imageId = '60e6135c25f89bfa9369f2c9';

let map, layer, tileinfo, baseUrl;

const framectl = document.getElementById('frame');

// fetch information about our image.  It contains the image size, tile
// size, and a list of frames
let promise = fetch(
  `${imageServer}/item/${imageId}/tiles`
).then(response => response.json()).then(response => {
  // we store several values in variables in the upper scope so that the
  // setFrame function can access them.
  tileinfo = response;
  // get appropriate parameters to make a map and layers in pixel space
  let params = geo.util.pixelCoordinateParams(
    '#map', tileinfo.sizeX, tileinfo.sizeY, tileinfo.tileWidth, tileinfo.tileHeight);
  map = geo.map(params.map);
  // our server can send different tiles by changing the frame parameter
  baseUrl = `${imageServer}/item/${imageId}/tiles/zxy/{z}/{x}/{y}?frame=`;
  params.layer.url = `${baseUrl}0`;
  layer = map.createLayer('osm', params.layer);
  // adjust the frame slider and listen to changes
  framectl.setAttribute('max', tileinfo.frames.length - 1);
  framectl.addEventListener('input', (event) => {
    setFrame(event.target.value);
  });
  framectl.setAttribute('title', `1 of ${tileinfo.frames.length}`);
  return map;
});

Step 3-B

Active

Inactive

Tutorial - Multiple Frame Large Image