I'm not sure how to do this in Android, but here's how to do it on the computer:
I was able to use Maperitive to mark a bounding area, download OSM data for the area, generate tiles for it locally, and deploy the map on a local webpage using leaflet.js . I can browse this map without any internet connection.
Download and run Maperitive.
First, click "Map > Clear Map" from the top menu (or Ctrl+N) to remove any web maps. Then, load your OSM file from "File > Open Map Sources".
You can now Generate tiles by typing a line like this into the in-app command line:
generate-tiles minzoom=1 maxzoom=16
To get a fix on the min and max zoom extents you need, type zoom 12 , zoom 16 etc to see till where you want to go.
The tileset will get generated. You can now make a simple HTML page, like this:
<html>
<head>
<link rel="stylesheet" href="lib/leaflet.css" />
</head>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
<body>
<div id="map"></div>
<script src="lib/leaflet.js"></script>
<script>
var map = L.map('map', {
center: [18.512224413095872, 73.868436919390348],
zoom: 12,
minZoom: 8,
maxZoom: 16,
maxBounds: [
[18.443790655688225, 73.741131698096311],
[18.672919555595893, 73.955365096533811]
]
});
L.tileLayer('tiles/{z}/{x}/{y}.png', { attribution: 'Map tiles generated for local use by <a href="http://maperitive.net">Maperitive</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.' }).addTo(map);
</script>
</body>
</html>
Get the leaflet.js and css paths here: http://leafletjs.com/examples/quick-start.html (or download from that site).
There is a tiles.json file generated along with the tiles. You will find the bounding lat-long parameters, center point etc in there.
