OL3 V3.1.1 to V3.8.2 broke ol.source.xyz from PouchDB

Question

I recently updated my Cordova mobile mapping app from OL3 V3.1.1 to V3.7.0 to V3.8.2.

Am using PouchDB to store off-line tiles, and with V3.1.1 tiles were visible. Here is the code snippet:

    OSM_bc_offline_pouchdb = new ol.layer.Tile({
        //maxResolution: 5000,
        //extent: BC,
        //projection: spherical_mercator,
        //crossOrigin: 'anonymous',
        source: new ol.source.XYZ({
            //adapted from: http://jsfiddle.net/gussy/LCNWC/
            tileLoadFunction: function (imageTile, src) {
                pouchTilesDB_osm_bc_baselayer.getAttachment(src, 'tile', function (err, res) {
                    if (err && err.error == 'not_found')
                        return;
                    //if(!res) return;  // ?issue -> causes map refresh on movement to stop 
                    imageTile.getImage().src = window.URL.createObjectURL(res);
                });
            },
            tileUrlFunction: function (coordinate, projection) {
                if (coordinate == null)
                    return undefined;
                // OSM NW origin style URL
                var z = coordinate[0];
                var x = coordinate[1];
                var y = coordinate[2];
                var imgURL = ["tile", z, x, y].join('_');
                return imgURL;
            }
        })
    });
    trails_mobileMap.addLayer(OSM_bc_offline_pouchdb);
    OSM_bc_offline_pouchdb.setVisible(true);

Moving to both V3.7.0 and V3.8.2 causes the tiles to not display. Read the API and I'm missing why this would happen.

What in my code needs updating to work with OL-V3.8.2?

Thanks, Peter

Answer 1

Your issue might be related to the changes to ol.TileCoord in OpenLayers 3.7.0 . From the release notes:

Until now, the API exposed two different types of ol.TileCoord tile coordinates: internal ones that increase left to right and upward, and transformed ones that may increase downward, as defined by a transform function on the tile grid. With this change, the API now only exposes tile coordinates that increase left to right and upward.

Previously, tile grids created by OpenLayers either had their origin at the top-left or at the bottom-left corner of the extent. To make it easier for application developers to transform tile coordinates to the common XYZ tiling scheme, all tile grids that OpenLayers creates internally have their origin now at the top-left corner of the extent.

This change affects applications that configure a custom tileUrlFunction for an ol.source.Tile. Previously, the tileUrlFunction was called with rather unpredictable tile coordinates, depending on whether a tile coordinate transform took place before calling the tileUrlFunction. Now it is always called with OpenLayers tile coordinates. To transform these into the common XYZ tiling scheme, a custom tileUrlFunction has to change the y value (tile row) of the ol.TileCoord:

function tileUrlFunction = function(tileCoord, pixelRatio, projection){
  var urlTemplate = '{z}/{x}/{y}';
  return urlTemplate
      .replace('{z}', tileCoord[0].toString())
      .replace('{x}', tileCoord[1].toString())
      .replace('{y}', (-tileCoord[2] - 1).toString());
}

If this is your issue, try changing your tileUrlFunction to

function (coordinate, projection) {
    if (coordinate == null)
        return undefined;
    // OSM NW origin style URL
    var z = coordinate[0];
    var x = coordinate[1];
    var y = (-coordinate[2] - 1);
    var imgURL = ["tile", z, x, y].join('_');
    return imgURL;
}