Build Your Own OpenStreetMap Tile Server on Ubuntu 16.04

OpenStreetMap, aka, OSM is a user contributed world map that is freely editable. This tutorial will show you how to build your own OpenStreetMap tile server on Ubuntu 16.04. 4GB RAM, 40GB disk space should be the minimum OpenStreetMap server requirements for displaying a small country map like UK. If your map is large, then consider adding more RAM and disk space. If you need to do this on a VPS, then I recommend Linode, from which you can get a 4GB VPS for only 20 USD per month. Without further ado, let’s get started.

Step 1: Upgrade Software

sudo apt update

sudo apt upgrade

Step 2: Install PostgreSQL Database Server with PostGIS

We will use PostgreSQL to store map data. PostGIS is a geospatial extenstion to PostgreSQL. Run the following commands to install them.

sudo apt install postgresql postgresql-contrib postgis postgresql-9.5-postgis-2.2

A user named postgres will be created during the installation process. This allows the use of peer authentication. Let’s switch to the postgres user:

sudo -u postgres -i

Create a PostgreSQL database user osm.

createuser osm

Create a database named gis and at the same time make osm as the owner of the database. -E UTF8 specifies the character encoding scheme to be used in the database is UTF8.

createdb -E UTF8 -O osm gis

Create hstore and postgis extension.

psql -c "CREATE EXTENSION hstore;" -d gis

psql -c "CREATE EXTENSION postgis;" -d gis

Exit from the postgres user.

exit

Create osm user on your operating system so the tile server can run as osm user.

sudo adduser osm

Step 3: Download Map Stylesheet and Map Data

First switch to osm user

su - osm

Download the latest CartoCSS map stylesheets to the osm user’s home directory.

wget https://github.com/gravitystorm/openstreetmap-carto/archive/v2.41.0.tar.gz

Extract it.

tar xvf v2.41.0.tar.gz

Next, download map data to the osm user’s home directory. Use the below command to download the map data of the whole planet (32G).

wget -c http://planet.openstreetmap.org/pbf/planet-latest.osm.pbf

If you want a map of individual country or state, go to http://download.geofabrik.de. Also, BBBike.org provides extracts of more than 200 cities and regions world-wide in different formats.

For example, download the map data of Great Britain (847M).

wget -c http://download.geofabrik.de/europe/great-britain-latest.osm.pbf

Now exit from the osm user.

exit

Recommendations before Importing Map Data

Importing map data takes a lot of RAM. If your physical memory is small, you can easily add a swap file. First we use fallocate command to create a file. For example, create a file named swapfile with 2G capacity in root file system:

sudo fallocate -l 2G /swapfile

Then make sure only root can read and write to it.

sudo chmod 600 /swapfile

Format it to swap:

sudo mkswap /swapfile

Output:

Setting up swapspace version 1, size = 2097148 KiB
no label, UUID=h32b3e10-0779-4865-9ea0-6e2af8f3kea9

Enable the swap file

sudo swapon /swapfile

The import process can take some time. It’s recommended to configure SSH keepalive so that you don’t lose the SSH connection. It’s very easy to do. Just open the SSH client configuration file on your local Linux machine.

sudo nano /etc/ssh/ssh_config

And paste the following text at the end of the file.

ServerAliveInterval 60

Then save the file and connect to your Ubuntu 16.04 server

Step 4: Import the Map Data to PostgreSQL

To import map data, we need to install osm2pgsql which converts OpenStreetMap data to postGIS-enabled PostgreSQL databases.

sudo apt install osm2pgsql

Switch to osm user again.

su - osm

Run the following command to load map stylesheet and map data into the gis Database. Replace great-britain-latest.osm.pbf with your own map data file.

osm2pgsql --slim -d gis -C 3600 --hstore -S openstreetmap-carto-2.41.0/openstreetmap-carto.style great-britain-latest.osm.pbf

osm2gpsql will run in slim mode which is recommended over the normal mode. -d stands for --database. -C flag specify the cache size in MB. Bigger cache size results in faster import speed but you need to have enough RAM to use cache. -S flag specify the style file. And finally you need to specify the map data file.

Once the import is complete, exit from the osm user.

exit

Step 5: Install mod_tile

mod_tile is an Apache module that is required to serve tiles. Currently no binary package is available for Ubuntu. We can compile it from Github repository.

First install build dependency.

sudo apt install git autoconf libtool libmapnik-dev apache2-dev

Then clone the repository from Github.

git clone https://github.com/openstreetmap/mod_tile.git

cd mod_tile/

Compile and install

./autogen.sh
./configure
make
sudo make install
sudo make install-mod_tile

Step 6: Generate Mapnik Stylesheet

Install required packages.

sudo apt install curl unzip gdal-bin mapnik-utils node-carto

Switch to osm user.

su - osm

Cd into the carto style directory.

cd openstreetmap-carto-2.41.0/

Get shapefiles.

./get-shapefiles.sh

Now build the Mapnik xml stylesheet.

carto project.mml > style.xml

Exit from the osm user.

exit

Step 7: Configuring renderd

Edit renderd config file.

sudo nano /usr/local/etc/renderd.conf

In the [default] section, change the value of XML and HOST to the following.

XML=/home/osm/openstreetmap-carto-2.41.0/style.xml
HOST=localhost

In [mapnik] section, change the value of plugins_dir.

plugins_dir=/usr/lib/mapnik/3.0/input/

Save the file.

