What do I need to load a .OSM map in a client side javascript app? (Imagine an offline webapp).
OpenStreetMap Offline – Using Local OpenStreetMap (*.OSM) Map with OpenLayers 3
offlineopenlayersopenstreetmap
Related Solutions
One important thing is to add indices to the data, you can do that in the QGIS DB Manager:
Then there's another issue: The contours are so detailed and big that the spatial index barely helps and labeling takes a long time.
I simplified the lines with a 5 meter tolerance (SAGA Line simplification tool) and then split the lines into smaller pieces (GRASS v.split.vert from the Processing toolbox). This speeds up rendering to a usable level.
You can for example use Tilemill and Mbutil to create offline tiles:
https://www.mapbox.com/tilemill/ (There is already a successor of it called Mapbox Studio but this software still seems to have problems creating offline tiles with mbutils).
https://github.com/mapbox/mbutil
In the OpenStreetMap-Wiki there is also a example of how to use offline tiles: https://wiki.openstreetmap.org/wiki/OpenLayers_Local_Tiles_Example
Basically you can use OpenLayers.Layer.OSM for tiles in spherical mercator:
new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png")
or OpenLayers.Layer.XYZ for different projections
new OpenLayers.Layer.XYZ("Local Tiles", "tiles/${z}/${x}/${y}.png")
Best Answer
With OpenLayers 2 you can load .osm files using
OpenLayers.Format.OSM, see the OpenLayers osm file example in the OSM wiki. Keep in mind that this approach will be rather limited compared to a tile server and will work only for small files.With OpenLayers 3 you can achieve something similar according to this similar question on StackOverflow by using
ol.source.OSMXML. There is also an example of loading OSM XML vector data dynamically from a server (in this case using Overpass API).