I have done what I feel is quite a bit of research on how to render offline maps (OSM file) on a web page. However, in all of my searching, I haven’t been able to find an example or instructions on exactly how to do this. I am trying to use OpenLayers. I have downloaded/exported an OSM map from openStreetMap.org. I even created a tile by extracting it using Marble. Now the problem is how to actual render that map in a web page. All of the simple examples I have seen are almost all for online maps. The thing that confuses me is how does one specify the osm file to be loaded? I have never seen how to load an actual map this is local/offline. Can somebody point me to an example of how to do this?
Thanks
Hello,
I am working more or less on the same feature. My goal is to make an hybrid web application which runs on Ios and Android. If you need only tiles for a small region, you can use Mobile Atlas Creator, download tiles and store them in a folder. Then you can use these tiles in an offline application. See the following solution with leaflet : http://davidrs.com/wp/phonegap-3-0-leaflet-offline-maps/. It’s very simple, and it works fine. I guess you can do the same with openlayers. There are two problems with this solution : you can’t search an address, and it’s fine only for a small region as it can take very easily a lot of storage space. Don’t forget that you have to download tiles for every zoom level. For a big region, this means that you have to download several GB of data.
Now if you want to use directly osm files, it’s possible also with openlayers : look at the following example : http://wiki.openstreetmap.org/wiki/OpenLayers_osm_file_example . The problem for me is that a uncompressed osm file can be very large for a region or a country. Then there are binary files (pbf), but i didn’t find any solutions to read directly these files. As i want to wrap a web application as a phone application, i’ve found a cordova plugin for Mapsforge. Mapsforge is an opensource library for Android which reads custom binary files made directly from osm files. These map files are very small compared to osm files. You can find the plugin here : https://github.com/afsuarez/mapsforge-cordova-plugin, and an example here : https://github.com/robotnic/mapsforge-cordova-plugin-example. But these solutions are only working on smartphones, so i guess it’s not useful for you.
I’ve found also another project which uses IndexDb or WebSql. It works with Leaflet or OpenLayers : https://github.com/tbicr/OfflineMap
But i didn’t test it yet.
You have to decide what way of map display you want to use:
a) convert raw OSM XM data into map tiles and display it via leafletjs or openlayers
where you can choose to host your tiles on an external server or your own localhost PC
or
b) render your raw OSM XML data directly as vector graphic and display it in a browser window or an own app/software
For things like a), have a closer look at https://github.com/b-g/tilehut or similar projects.
For b) purposes, have a look at mapsforge, Marble vector rendering (by feeding raw OSM data) or
http://wiki.openstreetmap.org/wiki/Vector_tiles in general
Also get familiar with http://wiki.openstreetmap.org/wiki/Rendering in general.