Leaflet with offline static map

[amir lamdan]

I wish to use leaflet for an offline app on a relatively small area, using a static map based on a map.png downloaded from open street map.
so I am looking for a solution to use  instead of 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png
and the source for the image will be localhost/map.png (example)

can it be done?
thanks

[ad...@mapgears.com]

Hi,

  You could use the mbtiles sqlite format to do so. Scott Davis explains how he did it in this great post:

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

  See also Samuel Greear's reply in this article.  He proposes a TileContentProvider as an alternative way to do so.

  If you use PhoneGap, you might also be interested in the pgsqlite plugins: https://github.com/pgsqlite.  In order to use this plugin, you have to let the application download and place the database itself, as Scott Davis did.  If you want to upload it to your device manually, you won't be able to do so in the application databases folder you might be interested in checkint the TileContentProvider.

HTH,

Alexandre

[Bryan McBride]

If you've got a single image, you probably want to use L.ImageOverlay: http://leafletjs.com/reference.html#imageoverlay. You should be able to get the imageBounds coordinates right from the OSM export screen.

On Wednesday, May 29, 2013 3:06:55 PM UTC-4, amir lamdan wrote:

[C Loftis]

Did you get this to work? If so can you share some example code?

[John Hooper]

@Bryan - I'm trying to implement this functionality. I found some great examples <A HREF="http://maps.mixedbredie.net/leaflet/">here</A> but not sure how to get the image bounds, or this OSM export screen you mentioned? Would you be able to point me in the right direction?

[Bryan McBride]

Hi John,

OpenStreetMap used to give you the bounding box coordinates when you exported an image from their site. Unfortunately, it's not as straightforward with the newly redesigned site, however it is still possible. Go to http://www.openstreetmap.org, zoom in to your area of interest, and click the "Export Data" link in the lower left-hand corner of the page. You don't want to export the raw data, so to get an image you have to click on the share tool on the black toolbar (second one up from the bottom). Now make note of the bounding coordinates on the export screen (North, East, South, West). Use these coordinates when you load your map image into Leaflet like so:

var imageUrl = 'map.png', imageBounds = [[South, West], [North, East]]; L.imageOverlay(imageUrl, imageBounds).addTo(map);

Where South, West, North, and East are the coordinates from the export screen.

[John Hooper]

Thanks Bryan,

That's a great simple explanation, I have an image overlayed now.

While I've got your knowledge available, Is there a way to toggle the imageOverlay? i.e. turn it on and off as a layer? I found this post (https://github.com/Leaflet/Leaflet/pull/1494) but couldn't get the syntax right. 

Thanks 

[Bryan McBride]

Hey John,

Why not just add the L.ImageOverlay to a standard layer control: http://leafletjs.com/reference.html#control-layers?