Raster Map for leaflet

Question

i'm developping an app using leaflet. I need to have some map datas offline on my device.

To do that i have tried to download some tiles of openstreetmap.

I'm wondering if there is a simple way to create Raster images of my zones, and how i can add them on leaflet.

Thanks.

Answer 1

Depending on you requirements, it might be a lot of data (the whole OpenStreetmap tileset would consume 54TB disk space).

Leaflet.TileLayer.PouchDBCached/ might be a solution for you, this question has some notes on a different implementation.

Answer 2

You can always refer to loading and displaying a single image over specific bounds of the map, georeference specific image using example code

Example 1:

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

Full resource can be find here: http://leafletjs.com/reference.html#imageoverlay

Example 2:

Or something little more robust from this great and detailed step by step tutorial:

http://build-failed.blogspot.hr/2012/11/zoomable-image-with-leaflet.html

Hope it helps