Leaflet with offline maps?

6,940 views
Skip to first unread message

PeteA

unread,
Oct 9, 2012, 4:45:21 AM10/9/12
to leafl...@googlegroups.com
Hi,
is it possible to use leaflet with offline maps?

PeteA

MathieuB

unread,
Oct 9, 2012, 8:14:14 AM10/9/12
to leafl...@googlegroups.com
Yeah totally, just change the path used for the tiles, to the local path.

Ex .: 
Default =
// add a CloudMade tile layer with style #997 L.tileLayer('http://{s}.tile.cloudmade.com/[API-key]/997/256/{z}/{x}/{y}.png', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' }).addTo(map);

Offline =
L.tileLayer('file://path_to_your_tiles/{z}_{x}_{y}.png', { attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' }).addTo(map);

Just make sure your tiles are named on the same pattern (ex.: 6_17_15.png). You can change the pattern to.

Chris

unread,
Oct 9, 2012, 10:45:37 AM10/9/12
to leafl...@googlegroups.com
You can store map tiles locally using a directory structure to match the server one and point your tileLayer at the local location of the tiles. One thing to bear in mind though, some providers of map tiles will get upset if you scrape their tiles en-masse to then store locally. They will get especially upset if you write an app that encourages lots of people who use the app to do this. Such an app is likely to quickly get blocked. See http://wiki.openstreetmap.org/wiki/Tile_usage_policy for example. You can always render your own tiles to hold locally.

Suma Subbarao

unread,
Nov 27, 2013, 11:15:03 AM11/27/13
to leafl...@googlegroups.com
Has anyone had success using this approach within an Android app? An android app launching leaflet with Webkit? It works connecting to the net, but not with the offline tiles:

//this works, but is online:
/*
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
*/
// None of the approaches to reference the downloaded png tiles work...I have tried adding the tiles to assets directory in my app and also directly onto the device's internal storage.
//L.tileLayer('filesystem:http://127.0.0.1/Tiles/Mapnik/{z}/{x}/{y}.png', {
L.tileLayer('map/Mapnik/{z}/{x}/{y}.png', {
maxZoom: 10
}).addTo(map);

Anybody had success with this?
Thanks.

jav...@gmail.com

unread,
Nov 29, 2013, 8:40:38 PM11/29/13
to leafl...@googlegroups.com
You can't use http://127.0.0.1/, unless your device has a webserver running. Just use a relative or absolute path without the http prefix.

Suma Subbarao

unread,
Dec 4, 2013, 4:02:27 PM12/4/13
to leafl...@googlegroups.com
Thanks. This below worked for me:

L.tileLayer('file:///android_asset/map/Mapnik/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

stefanus eko

unread,
Mar 3, 2014, 1:46:04 AM3/3/14
to leafl...@googlegroups.com
Hi i am try what you try, but in my case, it's not work .. in console display an error "Not allowed to load local resource: file://map/12/3266/2119.png"  ..
why this is happening to me?? 

aston...@gmail.com

unread,
Mar 3, 2014, 4:12:55 AM3/3/14
to leafl...@googlegroups.com
Just quickly looking, there are three forward slashes (///) in Suma Subbarao's file: statement, and only two in yours...

Armenuhi Mkrtchyan

unread,
Oct 30, 2015, 9:34:27 AM10/30/15
to Leaflet
    Hi. But how can get path for my tiles folder ? It is actually the folder which contains JS file in which add this code ?  
L.tileLayer('http://{s}.tile.cloudmade.com/[API-key]/997/256/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
}).addTo(map);?
Reply all
Reply to author
Forward
0 new messages