O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time For action – applying Zoomify sample knowledge to a single raw image

There are some quite important differences to make an equivalent map version of the Zoomify sample. Let's see how:

  1. Copy the sample from the Zoomify example previously created into the usual sandbox directory.
  2. Change the URL to /assets/data/1797-map-of-Dublin.jpg.
  3. Set the imgCenter variable to [imgWidth / 2, imgHeight / 2];.
  4. Remove the line code, var crossOrigin = 'anonymous';.
  5. Replace the ol.layer.Tile with ol.layer.Image.
  6. Then, change the source variable with the following code:
    var source = new ol.source.ImageStatic({ attributions: [ new ol.Attribution({ html: '&copy; <a href="https://commons.wikimedia.org/wiki/File:1797-map-of-Dublin.jpg#Summary">Wikipedia Commons</a>' }) ], ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required