Posted inDev-solution Tutorial

How To Create Offline Tile Server OpenStreetMap & Docker

openStreetMap Docker tile server

This article will show you how you can create your own custom-styled OpenStreetMap tile server with Docker.

Why Docker?

Docker
Docker

Docker allows you to create containerized server environments. Despite the fact that docker makes use of the virtualization notion, it does not construct virtual machines. (However, if you want to run Docker on Windows, you must do so on a virtual machine.) Docker containers encapsulate the operating system rather than the hardware (as virtual machines do).

You must first install docker software on your pc. if you haven’t already done so you can refer to one of these links to install it on Ubuntu, Window, or Mac :

Setting up Offline Tile server

Create a Docker volume for the PostgreSQL database that will hold the OpenStreetMap data first:

docker volume create openstreetmap-data

Then, from geofabrik.de, download an.osm.pbf extract for the region you’re interested in. After that, run a container and mount the file as /data.osm.pbf to begin importing it into PostgreSQL.

docker run \
    -v /absolute/path/to/luxembourg.osm.pbf:/data.osm.pbf \
    -v openstreetmap-data:/var/lib/postgresql/12/main \
    overv/openstreetmap-tile-server \
    import

If the container leaves without errors, your data was successfully imported, and the tile server is now ready to run.

Automatic updates (optional)

If your import is an extract of the planet and has polygonal bounds associated with it, like those from geofabrik.de, then it is possible to set your server up for automatic updates. Make sure to reference both the OSM file and the polygon file during the import process to facilitate this, and also include the UPDATES=enabled variable:

docker run \
    -e UPDATES=enabled \
    -v /absolute/path/to/luxembourg.osm.pbf:/data.osm.pbf \
    -v /absolute/path/to/luxembourg.poly:/data.poly \
    -v openstreetmap-data:/var/lib/postgresql/12/main \
    overv/openstreetmap-tile-server \
    import

Running OpenStreetMap server

Run the server like this:

docker run \
    -p 8080:80 \
    -v openstreetmap-data:/var/lib/postgresql/12/main \
    -d overv/openstreetmap-tile-server \
    run

Your tiles will now be available at http://localhost:8080/tile/{z}/{x}/{y}.png. The demo map in leaflet-demo.html will then be available on http://localhost:8080. Note that it will initially take quite a bit of time to render the larger tiles for the first time.
to see more options you can consult this link

Use OpenStreetMap tile server in Leaflet.js

leafletjs

Leaflet.js

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

Use OpenStreetMap tile server 

// create a map in the "map" div, set the view to a given place and zoom
 var map = L.map('map').setView([51.505, -0.09], 13);
 
 // add an OpenStreetMap tile layer
 // Tile Usage Policy applies: https://operations.osmfoundation.org/policies/tiles/
 L.tileLayer('http://localhost:8080/tile/{z}/{x}/{y}.png', {     attribution: '&amp;copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

References

https://opensource.com/resources/what-docker

https://github.com/Overv/openstreetmap-tile-server

https://github.com/Overv/openstreetmap-tile-server/blob/master/README.md