Install renderd init script by copying the sample init script.

sudo cp mod_tile/debian/renderd.init /etc/init.d/renderd

Grant execute permission.

sudo chmod a+x /etc/init.d/renderd

Edit the init script file

sudo nano /etc/init.d/renderd

Change the following variable.

DAEMON=/usr/local/bin/$NAME
DAEMON_ARGS="-c /usr/local/etc/renderd.conf"
RUNASUSER=osm

Save the file.

Create the following file and set osm the owner.

sudo mkdir -p /var/lib/mod_tile

sudo chown osm:osm /var/lib/mod_tile

Then start renderd service

sudo systemctl daemon-reload

sudo systemctl start renderd

sudo systemctl enable renderd

Step 8: Configure Apache

Install Apache web server

sudo apt install apache2

Create a module load file.

sudo nano /etc/apache2/mods-available/mod_tile.load

Paste the following line into the file.

LoadModule tile_module /usr/lib/apache2/modules/mod_tile.so

Create a symlink.

sudo ln -s /etc/apache2/mods-available/mod_tile.load /etc/apache2/mods-enabled/

Then edit the default virtual host file.

sudo nano /etc/apache2/sites-enabled/000-default.conf

Paste the following lines in <VirtualHost *:80>

LoadTileConfigFile /usr/local/etc/renderd.conf
ModTileRenderdSocketName /var/run/renderd/renderd.sock
# Timeout before giving up for a tile to be rendered
ModTileRequestTimeout 0
# Timeout before giving up for a tile to be rendered that is otherwise missing
ModTileMissingRequestTimeout 30

Save and close the file. Restart Apache.

sudo systemctl restart apache2

Then in your web browser address bar, type

your-server-ip/osm_tiles/0/0/0.png

You should see the tile of world map. Congrats! You just successfully built your own OSM tile server.

Display Your Tiled Web Map

Tiled web map is also known as slippy map in OpenStreetMap terminology. There are two free and open source JavaScript map libraries you can use for your tile server: OpenLayer and Leaflet. The advantage of Leaflet is that it is simple to use and your map will be mobile-friendly.

OpenLayer

To display your slippy map with OpenLayer, download JavaScript and CSS from openlayer.org and extract it to the web root folder.

cd /var/www/html

sudo wget https://github.com/openlayers/openlayers/releases/download/v4.3.4/v4.3.4.zip

sudo unzip v4.3.4.zip

Next, create the index.html file.

sudo nano /var/www/html/index.html

Paste the following HTML code in the file. Replace red-colored text and adjust the longitude, latitude and zoom level according to your needs.

<!DOCTYPE html>
<html>
<head>
<title>Accessible Map</title>
<link rel="stylesheet" href="http://your-ip/v4.3.4/css/ol.css" type="text/css">
<script src="http://your-ip/v4.3.4/build/ol.js"></script>
<style>
  a.skiplink {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  a.skiplink:focus {
    clip: auto;
    height: auto;
    width: auto;
    background-color: #fff;
    padding: 0.3em;
  }
  #map:focus {
    outline: #4A74A8 solid 0.15em;
  }
</style>
</head>
<body>
  <a class="skiplink" href="#map">Go to map</a>
  <div id="map" class="map" tabindex="0"></div>
  <button id="zoom-out">Zoom out</button>
  <button id="zoom-in">Zoom in</button>
  <script>
    var map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM({
             url: 'http://your-ip/osm_tiles/{z}/{x}/{y}.png'
          })
       })
     ],
     target: 'map',
     controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
          collapsible: false
        })
     }),
    view: new ol.View({
       center: [244780.24508882355, 7386452.183179816],
       zoom:5
    })
 });

  document.getElementById('zoom-out').onclick = function() {
    var view = map.getView();
    var zoom = view.getZoom();
    view.setZoom(zoom - 1);
  };

  document.getElementById('zoom-in').onclick = function() {
     var view = map.getView();
     var zoom = view.getZoom();
     view.setZoom(zoom + 1);
  };
</script>
</body>
</html>

Save and close the file. Now you can view your slippy map by typing your server IP address in browser.

your-ip/index.html           or          your-ip

Leaflet

To display your slippy map with Leftlet, download JavaScript and CSS from leftletjs.com and extract it to the web root folder.

cd /var/www/html/

sudo wget http://cdn.leafletjs.com/leaflet/v1.2.0/leaflet.zip

sudo unzip leaflet.zip

Next, create the index.html file.

sudo nano /var/www/html/index.html

Paste the following HTML code in the file. Replace red-colored text and adjust the longitude, latitude and zoom level according to your needs.

<html>
<head>
<title>My first osm</title>
<link rel="stylesheet" type="text/css" href="leaflet.css"/>
<script type="text/javascript" src="leaflet.js"></script>
<style>
   #map{width:100%;height:100%}
</style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([53.555,9.899],5);
    L.tileLayer('http://your-ip/osm_tiles/{z}/{x}/{y}.png',{maxZoom:18}).addTo(map);
</script>
</body>
</html>

Save and close the file. Now you can view your slippy map by typing your server IP address in browser.

your-ip/index.html           or          your-ip

To pre-render tiles instead of rendering on the fly, use render_list command. Pre-rendered tiles will be cached in /var/lib/mod_tile directory. -z and -Z flag specify the zoom level.

render_list -m default -a -z 0 -Z 10

This tutorial is made available with the help from Miles B. Dyson.