Support for Offline Tilelayer i.e. MbTiles

[ns-1m]

I am using Leaflet with QuickConnect (ioS), Xcode and JQTouch and trying to implement vector layers render using Spatialite thru leaflet vector polylines function.

However, I hope leaflet can support MbTiles (Mapbox tiles) soon for offline maps.

Details on openlayers and MbTiles off here. http://stackoverflow.com/questions/5569474/what-to-do-with-mbutil-export-for-tilemill-and-mapbox

Snippet of implementation in Openlayers MbTiles,

e.g. mydirectory is local directory in Xcode

The URL of a tile is http://localhost/1.0.0/mydirectory/0/0/0.png, you'd have

var layer = new OpenLayers.Layer.TMS( "MapBox Layer", [ "http://localhost/" ], { 'layername': 'mydirectory', 'type': 'png' } );

Thanks.

[mourner]

Hmm, what's the difference of such support with a regular Leaflet tile layer with a corresponding url template, e.g. var layer = new L.TileLayer("http://localhost/1.0.0/mydirectory/{z}/{x}/{y}.png", {maxZoom: 18}); ?

[ns-1m]

Thanks for the quick reply.

What is the "regular" Leaflet tile layer file? Any specs for regular Leaflet tile layer file?

How can we can one? Any utilities to make a "regular" Leaflet tile layer for OSM or Mapnik for offline mapping?

BTW, this is the MapBox spec. https://github.com/mapbox/mbtiles-spec

[ns-1m]

The difference of such support is, you can go offline. You can make tile maps and place it your iOS device and Android. Then, you can use it for navigation in no internet connection places e.g. Amazon, Outback Australia, Sahara desert, etc.

[mourner]

See L.TileLayer docs here: http://leaflet.cloudmade.com/reference.html#tilelayer

By "regular" I mean a tile layer with regular image tiles that conform to a particular URL structure that contains zoom and tile x/y in it. The vast majority of tile services are done this way, because it's very simple.

So, did you try the code I wrote in the comment above?

[ns-1m]

Thanks for the clarification.

No, I have not tried the code that you mentioned above. I am still figure out how to get the Leaflet working in jQTouch, QuickConnect, Xcode in iPad simulator. jQTouch with Leaflet works in firefox, but not in iPad Simulator with Xcode.

So, we can use GDAL2Tiles to generate the Tile maps then. http://www.klokan.cz/projects/gdal2tiles/

[mourner]

Looking at the code in your first post, it seems that OpenLayers doesn't do anything special to support MbTiles, it connects to it as to a simple TMS server which is similar to what I describe above, and the "localhost" in the URL means than it requires some sort of server running on the device. So Leaflet should work as well as OpenLayers without any extra support. Or alternatively you can generate tile cache on the file system with a tool like GDAL2Tiles, yes.

No idea why Leaflet doesn't work in iPad Simulator with Xcode & QuickConnect unfortunately, let me know if you find out something... I tested on the iPad itself.

[ns-1m]

I think I have given the wrong link about the MapBox Tile layer (mbtiles) that uses sqlite.

Here's the right link and right javascript project that uses mbtiles. As you can see this is a new project. I think the node.js server.

mbtiles renderer and storage backend for tilelive.

https://github.com/mapbox/node-mbtiles

Thanks. I think it would be good to have this in Leaflet client - offline mapping without a server just like leafet vector layer rendering.

[mourner]

I'll take a look, thanks.

[coomsie]

i've got leaflet to work from tiles on the disk ... both ipad and iphone, happy share if you still having probs.

[ns-1m]

Is it MbTiles (i.e. MapBox Tiles) or just TMS and ZXY tiles?

On 8/16/11, coomsie reply@reply.github.com wrote:

i've got leaflet to work from tiles on the disk ... both ipad and iphone, happy share if you still having probs.

Reply to this email directly or view it on GitHub: https://github.com/CloudMade/Leaflet/issues/68#issuecomment-1812178

[coomsie]

