End goal is to be able to access a pouchdb of map tiles on phone off-line that has been synced from remote couchdb of map tiles. This will all be wrapped in Cordova.

  • Using ol3, I currently can pull the tiles from couchdb
  • Couchdb is synced with local pouchdb

Here is my working code for couchdb:

var bc_orm_trails_couchdbLayerXYZ = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: "{z}-{x}-{y}/tile"

Using PouchDB-3.0.6, how do I request the tiles for the layer in ol3?


Using tileUrlFunction to provide url to ol.source.XYZ:

var bc_orm_trails_pouchdbLayerXYZ = new ol.layer.Tile({
    source: new ol.source.XYZ({
        tileUrlFunction: (function (tileCoord, projection) {
            var deferred = new $.Deferred();
            //var docId = "NWoriginMercator-" + tileCoord.z + "-" + tileCoord.y + "-" + tileCoord.x;
            var docId = ["NWoriginMercator", tileCoord.z, tileCoord.y, tileCoord.x].join('-');
            db.getAttachment(docId, 'tile.png', function(err, response) {
                if (err && err.error == 'not_found') {
                } else {
                    var blob = response;
                    var imgURL = URL.createObjectURL(blob);
            return deferred;

Error is:

GET http://localhost:8081/xxxxxxxxxx.cordova.app/www/[object%20Object] 404 (Not Found)
  • Revised code and included new error msg. Any input or questions appreciated. – user2898616 Oct 21 '14 at 2:13

Angus from OL3-dev group helped me on this. See: https://groups.google.com/forum/#!topic/ol3-dev/gd2OXsrKBTk

Here is the adapted code that finally worked.

var bc_orm_trails_pouchdbLayerXYZ = new ol.layer.Tile({
    extent: BC,
    source: new ol.source.XYZ({
        //adapted from: http://jsfiddle.net/gussy/LCNWC/
        tileLoadFunction: function (imageTile, src) {
            pouchTilesDB.getAttachment(src, 'tile', function (err, res) {
                if (err && err.error == 'not_found') return;
                if(!res) return;
                    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 = ["NWoriginMercator", z, x, y].join('-');
            return imgURL;

Note: final issue I missed to make it work was: "attachment: true" for inline attachments when syncing to remote couchdb.

function pouchTilesDBSync() {
var opts = {
    //live: true,
    batch_size: 100,
    attachments: true
pouchTilesDB.replicate.from(remoteCouchdb, opts, syncError);
//var syncDom = document.getElementById('sync-wrapper');
//syncDom.setAttribute('data-sync-state', 'syncing');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.