Zoomify

Example of a Zoomify source.

Zoomify is a format for deep-zooming into high resolution images. This example shows how to use the Zoomify source with a pixel projection. Internet Imaging Protocol (IIP) with JTL extension is also handled.

<!DOCTYPE html>
<html>
  <head>
    <title>Zoomify</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <div class="controls">
      <select id="zoomifyProtocol">
        <option value="zoomify">Zoomify</option>
        <option value="iip">IIP</option>
      </select>
    </div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import TileLayer from 'ol/layer/Tile.js';
      import Zoomify from 'ol/source/Zoomify.js';

      var imgWidth = 9911;
      var imgHeight = 6100;

      var zoomifyUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?zoomify=' +
          '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF/';
      var iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/plan_CHU-4HD-01/FOND.TIF' + '&JTL={z},{tileIndex}';

      var layer = new TileLayer({
        source: new Zoomify({
          url: zoomifyUrl,
          size: [imgWidth, imgHeight],
          crossOrigin: 'anonymous'
        })
      });

      var extent = [0, -imgHeight, imgWidth, 0];

      var map = new Map({
        layers: [layer],
        target: 'map',
        view: new View({
          // adjust zoom levels to those provided by the source
          resolutions: layer.getSource().getTileGrid().getResolutions(),
          // constrain the center: center cannot be set outside this extent
          extent: extent
        })
      });
      map.getView().fit(extent);

      var control = document.getElementById('zoomifyProtocol');
      control.addEventListener('change', function(event) {
        var value = event.currentTarget.value;
        if (value === 'iip') {
          layer.setSource(new Zoomify({
            url: iipUrl,
            size: [imgWidth, imgHeight],
            crossOrigin: 'anonymous'
          }));
        } else if (value === 'zoomify') {
          layer.setSource(new Zoomify({
            url: zoomifyUrl,
            size: [imgWidth, imgHeight],
            crossOrigin: 'anonymous'
          }));
        }

      });
    </script>
  </body>
</html>