[Solved] Leaflet offline map graphical glitch with offline tiles

[digeridoopoo]

Hi,

After much fiddling and months of reading, I've come to the conclusion that Leaflet maps with Mapbox map layers is a great solution for an offline map (Mapbox has some of the best looking maps I have seen). It's not so bad to implement once you find a way of grabbing all the tiles from somewhere (or extracting the files from the .mbtiles archive, like I did).

Anyway, I was wondering if anyone had any idea why, in my Leaflet tab of my Sencha Touch app, where I have a remote URL like this:

 var cloudmade = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png', {
            maxZoom: 8
        });

The map displays perfectly:


...but when I reference it locally I get this:



It seems like the tiles are there, but they are messed up. Any ideas why this might be happenening?

:-)

[digeridoopoo]

Solved! Those nice guys over at Mapbox support replied with this:

'mbutil exports tiles in TMS scheme, not XYZ. You can specify scheme: 'tms' in Leaflet to fix the error you're seeing'

This is great, I can finally use Leaflet correctly with beautiful maps offline!

;-)

[ShaneTex]

Do you by change have a full example of this working, I am trying to do the same thing.

[digeridoopoo]

I don't have access to my machine right now, but I used the leaflet extension from here:

https://github.com/fredleefarr/Ext.ux.Leaflet

If your not sure how to install plugins read here:

http://stackoverflow.com/questions/10389127/use-and-load-extensions-plugins-for-sencha-touch-2

Try putting that in a tabpanel.....then use the URL like this:

var cloudmade = new L.TileLayer('http://{s}.tiles.mapbox.com/v3/mapbox.blue-marble-topo-bathy-jul/{z}/{x}/{y}.png', {  maxZoom: 8, scheme: 'TMS'        }); 

...I think that is the correct place to put 'scheme' but I don't have my machine to check.

To get the map tiles you will have to download .mbtile files and unarchive them using the mbutil command line (was a bit of a pain to setup to be honest, but stick with it and try a test small .mbtile file first as a test)

:-)

[clifficious]

Hi digeridoopoo,

I'm looking for a offline solutions for maps, as I'm on programming a mobile application for a region with limited network availability. Now, I've seen, that you already dug quite deep into this topic. Before reinventing the wheel I thought I could ask you for some instructions as I did not find any concrete step by step guide or similar for this things.

As far as I understood, I already got Leaflet working with SenchaTouch2. Found it on a link you supported for github. Am I right, that I need to get some .mbtiles files from mapbox now in order to extract them? Or is there any other options to get the tiles to my local storage?
After downloading them, all I have to do is to reference it locally when creating a layer, right? The only thing to be aware of is the scheme thingy?

In the end I want to have the complete region available offline in 3 or 4 zoom levels.

I would appreciate every help!

Thanks a lot in advance!

Kind regards!
Cliff

[ShaneTex]

Awesome, thank you for the information.

[clifficious]

Just as an information. I skipped the part with mapbox and tilemill. Found a solution with JTileDownloader. It's an Java application and you can specify a bounding box, zoomlevels and a renderer. The program will then download the tiles for you. Super easy.
All you have to do then is specify the local URL in your layer for the map. ==> done.

EDIT: Didn't get it running on a Mac, so I had to use a Windows machine for downloading the tiles.

[digeridoopoo]

Hey,

You've pretty much got the steps correct...if you google search 'tiles mapbox' and click one of those links from google it will take you to a page. If you click share you can see the direct links which you can copy and paste into the safari download manager. Then you can use the mbutil to unarchive (or if I remember correctly, you can just google search .mbtiles and something should come up)

Cheers

[clifficious]

thanks for the hint.

I was already successful using the jTileDownloader to get the desired tiles. And offline maps work perfect. The only issue is that the amount of data is huge! Specially zoom level 17 and 18.

The other option would be to render the map on the mobile device. But I guess there is no proper solution for this, right? I heard of some app for iOS (I think it was offmaps?). In version 2 the developer tried to go this way. But the costumers are complaining about the speed of the app. Are there any hints in this direction?

Thanks!