Search code examples
javascripthtmlcssmapswebserver

Offline map for a web application

I am trying to create a web application in which you should see a map and click in different spots to do things. The problem right now is that it is an offline application, the clients and the server are not connected to the internet so I can not access Google´s or OpenStreetMap´s servers to get the maps.

Now the problem: I don't know how to create a map with no internet conection. I've seen some ideas but all of them are paid or does not meet our requirements. Those requirements are that we have to show all of Spain and be able to zoom in to areas of around 10-20 square meters, maybe a little bit more, satellite style view would be appreciated but its not a must have thing, just a nice thing to have. With that zoom level I know downloading the tiles as pngs would require a lot of space so the best thing would be to have a rendering server with svg data.

I´ve read that its possible to cache the maps with openlayers but on restart that data is lost, I saw is that it is possible to download data with Mobile Atlas Creator but it does not allow me to download all of Spain and the zoom level is not enough. I also tried the rendering server with GeoServer but I don't know where to download the maps for ir since the osm format from openmaps is not supported. The last thig I´ve looked at is this: Using OpenStreetMap offline but I'm not sure how to do it.

And the question: Does anyone know how I could do this? Is my approach right or is there a better way to do this?

Some extra info: I'm a junior developer so I'm a little lost with this, also I'm using html, CSS and JavaScript for the client and the server is a node.js express server. Also, I know the rendering server would consume a lot of resources but we have a server with 16 cores/32 threads and 64GB of RAM so, I think that should be enough, storage is not a problem, we can upgrade it, and it runs OpenSuse Leap 15.4.

Thanks in advance.

Solution

  • The solution was to use this for the map instead of the OSM layer you use to create an online map:

    const raster = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'imgs/sat_tiles/{z}/{x}/{y}.png' // Route to the tiles
      }),
});

    I downloaded the tiles with this tool: GMapCatcher. It lets you download different types of tiles (Including satellite). It needs a bit of tweaking to get the correct ones cause it does not use OSM by default but it works.