Showing an offline OSM map file. Suggestion: an MB Tiles file with Js.library

When online access to the internet is not possible, I would like the (offline) HTML5 app show an OSM map via an OSM file.

Can you give an example of how I can show in an offline Html5 app OSM tiles that are loaded from an offline OSM map file like Mapsforge / Geofabrik etc?

Example: via the openstreetmap.org I first exported a small part of a map. How can I show this downloaded OSM map in the Html5 offline webapp.

Yes, it's possible to do this in Leaflet, or any other mapping library. All you have to do is convert the OSM file into a set of tiles, then point your tile layer to the locally stored files (relative path). Or if it's possible (I'm not familiar with OSM rules), you could download the set of tiles for your area.

If you need to convert your OSM files into tiles, try a tool like Maperative and its tile generator.

You can also try the methods listed at this link: http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles.

Once you have your tiles, set up the property directory structure, and point your tile layer at it.

Here's an example using Leaflet:

// the path may be different depending on how you have the tiles saved.
// you will have to define the options object

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

Keep in mind the file paths are relative, and you'll probably have to make sure the constraints are correct set up for your custom tiles.

How can we show a map using Leaflet? By default Leaflet works with raster images. Normally these tiles are retrieved via the internet.

How can we show a map using an offline file? E.g. because no internet connection is possible?

Local tiles in an hierarchy structure. For example by using such a script. The disadvantage is that this is not a compact format. It requires some preparational work:

L.tileLayer('/map-tiles/{z}/map_{x}_{y}.png', { attribution: 'Map data © ???', }).addTo(map);
MBTiles file with raster tiles. Such a file can be shown via the Leaflet.TileLayer.MBTiles.js plugin. An example script is shown below.
VectorGrid is a compact candidate for reading the vector data from the MBTiles file. See also this intruction.
Mapbox GL JS offline. In that case you put locally your vector files. See the demo.
mobac.sourceforge.net as suggested below by @JaakL.

Ad option 3: OpenMapTiles.com generates very compact MBTiles file with the Vector format. So, this solution is useful for option 3.

Ad option 2: When you have an MBTILES/Raster file, then the following code will work correctly. So, it is not working with the above MBTiles vector file.

Get the TileLayer including demo: https://www.npmjs.com/package/Leaflet.TileLayer.MBTiles
Get an example MBTile file: e.g. https://openmaptiles.org/downloads/#city ... and select Amsterdam

After installing in about 1 minute with npm the package I ran the demo. The demo is under the 'node_modules\Leaflet.TileLayer.MBTiles\demo' folder. Works fine.

Then I tried to show the Amsterdam map. Alas, I couldn't get this (as a newbie) working. I am investigating this for a POC.

How can I update this source to get the Amsterdam map shown? Getting it done will give the +50 bounty.

<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/leaflet@1.0.0/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/sql.js@0.3.2/js/sql.js"></script>
<script src="../Leaflet.TileLayer.MBTiles.js"></script>
  <meta charset="utf-8">
  <title>Leaflet.TileLayer.MBTiles demo</title>
  <style>
    #map {
      width:600px;
      height:400px;
    }
  </style>
</head>
<body>
  <div id='map'></div>
  <script>
    var map = new L.Map('map');
    map.setView(new L.LatLng(52.361367, 4.923083), 18);
    var mb = L.tileLayer.mbTiles('./amsterdam_netherlands.mbtiles', {
        minZoom: 16,
        maxZoom: 20
    }).addTo(map);
    mb.on('databaseloaded', function(ev) {
        console.info('MBTiles DB loaded', ev);
    });
    mb.on('databaseerror', function(ev) {
        console.info('MBTiles DB error', ev);
    });
  </script>
</body>
</html>

来源：https://stackoverflow.com/questions/43743097/showing-an-offline-osm-map-file-suggestion-an-mb-tiles-file-with-js-library

标签

javascript

html5

leaflet

openstreetmap

mbtiles