Search code examples
javascripthtmlleafletopenstreetmapmbtiles

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.

Solution

  • 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?

    1. 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);

    2. MBTiles file with raster tiles. Such a file can be shown via the Leaflet.TileLayer.MBTiles.js plugin. An example script is shown below.

    3. VectorGrid is a compact candidate for reading the vector data from the MBTiles file. See also this intruction.

    4. Mapbox GL JS offline. In that case you put locally your vector files. See the demo.

    5. 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.

    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>