Use beta tag

Canvas optimizations

examples/mapbox-layer.html

@@ -7,8 +7,9 @@ docs: >
 tags: "simple, mapbox, vector, tiles"
 resources:
   - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.js
+  - https://unpkg.com/mapbox-gl@0.54.0/dist/mapbox-gl.css
 cloak:
   - key: ER67WIiPdCQvhgsUjoWK
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-layer.js

@@ -1,184 +1,12 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import Layer from '../src/ol/layer/Layer';
-import {assign} from '../src/ol/obj';
 import {toLonLat} from '../src/ol/proj';
-import SourceState from '../src/ol/source/State';
 import {Stroke, Style} from '../src/ol/style.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
 
-class Mapbox extends Layer {
-
-  /**
-   * @param {import('../src/ol/layer/Layer').Options} options Layer options.
-   */
-  constructor(options) {
-    const baseOptions = assign({}, options);
-    super(baseOptions);
-
-    this.baseOptions = baseOptions;
-
-    /**
-     * @private
-     * @type boolean
-     */
-    this.loaded = false;
-
-    this.initMap();
-  }
-
-  initMap() {
-    const map = this.map_;
-    const view = map.getView();
-    const center = toLonLat(view.getCenter(), view.getProjection());
-
-    this.centerLastRender = view.getCenter();
-    this.zoomLastRender = view.getZoom();
-    this.centerLastRender = view.getCenter();
-    this.zoomLastRender = view.getZoom();
-
-    const options = assign(this.baseOptions, {
-      attributionControl: false,
-      boxZoom: false,
-      center,
-      container: map.getTargetElement(),
-      doubleClickZoom: false,
-      dragPan: false,
-      dragRotate: false,
-      interactive: false,
-      keyboard: false,
-      pitchWithRotate: false,
-      scrollZoom: false,
-      touchZoomRotate: false,
-      zoom: view.getZoom() - 1
-    });
-
-    this.mbmap = new mapboxgl.Map(options);
-    this.mbmap.on('load', function() {
-      this.mbmap.getCanvas().remove();
-      this.loaded = true;
-      this.map_.render();
-      this.mbmap.getContainer().querySelector('.mapboxgl-control-container').remove();
-    }.bind(this));
-
-    this.mbmap.on('render', function() {
-      // Reset offset
-      if (this.centerNextRender) {
-        this.centerLastRender = this.centerNextRender;
-      }
-      if (this.zoomNextRender) {
-        this.zoomLastRender = this.zoomNextRender;
-      }
-      this.updateRenderedPosition(0, 0, 1);
-    }.bind(this));
-
-  }
-
-  /**
-   *
-   * @inheritDoc
-   */
-  render(frameState) {
-    const map = this.map_;
-    const view = map.getView();
-
-    this.centerNextRender = view.getCenter();
-    const lastRender = map.getPixelFromCoordinate(this.centerLastRender);
-    const nextRender = map.getPixelFromCoordinate(this.centerNextRender);
-    this.zoomNextRender = view.getZoom();
-    const scale = Math.pow(2, this.zoomNextRender - this.zoomLastRender);
-    this.updateRenderedPosition(lastRender[0] - nextRender[0], lastRender[1] - nextRender[1], scale);
-
-    const rotation = frameState.viewState.rotation;
-    if (rotation) {
-      this.mbmap.rotateTo(-rotation * 180 / Math.PI, {
-        animate: false
-      });
-    }
-
-    // Re-render mbmap
-    const center = toLonLat(this.centerNextRender, view.getProjection());
-    const zoom = view.getZoom() - 1;
-    this.mbmap.jumpTo({
-      center: center,
-      zoom: zoom
-    });
-    return this.mbmap.getCanvas();
-  }
-
-  updateRenderedPosition(left, top, scale) {
-    const style = this.mbmap.getCanvas().style;
-    style.left = Math.round(left) + 'px';
-    style.top = Math.round(top) + 'px';
-    style.transform = 'scale(' + scale + ')';
-  }
-
-  setVisible(visible) {
-    super.setVisible(visible);
-
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.display = visible ? 'block' : 'none';
-  }
-
-  setOpacity(opacity) {
-    super.setOpacity(opacity);
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.opacity = opacity;
-  }
-
-  setZIndex(zindex) {
-    super.setZIndex(zindex);
-    const canvas = this.mbmap.getCanvas();
-    canvas.style.zIndex = zindex;
-  }
-
-  /**
-   * @inheritDoc
-   */
-  getSourceState() {
-    return this.loaded ? SourceState.READY : SourceState.UNDEFINED;
-  }
-
-  setMap(map) {
-    this.map_ = map;
-  }
-
-}
-
-mapboxgl.Map.prototype._setupContainer = function _setupContainer() {
-  const container = this._container;
-  container.classList.add('mapboxgl-map');
-
-  const canvasContainer = this._canvasContainer = container.firstChild;
-
-  this._canvas = document.createElement('canvas');
-  canvasContainer.insertBefore(this._canvas, canvasContainer.firstChild);
-  this._canvas.style.position = 'absolute';
-  this._canvas.addEventListener('webglcontextlost', this._contextLost, false);
-  this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false);
-  this._canvas.setAttribute('tabindex', '0');
-  this._canvas.setAttribute('aria-label', 'Map');
-  this._canvas.className = 'mapboxgl-canvas';
-
-  const dimensions = this._containerDimensions();
-  this._resizeCanvas(dimensions[0], dimensions[1]);
-
-  this._controlContainer = canvasContainer;
-  const controlContainer = this._controlContainer = document.createElement('div');
-  controlContainer.className = 'mapboxgl-control-container';
-  container.appendChild(controlContainer);
-
-  const positions = this._controlPositions = {};
-  ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function(positionName) {
-    const elem = document.createElement('div');
-    elem.className = 'mapboxgl-ctrl-' + positionName;
-    controlContainer.appendChild(elem);
-    positions[positionName] = elem;
-  });
-};
-
 const style = new Style({
   stroke: new Stroke({
     color: '#319FD3',
@@ -206,11 +34,70 @@ const map = new Map({
   })
 });
 
+
+// init Mapbox object
+
+const view = map.getView();
+const center = toLonLat(view.getCenter(), view.getProjection());
 const key = 'ER67WIiPdCQvhgsUjoWK';
-const mbLayer = new Mapbox({
-  map: map,
-  container: map.getTarget(),
-  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key
+
+const mbMap = new mapboxgl.Map({
+  style: 'https://maps.tilehosting.com/styles/bright/style.json?key=' + key,
+  attributionControl: false,
+  boxZoom: false,
+  center: center,
+  container: map.getTargetElement(),
+  doubleClickZoom: false,
+  dragPan: false,
+  dragRotate: false,
+  interactive: false,
+  keyboard: false,
+  pitchWithRotate: false,
+  scrollZoom: false,
+  touchZoomRotate: false,
+  zoom: view.getZoom() - 1
+});
+
+
+// init OL layers
+
+const mbLayer = new Layer({
+  render: function(frameState) {
+    const canvas = mbMap.getCanvas();
+    const view = map.getView();
+
+    const visible = mbLayer.getVisible();
+    canvas.style.display = visible ? 'block' : 'none';
+
+    const opacity = mbLayer.getOpacity();
+    canvas.style.opacity = opacity;
+
+    // adjust view parameters in mapbox
+    const rotation = frameState.viewState.rotation;
+    if (rotation) {
+      mbMap.rotateTo(-rotation * 180 / Math.PI, {
+        animate: false
+      });
+    }
+    const center = toLonLat(view.getCenter(), view.getProjection());
+    const zoom = view.getZoom() - 1;
+    mbMap.jumpTo({
+      center: center,
+      zoom: zoom,
+      animate: false
+    });
+
+    // cancel the scheduled update & trigger synchronous redraw
+    // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
+    // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
+    if (mbMap._frame) {
+      mbMap._frame.cancel();
+      mbMap._frame = null;
+    }
+    mbMap._render();
+
+    return canvas;
+  }
 });
 
 map.addLayer(mbLayer);

examples/mapbox-vector-tiles-advanced.html

@@ -9,6 +9,6 @@ resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/mapbox-vector-tiles.html

@@ -9,6 +9,6 @@ resources:
   - resources/mapbox-streets-v6-style.js
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>

examples/sea-level.html

@@ -11,7 +11,7 @@ docs: >
 tags: "raster, pixel operation, flood"
 cloak:
   - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <label>

examples/utfgrid.html

@@ -8,7 +8,7 @@ docs: >
 tags: "utfgrid, tilejson"
 cloak:
   - key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
-    value: Your Mapbox access token from http://mapbox.com/ here
+    value: Your Mapbox access token from https://mapbox.com/ here
 ---
 <div id="map" class="map"></div>
 <div style="display: none;">

examples/zoomify.html

@@ -11,5 +11,6 @@ tags: "zoomify, deep zoom, IIP, pixel, projection"
   <select id="zoomifyProtocol">
     <option value="zoomify">Zoomify</option>
     <option value="iip">IIP</option>
+    <option value="zoomifyretina">Zoomify Retina</option>
   </select>
 </div>

examples/zoomify.js

@@ -12,6 +12,8 @@ const iipUrl = 'http://vips.vtech.fr/cgi-bin/iipsrv.fcgi?FIF=' + '/mnt/MD1/AD00/
 
 const layer = new TileLayer({
   source: new Zoomify({
+    tileSize: 256,
+    tilePixelRatio: 1,
     url: zoomifyUrl,
     size: [imgWidth, imgHeight],
     crossOrigin: 'anonymous'
@@ -20,12 +22,15 @@ const layer = new TileLayer({
 
 const extent = [0, -imgHeight, imgWidth, 0];
 
+const resolutions = layer.getSource().getTileGrid().getResolutions();
+
 const map = new Map({
   layers: [layer],
   target: 'map',
   view: new View({
     // adjust zoom levels to those provided by the source
-    resolutions: layer.getSource().getTileGrid().getResolutions(),
+    minResolution: resolutions[resolutions.length - 1],
+    maxResolution: resolutions[0],
     // constrain the center: center cannot be set outside this extent
     extent: extent
   })
@@ -36,17 +41,73 @@ const control = document.getElementById('zoomifyProtocol');
 control.addEventListener('change', function(event) {
   const value = event.currentTarget.value;
   if (value === 'iip') {
-    layer.setSource(new Zoomify({
-      url: iipUrl,
-      size: [imgWidth, imgHeight],
-      crossOrigin: 'anonymous'
-    }));
+    const extent = [0, -imgHeight, imgWidth, 0];
+    layer.setSource(
+      new Zoomify({
+        tileSize: 256,
+        tilePixelRatio: 1,
+        url: iipUrl,
+        size: [imgWidth, imgHeight],
+        crossOrigin: 'anonymous'
+      })
+    );
+    const resolutions = layer.getSource().getTileGrid().getResolutions();
+    map.setView(
+      new View({
+        // adjust zoom levels to those provided by the source
+        minResolution: resolutions[resolutions.length - 1],
+        maxResolution: resolutions[0],
+        // constrain the center: center cannot be set outside this extent
+        extent: extent
+      })
+    );
+    map.getView().fit(extent);
   } else if (value === 'zoomify') {
-    layer.setSource(new Zoomify({
-      url: zoomifyUrl,
-      size: [imgWidth, imgHeight],
-      crossOrigin: 'anonymous'
-    }));
+    const extent = [0, -imgHeight, imgWidth, 0];
+    layer.setSource(
+      new Zoomify({
+        tileSize: 256,
+        tilePixelRatio: 1,
+        url: zoomifyUrl,
+        size: [imgWidth, imgHeight],
+        crossOrigin: 'anonymous'
+      })
+    );
+    const resolutions = layer.getSource().getTileGrid().getResolutions();
+    map.setView(
+      new View({
+        // adjust zoom levels to those provided by the source
+        minResolution: resolutions[resolutions.length - 1],
+        maxResolution: resolutions[0],
+        // constrain the center: center cannot be set outside this extent
+        extent: extent
+      })
+    );
+    map.getView().fit(extent);
+  } else if (value === 'zoomifyretina') {
+    const pixelRatio = 4;
+    // Be careful! Image extent will be modified by pixel ratio
+    const extent = [0, -imgHeight / pixelRatio, imgWidth / pixelRatio, 0];
+    layer.setSource(
+      new Zoomify({
+        tileSize: 256 / pixelRatio,
+        tilePixelRatio: pixelRatio,
+        url: zoomifyUrl,
+        size: [imgWidth / pixelRatio, imgHeight / pixelRatio],
+        crossOrigin: 'anonymous'
+      })
+    );
+    const resolutions = layer.getSource().getTileGrid().getResolutions();
+    map.setView(
+      new View({
+        // adjust zoom levels to those provided by the source
+        minResolution: resolutions[resolutions.length - 1] / pixelRatio,
+        maxResolution: resolutions[0],
+        // constrain the center: center cannot be set outside this extent
+        extent: extent
+      })
+    );
+    map.getView().fit(extent);
   }
 
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "6.0.0-beta.7",
+  "version": "6.0.0-beta.8",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",
@@ -68,7 +68,7 @@
     "istanbul": "0.4.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jquery": "3.4.1",
-    "jsdoc": "3.6.1",
+    "jsdoc": "3.6.2",
     "jsdoc-plugin-typescript": "^2.0.0",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "2.2.0",
@@ -81,11 +81,11 @@
     "loglevelnext": "^3.0.1",
     "marked": "0.6.2",
     "mocha": "6.1.4",
-    "ol-mapbox-style": "^4.3.1",
+    "ol-mapbox-style": "^5.0.0-beta.1",
     "pixelmatch": "^4.0.2",
     "pngjs": "^3.4.0",
     "proj4": "2.5.0",
-    "puppeteer": "~1.15.0",
+    "puppeteer": "~1.16.0",
     "serve-static": "^1.14.0",
     "shx": "^0.3.2",
     "sinon": "^7.3.2",

src/ol/format/IIIFInfo.js

@@ -97,9 +97,10 @@ import {assert} from '../asserts.js';
  */
 
 /**
-* @enum {string}
-*/
-export const Versions = {
+ * Enum representing the major IIIF Image API versions
+ * @enum {string}
+ */
+const Versions = {
   VERSION1: 'version1',
   VERSION2: 'version2',
   VERSION3: 'version3'
@@ -275,7 +276,7 @@ versionFunctions[Versions.VERSION3] = generateVersion3Options;
 class IIIFInfo {
 
   /**
-   * @param {ImageInformationResponse1_0|ImageInformationResponse1_1|ImageInformationResponse2|ImageInformationResponse3|string} imageInfo
+   * @param {string|ImageInformationResponse1_0|ImageInformationResponse1_1|ImageInformationResponse2|ImageInformationResponse3} imageInfo
    * Deserialized image information JSON response object or JSON response as string
    */
   constructor(imageInfo) {
@@ -283,8 +284,9 @@ class IIIFInfo {
   }
 
   /**
-   * @param {Object|string} imageInfo Deserialized image information JSON response
-   * object or JSON response as string
+   * @param {string|ImageInformationResponse1_0|ImageInformationResponse1_1|ImageInformationResponse2|ImageInformationResponse3} imageInfo
+   * Deserialized image information JSON response object or JSON response as string
+   * @api
    */
   setImageInfo(imageInfo) {
     if (typeof imageInfo == 'string') {
@@ -296,6 +298,7 @@ class IIIFInfo {
 
   /**
    * @returns {Versions} Major IIIF version.
+   * @api
    */
   getImageApiVersion() {
     if (this.imageInfo === undefined) {
@@ -394,6 +397,7 @@ class IIIFInfo {
   /**
    * @param {PreferredOptions} opt_preferredOptions Optional options for preferred format and quality.
    * @returns {import("../source/IIIF.js").Options} IIIF tile source ready constructor options.
+   * @api
    */
   getTileSourceOptions(opt_preferredOptions) {
     const options = opt_preferredOptions || {},
@@ -424,3 +428,4 @@ class IIIFInfo {
 }
 
 export default IIIFInfo;
+export {Versions};

src/ol/layer/Layer.js

@@ -10,6 +10,10 @@ import {assign} from '../obj.js';
 import RenderEventType from '../render/EventType.js';
 import SourceState from '../source/State.js';
 
+/**
+ * @typedef {function(import("../PluggableMap.js").FrameState):HTMLElement} RenderFunction
+ */
+
 
 /**
  * @typedef {Object} Options
@@ -29,6 +33,8 @@ import SourceState from '../source/State.js';
  * the source can be set by calling {@link module:ol/layer/Layer#setSource layer.setSource(source)} after
  * construction.
  * @property {import("../PluggableMap.js").default} [map] Map.
+ * @property {RenderFunction} [render] Render function. Takes the frame state as input and is expected to return an
+ * HTML element. Will overwrite the default rendering for the layer.
  */
 
 
@@ -47,8 +53,10 @@ import SourceState from '../source/State.js';
 
 /**
  * @classdesc
- * Abstract base class; normally only used for creating subclasses and not
- * instantiated in apps.
+ * Base class from which all layer types are derived. This should only be instantiated
+ * in the case where a custom layer is be added to the map with a custom `render` function.
+ * Such a function can be specified in the `options` object, and is expected to return an HTML element.
+ *
  * A visual representation of raster or vector map data.
  * Layers group together those properties that pertain to how the data is to be
  * displayed, irrespective of the source of that data.
@@ -64,6 +72,7 @@ import SourceState from '../source/State.js';
  * @fires import("../render/Event.js").RenderEvent#postrender
  *
  * @template {import("../source/Source.js").default} SourceType
+ * @api
  */
 class Layer extends BaseLayer {
   /**
@@ -100,6 +109,11 @@ class Layer extends BaseLayer {
      */
     this.renderer_ = null;
 
+    // Overwrite default render method with a custom one
+    if (options.render) {
+      this.render = options.render;
+    }
+
     if (options.map) {
       this.setMap(options.map);
     }

src/ol/renderer/Composite.js

@@ -85,7 +85,8 @@ class CompositeMapRenderer extends MapRenderer {
     this.children_.length = 0;
     for (let i = 0, ii = layerStatesArray.length; i < ii; ++i) {
       const layerState = layerStatesArray[i];
-      if (!visibleAtResolution(layerState, viewResolution) || layerState.sourceState != SourceState.READY) {
+      if (!visibleAtResolution(layerState, viewResolution) ||
+        (layerState.sourceState != SourceState.READY && layerState.sourceState != SourceState.UNDEFINED)) {
         continue;
       }
 

src/ol/renderer/canvas/VectorImageLayer.js

@@ -1,5 +1,5 @@
 /**
- * @module ol/renderer/canvas/ImageLayer
+ * @module ol/renderer/canvas/VectorImageLayer
  */
 import ImageCanvas from '../../ImageCanvas.js';
 import ViewHint from '../../ViewHint.js';

src/ol/renderer/canvas/VectorLayer.js

@@ -191,7 +191,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
     } else {
       const resolution = frameState.viewState.resolution;
       const rotation = frameState.viewState.rotation;
-      const layer = this.getLayer();
+      const layer = /** @type {import("../../layer/Vector").default} */ (this.getLayer());
       /** @type {!Object<string, boolean>} */
       const features = {};
       const result = this.replayGroup_.forEachFeatureAtCoordinate(coordinate, resolution, rotation, hitTolerance, {},
@@ -205,7 +205,7 @@ class CanvasVectorLayerRenderer extends CanvasLayerRenderer {
             features[key] = true;
             return callback(feature, layer);
           }
-        }, declutteredFeatures);
+        }, layer.getDeclutter() ? declutteredFeatures : null);
       return result;
     }
   }

src/ol/renderer/canvas/VectorTileLayer.js

@@ -357,7 +357,7 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
               features[key] = true;
               return callback(feature, layer);
             }
-          }, declutteredFeatures);
+          }, layer.getDeclutter() ? declutteredFeatures : null);
       }
     }
     return found;
@@ -619,17 +619,19 @@ class CanvasVectorTileLayerRenderer extends CanvasTileLayerRenderer {
     const size = source.getTilePixelSize(z, pixelRatio, projection);
     context.canvas.width = size[0];
     context.canvas.height = size[1];
-    const canvasTransform = resetTransform(this.tmpTransform_);
     const renderScale = pixelRatio / renderPixelRatio;
-    scaleTransform(canvasTransform, renderScale, renderScale);
-    context.setTransform.apply(context, canvasTransform);
+    if (renderScale !== 1) {
+      const canvasTransform = resetTransform(this.tmpTransform_);
+      scaleTransform(canvasTransform, renderScale, renderScale);
+      context.setTransform.apply(context, canvasTransform);
+    }
     const tileExtent = tileGrid.getTileCoordExtent(tileCoord, this.tmpExtent);
+    const pixelScale = renderPixelRatio / resolution;
+    const transform = resetTransform(this.tmpTransform_);
+    scaleTransform(transform, pixelScale, -pixelScale);
+    translateTransform(transform, -tileExtent[0], -tileExtent[3]);
     for (let i = 0, ii = executorGroups.length; i < ii; ++i) {
       const executorGroup = executorGroups[i];
-      const pixelScale = renderPixelRatio / resolution;
-      const transform = resetTransform(this.tmpTransform_);
-      scaleTransform(transform, pixelScale, -pixelScale);
-      translateTransform(transform, -tileExtent[0], -tileExtent[3]);
       executorGroup.execute(context, transform, 0, {}, true, IMAGE_REPLAYS[layer.getRenderMode()]);
     }
     replayState.renderedTileResolution = tile.wantedResolution;

src/ol/source/IIIF.js

@@ -56,6 +56,11 @@ function formatPercentage(percentage) {
  */
 class IIIF extends TileImage {
 
+  /**
+   * @param {Options} opt_options Tile source options. Use {@link import("../format/IIIFInfo.js").IIIFInfo}
+   * to parse Image API service information responses into constructor options.
+   * @api
+   */
   constructor(opt_options) {
 
     const options = opt_options || {};

src/ol/source/TileJSON.js

@@ -4,7 +4,7 @@
 // FIXME check order of async callbacks
 
 /**
- * See http://mapbox.com/developers/api/.
+ * See https://mapbox.com/developers/api/.
  */
 
 

src/ol/source/Zoomify.js

@@ -26,6 +26,7 @@ const TierSizeCalculation = {
 export class CustomTile extends ImageTile {
 
   /**
+   * @param {number} tilePixelRatio Tile pixel ratio to display the tile
    * @param {import("../tilegrid/TileGrid.js").default} tileGrid TileGrid that the tile belongs to.
    * @param {import("../tilecoord.js").TileCoord} tileCoord Tile coordinate.
    * @param {TileState} state State.
@@ -34,8 +35,7 @@ export class CustomTile extends ImageTile {
    * @param {import("../Tile.js").LoadFunction} tileLoadFunction Tile load function.
    * @param {import("../Tile.js").Options=} opt_options Tile options.
    */
-  constructor(tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
-
+  constructor(tilePixelRatio, tileGrid, tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options) {
     super(tileCoord, state, src, crossOrigin, tileLoadFunction, opt_options);
 
     /**
@@ -48,8 +48,11 @@ export class CustomTile extends ImageTile {
      * @private
      * @type {import("../size.js").Size}
      */
-    this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0]));
-
+    this.tileSize_ = toSize(tileGrid.getTileSize(tileCoord[0])).map(
+      function(x) {
+        return x * tilePixelRatio;
+      }
+    );
   }
 
   /**
@@ -143,6 +146,7 @@ class Zoomify extends TileImage {
     const extent = options.extent || [0, -size[1], size[0], 0];
     const tierSizeInTiles = [];
     const tileSize = options.tileSize || DEFAULT_TILE_SIZE;
+    const tilePixelRatio = options.tilePixelRatio || 1;
     let tileSizeForTierSizeCalculation = tileSize;
 
     switch (tierSizeCalculation) {
@@ -242,14 +246,14 @@ class Zoomify extends TileImage {
 
     const tileUrlFunction = createFromTileUrlFunctions(urls.map(createFromTemplate));
 
-    const ZoomifyTileClass = CustomTile.bind(null, tileGrid);
+    const ZoomifyTileClass = CustomTile.bind(null, tilePixelRatio, tileGrid);
 
     super({
       attributions: options.attributions,
       cacheSize: options.cacheSize,
       crossOrigin: options.crossOrigin,
       projection: options.projection,
-      tilePixelRatio: options.tilePixelRatio,
+      tilePixelRatio: tilePixelRatio,
       reprojectionErrorThreshold: options.reprojectionErrorThreshold,
       tileClass: ZoomifyTileClass,
       tileGrid: tileGrid,

tasks/publish.sh

@@ -76,7 +76,7 @@ main() {
   npm install
   npm run build-package
   cd ${BUILT_PACKAGE}
-  npm publish
+  npm publish --tag beta
 }
 
 if test ${#} -ne 1; then

test/spec/ol/layer/layer.test.js

@@ -94,6 +94,16 @@ describe('ol.layer.Layer', function() {
       layer.dispose();
     });
 
+    it('accepts a custom render function', function() {
+      let called = false;
+      const layer = new Layer({
+        render: function() {
+          called = true;
+        }
+      });
+      layer.render();
+      expect(called).to.eql(true);
+    });
   });
 
   describe('visibleAtResolution', function() {