It's just tms and xyz, though have had a look at mbtiles (SQL lite) stuff,

Should be able to write an handler to provide the data from the DB, thinking of giving it a crack, might try with titanium... Using the example of maptouchlite ...

Are you working on this?

[ns-1m]

I am using now OpenLayers since I need more features e.g. lon/lat, WKT from Sqlite / Spatialite. I am using QuickConnect for iOS.

If you want to have a crack on mbtiles, probably QuickConnect for iOS, Android, etc. would probably best since it has hydrid (obj -C and Javascript) for Sqlite3 / Spatialite already. It is also open source and free ( http://sourceforge.net/projects/quickconnect/ )

On 8/16/11, coomsie reply@reply.github.com wrote:

It's just tms and xyz, though have had a look at mbtiles (SQL lite) stuff,

Should be able to write an handler to provide the data from the DB, thinking of giving it a crack, might try with titanium... Using the example of maptouchlite ...

Are you working on this?

Reply to this email directly or view it on GitHub: https://github.com/CloudMade/Leaflet/issues/68#issuecomment-1812615

[mourner]

@ns-1m I'll be implementing WKT support in Leaflet eventually. What do you mean by "lon/lat"? Are there any other features you miss?

[coomsie]

btw, i've created an extended class off tilelayer for web db based support ... at the moment it is in the maptouchlite format ...

i'll submit when its ready, but someone might need to sort out some of my js as it might nt be up to par ..

[ns-1m]

BTW, What is maptouchlite format? Any documentation on this format? URL link?

On 8/22/11, coomsie reply@reply.github.com wrote:

btw, i've created an extended class off tilelayer for web db based support ... at the moment it is in the maptouchlite format ...

i'll submit when its ready, but someone might need to sort out some of my js as it might nt be up to par ..

Reply to this email directly or view it on GitHub: https://github.com/CloudMade/Leaflet/issues/68#issuecomment-1867737

[coomsie]

http://wiki.openstreetmap.org/wiki/TouchMapLight

look here ..

and db structure currently like this ...

CREATE TABLE ini (key TEXT, value TEXT); CREATE TABLE locations (id INT, lon FLOAT, lat FLOAT, timestamp REAL, title TEXT); CREATE TABLE tiles (provider TEXT, x INT, y INT, z INT, timestamp REAL, data BLOB);

[leplatrem]

I will probably be working on this matter. I found this, which looks like a good starting point : http://dev.openlayers.org/sandbox/jennier/openlayers/examples/local-storage-wms-simple.html

[coomsie]

Hi Leplatrem,

have a look here for an early hack i did to prove it works ... within the leaflet framework ... though not probably done correctly by extending the layer class. ...

https://github.com/coomsie/Leaflet/blob/c17d0d171efd91dc18be4082941f98e840c4b0bf/src/layer/tile/TileLayer.DB.js

[coomsie]

b.t.w

I got it working really well on iphones with titanium or phone gap frameworks ... it rocks on this device ...

see here for example ...

https://github.com/coomsie/topomap.co.nz/blob/master/Resources/leaflet/TileLayer.DB.js

[kinhunt]

coomsie, great job. I am also trying to build an html 5 based offline app for ios using leaflet and mbtiles. cloud you provide more details on how to use your code with mbtiles?

[coomsie]

the other database has a tile structure of a table with the fields ... provider, x, y, z, timestamp, data

the data column as the base64 encoded tile within it,

hence this portion ..

tx.executeSql("SELECT data FROM tiles WHERE x = ? AND y = ? AND z = ?", [tileObject.x, tileObject.y, tileObject.z], function(tx, result) {

within the field the image is stored like this ,.,

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAA

where I believe the mbtiles are stored in a slightly different arrangement with a combination of 2 tables to get the resulting data from them ...

plus the base64 is stored within the data:image/png;base64,

and starts from the encoding first i think ...

i.e.

"iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAA ..

Does this help?

[ns-1m]

the other database has a tile structure of a table with the fields ... provider, x, y, z, timestamp, data

How do you create this database (i.e. .db)?

Any tools you use to create this tilelayer db?

Any instruction how to create this tilelayer db from OSM data?

[coomsie]

There is good extension for Mozilla that I used. I'm at work, but later when home can send u an empty one.

Cheers Iain

Sent from my iPhone 4

On 1/12/2011, at 12:28 PM, Noli Sicadreply@reply.github.com wrote:

the other database has a tile structure of a table with the fields ... provider, x, y, z, timestamp, data

How do you create this database (i.e. .db)? Any tools you use to create this tilelayer db?

---

Reply to this email directly or view it on GitHub: https://github.com/CloudMade/Leaflet/issues/68#issuecomment-2968447

[kinhunt]

I not sure if it is a good idea putting several megabytes of geo data in a single javascript file. maybe a better way to work with mbtiles is using a sqlite handler as coomsie said.

[leplatrem]

As far as I understood, we cannot open an existing sqlite file (mbtiles) in JS. We can create an empty db though.

I am still exploring, but here is what I've got so far :

• a Leaflet layer that reads tiles from SQLstorage (rewrote of coomsie class using inheritance) https://gist.github.com/1415767
• a server side tiles serialization in base64 (using django and landez), served in JSON in order to fill the local storage without requiring the user to view the tiles to be cached : https://gist.github.com/1415795

Hope you find it useful. Not ready for pull requesting anyway.

[kinhunt]

Thanks leplatrem. Your solution sounds promising. Is the JS script working?

[coomsie]

nice work leplatrem,

I will try this tonight in my test rig with some tiles of christchurch ,nz (my home town).

I like the idea of using json as the mechanism to load additional tiles via the internet.

Not sure how large a file iOS or Nadroid can handle to process though ...

just note the iOS has a limit of 50 mb on the webkit db ....

though it's not physically a problem to have it bigger than that ..

I've created a module for titianium to copy a pre-loaded sqlite file over on a method when the app start for the first time.

It's again a hack .. to test the theory and it works ... got a 250MB db with tiles of Christchurch to run sweetly under it ..

I'll load it up into github if interested?

[kinhunt]

coomsie, it's cool. +1 please.

[leplatrem]

Thanks for your feedback ! @coomsie, I could be interested in your Titanium module, very cool if you can share ! Thanks !

@kinhunt, yes it's working, but you have to understand each line of it before you can use it, since it is not packaged yet.

[coomsie]

Sure,

i'm just playing around with your new lib .. great job ...

On Fri, Dec 2, 2011 at 10:47 PM, Mathieu Leplatre < reply@reply.github.com

wrote:

Thanks for your feedback ! Coomsie, I could be interested in your Titanium module, very cool if you can share ! Thanks !

@kinhunt, yes it's working, but you have to understand each line of it before you can use it, since it is not packaged yet.

---

Reply to this email directly or view it on GitHub: https://github.com/CloudMade/Leaflet/issues/68#issuecomment-2988170

Cheers Coomsie

[ns-1m]

Coomsie, I like to see your Titanium module as well.

However, I will be interested if we can use this thing in QuickConnect Hybrid instead of Titanium since QuickConnect Hybrid is free.

http://tetontech.wordpress.com/

On 12/2/11, Mathieu Leplatre reply@reply.github.com wrote:

Thanks for your feedback ! Coomsie, I could be interested in your Titanium module, very cool if you can share ! Thanks !

@kinhunt, yes it's working, but you have to understand each line of it before you can use it, since it is not packaged yet.

---

Reply to this email directly or view it on GitHub: https://github.com/CloudMade/Leaflet/issues/68#issuecomment-2988170

[kinhunt]

to leplatrem: thank you. I am studying your code. New to leaflet, need some time to understand.

[coomsie]

i've got it working ... will sync my project up soon ....

this is what you need to get it sorted ...

note: have taken out this from tile lib

/*

• Store tiles from a JSON obtained by server

*/

.....etc

then in html page type this ..

Githubissues.

Githubissues is a development platform for aggregating issues.