Use leaflet offline

[Roberto Nuñez]

This project is awsome, i need load the tile layer from local files to use the maps offline.. it this possible... thank for any answer...

[Chris Hill]

On Friday, February 22, 2013 5:35:06 PM UTC, Roberto Nuñez wrote:

This project is awsome, i need load the tile layer from local files to use the maps offline.. it this possible... thank for any answer...

If you need to create the tiles you can create your own tiles, especially for a modest area by using rendering tools. You can find more at http://switch2osm.org I download data from Geofabrik and render using TileMill. There is a TileMill schema on GitHub which creates the standard OSM tiles as a starting point.

People have been tempted to scrape tiles from the OSM and other servers to store offline and this causes problems, especially in phone apps.

If you already have tiles you want to load you need to store them in a suitable local folder hierarchy on a web server and point to that with leaflet. The structure, and more info, can be found in the OSM wiki http://wiki.openstreetmap.org/wiki/Tilename
 

[Ricardo Freitas]

I've installed osm in a server and all my files are rendered "locally". In this case not quite as I need an internet connection but it is a matter of switching servers.

--
 
---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Roberto Nuñez]

Thanks for the answer  I will study this options..thanks again

[Kolam Training Center Admin]

Hi, it is very easy to set local tiles, but the most important is to generate it properly using the appropriate projection !

HERE you see some of our demos using leaflet and our set of local tiles (baselayers).

Go, Leaflet... Go :)

[Paulo Vieira]

On Fri, Feb 22, 2013 at 5:35 PM, Roberto Nuñez <harry...@gmail.com> wrote:

This project is awsome, i need load the tile layer from local files to use the maps offline.. it this possible... thank for any answer...

It is possible. You simply pass a local URL, or even a relative path to the directory of the tiles. For instance:

L.tileLayer('./mytiles/{z}/{x}/{y}.png').addTo(map);

To generate the tiles, I thinking the easiest solution nowadays is the excellent Tilemill from Mapbox.

[Miguel Morillo Iruela]

I'm very interested in this functionality, but I havent tryed yet, I'm trying to implement a solution with offline maps with .mbtiles database like:

http://geospatialscott.blogspot.com.es/2012/04/phonegap-leaflet-tilemill-offline.html

Any help it would be appreciated :)

[Roberto Nuñez]

I had to stop a few days with this project but I'm here again ...
thanks for the answers ... when i gonna have results i will tell ...
here a link that can be usefull

http://tech-blog.silviaterra.com/2013/02/offline-mapping-in-html5-mobile-apps.html

[Roberto Nuñez]

On 26 feb, 03:38, Miguel Morillo Iruela <miguel.mori...@gmail.com>
wrote:

> I'm very interested in this functionality, but I havent tryed yet, I'm
> trying to implement a solution with offline maps with .mbtiles database
> like:
>

> http://geospatialscott.blogspot.com.es/2012/04/phonegap-leaflet-tilem...

>
> Any help it would be appreciated :)
>
> El lunes, 25 de febrero de 2013 16:15:11 UTC+1, Paulo Vieira escribió:
>
>
>
>
>
>
>
>
>

> > On Fri, Feb 22, 2013 at 5:35 PM, Roberto Nuñez <harry...@gmail.com<javascript:>

[Miguel Morillo Iruela]

I have it, at first time I used the example of Scott (https://github.com/stdavis/OfflineMbTiles) modifying the query:

getTileUrl: function (tilePoint, zoom, tile) {
var z = this._getOffsetZoom (zoom);
var x = tilePoint.x;
var y = tilePoint.y;
base64Prefix var = 'data: image / png; base64,';

basedatos.transaction (queryDB, errorCB);

  queryDB function (tx) {
       tx.executeSql ('SELECT lower (quote (tile_data)) FROM INNER JOIN images ON map = map.tile_id WHERE images.tile_id zoom_level =? AND tile_column =? AND tile_row =?',   [z, x, y], querySuccess, errorCB);
}
   querySuccess function (tx, results) {
                 if (! results.rowsAffected) {
                     console.log ('No rows affected!');
                     / / return false;
                 }
                 console.log ('data ************>' + results.tile_data);
                 / / + results.rows.item base64Prefix tile.src = (0). tile_data;
                 / / tile.src base64Prefix + = results;
                 tile.src = results;
             }

     errorCB function (err) {
         console.log ("Error processing SQL:" + err.code);
     }
},
_loadTile: function (tile, tilePoint, zoom) {
tile._layer = this;
tile.onload = this._tileOnLoad;
tile.onerror = this._tileOnError;
this.getTileUrl (tilePoint, zoom, tile);
}

But I received the next error:

android.database.sqlite.SQLiteException: unknown error: Unable to convert BLOB to string

Sounds like you are missing the base64 encoding, but I could not get it.


But I found the following code which I worked!

https://gist.github.com/adube/5041097

[Lam Phan Trong]

Hello, I created a file "index.html" and in this folder, i created a folder contains tiles:
Titles
    0
        0
              0.png
    1
        0
              0.png
    2
        0
              0.png
This is the code of index.html:
<html>
<head>
    <link rel="stylesheet"
          href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 1000px; height: 1000px"></div>
 
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

    <script>
        var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('tiles/{z}/{x}/{y}.jpg', {
            minZoom: 0,
            maxZoom: 2,
            tms: true
        }).addTo(map);
    </script>
</body>
</html>

But it doesn't display map. Can you help me! Thanks!