Maysam
Maysam

Reputation: 7367

Offline OpenLayers web app using offline OSM

I'm trying to create map based web app which user can set landmark on the provided map. Boundaries of map is limited to a small city, and the client computer is always offline, no internet access at all. After a whole day of googling I've found that combination of OpenLayers and OpenStreetMap is a good choice.

The following example is provided by OpenLayers website:

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script>
    <title>OpenLayers 3 example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'sat'})
          })
        ],
        view: new ol.View({
          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4
        })
      });
    </script>
  </body>
</html>

This works fine, but needs an internet connected computer. After couple of hours of googling, I found another website that provides offline OpenStreetMap data with .osm format. Now I don't know is it possible to feed the OpenLayers with these .osm files or not, something like a local map server? the client computer is running IIS 8

Upvotes: 2

Views: 7466

Answers (1)

scai
scai

Reputation: 21509

For displaying a map offline with OpenLayers (or Leaflet) you will need raster tiles. A .osm file cannot get displayed directly because it contains raw vector data and has to be rendered first.

For generating tiles take a look at Maperitive or TileMill. Then import a country or area extract. Alternatively you could set up your own rendering server which requires a little more work.

Upvotes: 7

Related Questions