Adding MBtiles to leaflet?

[ckostas...@gmail.com]

Hello, I'm working on building an offline map using map box tiles in a Phonegap project. I've gone through the process of extracting the tiles and loading the database, but I can't get the plugin to load the image.
I followed the process outlined here(http://geospatialscott.blogspot.gr/2012/04/phonegap-leaflet-tilemill-offline.html), but it's quite old, and the overrides don't seem to work anymore.

L.TileLayer.MBTiles = L.TileLayer.extend({
    //db: SQLitePlugin
    mbTilesDB: null,

    initialize: function(url, options, db) {
        this.mbTilesDB = db;

        L.Util.setOptions(this, options);
    },
    getTileUrl: function (tilePoint) {
        var z = tilePoint.z;
        var x = tilePoint.x;
        var y = tilePoint.y;
        var base64Prefix = 'data:image/gif;base64,';

        this.mbTilesDB.executeSql("SELECT tile_data FROM tiles WHERE zoom_level = ? AND tile_column = ? AND tile_row = ?", [z, x, y], function (res) {
            tile.src = base64Prefix + res.rows[0].tile_data;
        }, function (er) {
            console.log('error with executeSql', er);
        });
    }
});

Has anyone got this to work? Any pointers?

[Brendan Stone]

You could try Bryan McBride's PHP solution here:

https://github.com/bmcbride/PHP-MBTiles-Server

[ckostas...@gmail.com]

Thank you for your reply.

I ended up using this plugin for phonegap: https://github.com/ffournier/cordova-plugin-mbtiles . Since it's a "native" solution, it should work fine for me.

In case anyone else attempts a pure HTML5/JS solution, I'd take a look at the TileLayer.MBTilesPlugin.js file in this repository: https://github.com/ffournier/cordova-plugin-mbtiles/blob/master/sample/www/js/TileLayer.MBTilesPlugin.js
Just substitute this line:

this.mbTilesPlugin.getTile({z: z, x: x, y: y}

with your own SQL query (like in the code I posted above). Also, either erase or modify the initialize function.
One more thing, make sure your .mbtiles database contains the necessary metadata. If it doesn't, make sure not to call the related function(s).

[da...@zkm.de]

I had the same problem with the sources from 2012.

This worked for me:

L.TileLayer.MBTiles = L.TileLayer.extend({

mbTilesDB: null,

initialize: function(url, options, db) {

this.mbTilesDB = db;

L.Util.setOptions(this, options);

},

_loadTile: function (tile, tilePoint) {

tile._layer  = this;

tile.onload  = this._tileOnLoad;

tile.onerror = this._tileOnError;

this._adjustTilePoint(tilePoint);

var z = this._getZoomForUrl();

var x = tilePoint.x;

var y = tilePoint.y;

var base64Prefix = 'data:image/gif;base64,';

this.mbTilesDB.transaction(function(tx) {

tx.executeSql("select * from tiles where zoom_level = ? and tile_column = ? and tile_row = ?;", [z, x, y], function (tx, res) {

tile.src = base64Prefix + res.rows.item(0).tile_data;

this.fire('tileloadstart', {

tile: tile,

url: tile.src

});

}, function (e) {

console.log('error with executeSql: ', e.message);

});

});

},

});

And when initializing the tileLayer (minZoom and maxZoom depend on the mbTiles material):

    var mbTileLayer = new L.TileLayer.MBTiles('', {

        minZoom : 17,

        maxZoom : 19,

        tms : true

    }, db);

Best

[Sascha Picard]

Thank you very much ;)