Geek Answers Handbook

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

If online access to the Internet is not possible, I would like for the (offline application) HTML5 application to display an OSM map through an OSM file.

Can you give an example of how I can show in offline OST OS players that are loaded from an offline OSM map file such as Mapsforge / Geofabrik etc.?

Example: through openstreetmap.org, I first exported a small portion of the map. How to show this loaded OSM map in html5 offline webapp.

+5
source share
2 answers

How can we show a map using a flyer? By default, Leaflet works with bitmaps. Typically, these tiles are retrieved over the Internet.

How can we show the map using an offline file? For instance. because there is no internet connection?

  • Local tiles in the hierarchy structure . For example, using a script. The disadvantage is that it is not a compact format. This requires some preparatory work:

    L.tileLayer ('/ map-tiles / {z} / map_ {x} _ {y} .png', {attribution: "Map data and copy; ???",}) AddTo (map) ;.

  • MBTiles file with raster fragments . Such a file can be shown through the Leaflet.TileLayer.MBTiles.js plugin. An example script is shown below.

  • VectorGrid is a compact candidate for reading vector data from an MBTiles file. See also int .

  • Mapbox GL JS offline . In this case, you place your vector files locally. See Demo.

  • mobac.sourceforge.net as suggested below by @JaakL.

Advertising Option 3: OpenMapTiles.com creates a very compact MBTiles file with a vector format. Therefore, this solution is useful for option 3.

Advertising Option 2: When you have the MBTILES / Raster file, the following code will work correctly. Thus, it does not work with the above vector file MBTiles.

After installation, after about 1 minute with the npm number in the package, I started the demo. The demo is located under the node_modules \ Leaflet.TileLayer.MBTiles \ demo folder. Works great.

Then I tried to show a map of Amsterdam. Alas, I could not get this (as a beginner) to work. I am studying this for POC.

How can I update this source to display a map of Amsterdam? Upon reaching this, you will receive a +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>
+1
source

Yes, it is possible to do this in Flyer or any other mapping library. All you have to do is convert the OSM file to a set of fragments, and then point the tile layer to the locally saved files (relative path). Or, if possible (I am not familiar with OSM rules), you can download a set of tiles for your area.

If you need to convert OSM files to tiles, try using the Maperative tool and the tile generator .

You can also try the methods listed here: http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles .

After you have the tiles, configure the structure of the property catalog and select your tile layer on it.

Here is an example using Flyers:

 // 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 that file paths are relative, and you may have to make sure that the restrictions are correct for your custom snippets.

+1
source

More articles:


All Articles