Fast Scalable Basemap with TileServer GL/OpenMapTiles (Ubuntu 22.04)

TileServer GL is an open-source tile server for OpenStreetMap. Previously we explained the process of setting up OSM tile server with mapnik and mod_tile, which is a raster-based tile server. This tutorial is going to show you how to set up TileServer GL vector tile server on Ubuntu 22.04.

TileServer GL

TileServer GL can serve both vector tiles (pbf) and raster tiles (png, jpg, webp). It’s simple to use. You just need to feed it a .mbtiles file, which will be generated by OpenMaptiles from a PostGIS database.  The overall Steps are as follows:

  • Import OpenStreetMap data to PostgreSQL
  • Use OpenMapTiles to generate .mbtiles file
  • Start TileServer GL with the .mbtiles file to serve tiles

MBTiles are like pre-rendered map tiles. The PostGIS database won’t be needed anymore once the .mbtiles file is generated. That’s why it’s very fast to serve tiles with TileServer GL.

TileServer GL is designed to work with MBTiles in openmaptiles format, so we must use OpenMapTiles tools to generate the .mbtiles file with the latest map data.

Demo

Mapbox Streets style: https://www.linuxbabe.com/maps/mapbox-street.html

Fast Scalable Basemap with TileServer GL and OpenMapTiles (Ubuntu 22.04)

Maplibre Streets style: https://www.linuxbabe.com/maps/maplibre-streets.html

Benefits of Vector Tiles

  • Better display quality for high DPI devices (retina display)
  • Small efficient format (No 512 * 512 images needed)
  • Fast map rendering
  • Clearer, more readable text
  • On-the-fly labeling for heads-up display
  • Separate content and styling, which allows for creating multiple styles pointing to the same tile stack.
  • More fine-grained zoom levels such as 8.43 and 9.57. With raster tiles, you can only have integer zoom levels such as 8, 9, 10.
  • Day and night mode

Vector Tile Formats

There are several formats for vector tiles.

  • GeoJSON
  • TopoJSON
  • Mapbox Vector Tile (MVT)
  • 05m
  • OpenScienceMap binary
  • Arc GeoServices JSON

OpenMapTiles uses the Mapbox vector tile format.

Hardware Requirements

It takes a long time to import large map data to the PostgreSQL database and generate .mbtiles file from the database. Your server should have a powerful CPU and fast SSD. Also consider adding more RAM.

If you are going to host the entire world map, I recommend you buy the extra-large VPS from Contabo, which has

  • A 10-core CPU
  • 60 GB RAM
  • 1.6 TB Intel Optane SSD

It costs just 26.99 €/month.

Step 1: Upgrade Software

It’s always a good practice to update server software before doing any major work on your server. Log into your server via SSH and run the following command.

sudo apt update; sudo apt upgrade -y

Step 2: Install PostgreSQL Database Server and Some Extensions

We will use PostgreSQL to store map data. The PostgreSQL team always strives to make performance improvements with every new version. Run the following commands to install the latest version of PostgreSQL.

echo "deb [signed-by=/etc/apt/keyrings/postgresql.asc] http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" | sudo tee /etc/apt/sources.list.d/pgdg.list

sudo mkdir -p /etc/apt/keyrings/

wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo tee /etc/apt/keyrings/postgresql.asc

sudo apt update

sudo apt install -y postgresql postgresql-contrib postgresql-15 postgresql-client-15

Then install PostGIS, which is a geospatial extension to PostgreSQL.

sudo apt install postgis postgresql-15-postgis-3

Install PostgreSQL GZIP extension.

cd ~ 

sudo apt install git

git clone https://github.com/pramsey/pgsql-gzip

cd pgsql-gzip/

sudo apt install build-essential zlib1g-dev postgresql-server-dev-all pkg-config

make

sudo make install

The extension will be installed under /usr/share/postgresql/15/extension/.

Install OSM Localization Extension (osml10n)

cd ~

git clone https://github.com/giggls/mapnik-german-l10n

cd mapnik-german-l10n/

sudo apt install devscripts equivs python3 python3-pip -y

sudo mk-build-deps -i debian/control

sudo pip3 install tltk

make deb

sudo apt install ../postgresql*osml10n*amd64.deb

The extension will be installed under /usr/share/postgresql/15/extension/.

Step 3: Create PostgreSQL Database For OpenStreetMap

PostgreSQL database server automatically starts and listens on 127.0.0.1:5432. The postgres user is the super user for PostgreSQL database server. By default, this user has no password and there’s no need to set one because you can use sudo to switch to the postgres user and log into PostgreSQL server.

sudo -u postgres -i

Now you can create a PostgreSQL database user osm.

createuser osm

Set a password for the osm user. The password should not contain any special characters, or it might prevent OSM tools to access PostgreSQL database.

psql -c "ALTER USER osm WITH PASSWORD 'secret_password';"

Then create a database named openstreetmap and at the same time make osm as the owner of the database.

createdb -E UTF8 -O osm openstreetmap

Next, create the postgis and hstore extension for the openstreetmap database.

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

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

Enable the GZIP and osml10n extension on the openstreetmap database.

psql -d openstreetmap -c "CREATE EXTENSION gzip;"

psql -d openstreetmap -c "CREATE EXTENSION osml10n CASCADE;"

Set osm as the table owner.

psql -d openstreetmap -c "ALTER TABLE spatial_ref_sys OWNER TO osm;"

Grant permission to the osm user.

psql -d openstreetmap -c "GRANT ALL ON ALL TABLES IN SCHEMA public TO osm;"

psql -d openstreetmap -c "ALTER DEFAULT PRIVILEGES FOR USER osm IN SCHEMA public GRANT ALL ON TABLES TO osm;";

psql -d openstreetmap -c "ALTER DEFAULT PRIVILEGES FOR USER osm IN SCHEMA public GRANT ALL ON SEQUENCES TO osm;";

Create a database named natural_earth and at the same time make osm as the owner of the database.

createdb -E UTF8 -O osm natural_earth

Next, create the postgis and hstore extension for the natural_earth database.

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

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

Exit from the postgres user.

exit

Step 4: Optimize PostgreSQL Server Performance

The import process can take some time. To speed up this process, we can tune some PostgreSQL server settings to improve performance. Edit PostgreSQL main configuration file.

sudo nano /etc/postgresql/15/main/postgresql.conf

First, we should change the value of shared_buffer. The default setting is:

shared_buffers = 128MB

This is too small. The rule of thumb is to set it to 25% of your total RAM (excluding swap space). For example, my VPS has 60G RAM, so I set it to:

shared_buffers = 15GB

Find the following line.

#work_mem = 4MB
#maintenance_work_mem = 64MB

Again, the value is too small. I use the following settings.

work_mem = 1GB
maintenance_work_mem = 8GB

Then find the following line.

#effective_cache_size = 4GB

If you have lots of RAM like I do, you can set a higher value for the effective_cache_size like 20G.

effective_cache_size = 20GB

Save and close the file. Restart PostgreSQL for the changes to take effect.

sudo systemctl restart postgresql

By default, PostgreSQL would try to use huge pages in RAM. However, Linux by default does not allocate huge pages. Check the process ID of PostgreSQL.

sudo head -1 /var/lib/postgresql/15/main/postmaster.pid

Sample output:

7031

Then check the VmPeak value of this process ID.

grep ^VmPeak /proc/7031/status

Sample output:

VmPeak: 16282784 kB

This is the peak memory size that will be used by PostgreSQL. Now check the size of huge page in Linux.

cat /proc/meminfo | grep -i huge

Sample output:

AnonHugePages:         0 kB
ShmemHugePages:        0 kB
HugePages_Total:       0
HugePages_Free:        0
HugePages_Rsvd:        0
HugePages_Surp:        0
Hugepagesize:       2048 kB
Hugetlb:               0 kB

We can calculate how many huge pages we need. Divide the VmPeak value by the size of huge page: 16282784 kB / 2048 kB = 7950. Then we need to edit Linux kernel parameters.

sudo nano /etc/sysctl.d/60-custom.conf

Add the following line to allocate 7950 huge pages.

vm.nr_hugepages = 7950

Save and close the file. Then apply the changes.

sudo sysctl -p /etc/sysctl.d/60-custom.conf

If you check the meminfo again,

cat /proc/meminfo | grep -i huge

We can see there are 7950 huge pages available.

AnonHugePages:         0 kB
ShmemHugePages:        0 kB
HugePages_Total:    7950
HugePages_Free:     7950
HugePages_Rsvd:        0
HugePages_Surp:        0
Hugepagesize:       2048 kB

Restart PostgreSQL to use huge pages.

sudo systemctl restart postgresql

Step 5: Install Imposm3

Imposm is an importer for OpenStreetMap data.

cd ~

wget https://github.com/omniscale/imposm3/releases/download/v0.11.1/imposm-0.11.1-linux-x86-64.tar.gz

tar xvf imposm-0.11.1-linux-x86-64.tar.gz

sudo mv imposm-0.11.1-linux-x86-64 /opt/imposm

Now you invoke imposm with:

/opt/imposm/imposm

Step 6: Install OpenMapTiles Tools

OpenMapTiles relies on Docker, so we need to install Docker.

sudo apt install docker.io docker-compose

Add your user account to the docker group.

sudo usermod -aG docker username

Log out and log back in for the change to take effect. Then run the following command to check running Docker containers.

docker ps

It should at least output the following texts.

CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

Clone the OpenMapTiles Github repo.

cd ~ 

git clone https://github.com/openmaptiles/openmaptiles.git

Create the data.yml, mapping.yml and SQL files.

cd openmaptiles/

sudo make

ubuntu openmaptiles generate-sql

Edit the docker-compose.yml file.

nano docker-compose.yml

Change the port nubmer to 2345.

  postgres:
    image: "${POSTGIS_IMAGE:-openmaptiles/postgis}:${TOOLS_VERSION}"
    # Use "command: postgres -c jit=off" for PostgreSQL 11+ because of slow large MVT query processing
    volumes:
      - pgdata:/var/lib/postgresql/data
    networks:
      - postgres
    ports:
      - "2345"
    env_file: .env

Save and close the file. Then edit the .env file.

nano .env

Find the following lines.

# Make sure these values are in sync with the ones in .env-postgres file
PGDATABASE=openmaptiles
PGUSER=openmaptiles
PGPASSWORD=openmaptiles
PGHOST=postgres
PGPORT=5432

Change them to the following. 172.17.0.1 is the Docker network interface.

PGDATABASE=openstreetmap
PGUSER=osm
PGPASSWORD=osm_password
PGHOST=172.17.0.1
PGPORT=5432

Find the following lines.

# Which zooms to generate with   make generate-tiles-pg
MIN_ZOOM=0
MAX_ZOOM=7

Set max zoom level to 14.

# Which zooms to generate with make generate-tiles-pg
MIN_ZOOM=0
MAX_ZOOM=14

Save and close the file. Create a .osmenv file in your home directory.

nano ~/.osmenv

Add the following lines.

export PGDATABASE=openstreetmap
export PGUSER=osm
export PGPASSWORD=osm_password
export PGHOST=172.17.0.1
export PGPORT=5432

Save and close the file. Then run the following command to set the above environment variables.

source ~/.osmenv

chmod 700 ~/.osmenv

OpenMapTiles will start a Docker container and access PostgreSQL database via 172.17.0.1, so we need to configure PostgreSQL to listen on this IP address.

sudo nano /etc/postgresql/15/main/postgresql.conf

Find the following line.

#listen_addresses = 'localhost'

Change it to:

listen_addresses = 'localhost,172.17.0.1'

Save and close the file. Then edit pg_hba.conf file.

sudo nano /etc/postgresql/15/main/pg_hba.conf

Find the following lines.

# IPv4 local connections:
host    all             all             127.0.0.1/32            scram-sha-256

This allows users to log in to PostgreSQL from the 127.0.0.1 IP address. We need to add the 172.17.0.0/24 and 172.18.0.0/24 network to allow login from Docker.

# IPv4 local connections:
host    all             all             127.0.0.1/32            scram-sha-256
host    all             all             172.17.0.0/24           scram-sha-256
host    all             all             172.18.0.0/24           scram-sha-256

Save and close the file. Restart PostgreSQL for the changes to take effect.

sudo systemctl restart postgresql

If you enabled firewall on the server, you should also allow connections from the 172.17.0.0/24 and 172.18.0.0/24 network. For example, if you use the UFW firewall, run the following command.

sudo ufw insert 1 allow in from 172.17.0.0/24

sudo ufw insert 1 allow in from 172.18.0.0/24

You also need to allow SSH.

sudo ufw allow ssh

Enable and restart UFW for the changes to take effect.

sudo ufw enable

sudo systemctl restart ufw

List the PostgreSQL listening addresses:

sudo ss -lnpt | grep postgres

You should see that PostgreSQL listens on both 127.0.0.1 and 172.17.0.1.

LISTEN 0      244            172.17.0.1:5432       0.0.0.0:*    users:(("postgres",pid=19767,fd=6))                                           
LISTEN 0      244             127.0.0.1:5432       0.0.0.0:*    users:(("postgres",pid=19767,fd=5))

Step 7: Use Screen on Remote Servers

It can take a long time to import the OSM pbf file and your computer might be disconnected from Internet, it’s recommended to use the screen utility to keep your session alive. Install screen on the Ubuntu 22.04 server:

sudo apt install screen

Then start screen:

screen

Upon the first launch, you will see an introduction text, simply press Enter to end. Then you will be able to run commands as usual.

The GNU screen session will reset environment variables, so we need to set them again.

source ~/.osmenv

Run the following command to check the PostgreSQL environment variables are set.

env

Step 8: Import the Map Data to PostgreSQL

Now we can import external OSM data from OpenStreetMapData, Natural Earth and OpenStreetMap Lake Labels into the PostgreSQL database.

cd ~/openmaptiles/

sudo make import-data

openmaptiles import Natural Earth

If you encounter the following error, it’s because you didn’t change the port number in docker-compose.yml file.

Error starting userland proxy: listen tcp4 0.0.0.0:5432: bind: address already in use

To fix this error, you should change the port number, then remove the existing Docker container.

sudo docker rm openmaptiles_postgres_1

And run sudo make import-data again.

Next, change to the data directory.

cd ~/openmaptiles/data/

Then run one of the following commands to download the map data in PBF (ProtoBufBinary) format to the data directory.

Britain and Ireland (1.7G)

sudo wget -c http://download.geofabrik.de/europe/britain-and-ireland-latest.osm.pbf

Europe (25.8G)

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

North America (11.8G)

sudo wget -c http://download.geofabrik.de/north-america-latest.osm.pbf

South America (2.9G)

sudo wget -c http://download.geofabrik.de/south-america-latest.osm.pbf

Central America (570MB)

sudo wget -c http://download.geofabrik.de/central-america-latest.osm.pbf

Asia (11.2G)

sudo wget -c http://download.geofabrik.de/asia-latest.osm.pbf

Africa (5.5G)

sudo wget -c http://download.geofabrik.de/africa-latest.osm.pbf

Whole planet (66G). Note: I recommend only downloading the whole plant map when you really need to display the map of the whole world, or you will waste time waiting for the tile server to process unnecessary data.

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

or

sudo wget -c https://download.bbbike.org/osm/planet/planet-latest.osm.pbf

If you want other map of individual country/state/province/city, go to http://download.geofabrik.de. Also, BBBike.org provides extracts of more than 200 cities and regions worldwide in different formats.

Once the map data is downloaded, run the following commands to import the PBF file. If your map data is very large, then this process will take some time.

cd ~/openmaptiles/ 

sudo make import-osm

openmaptiles import osm data

Import labels from Wikidata.

sudo make import-wikidata

Extract bbox (bounding box) from the .osm.pbf file.

sudo make generate-bbox-file

Import SQL files.

sudo make import-sql

Generate vector tiles (.mbtiles file). If your map data is very large, then this process will take some time. The generated file will be saved as ~/openmaptiles/data/tile.mbtiles.

sudo make generate-tiles-pg

Step 9: Install TileServer GL

Docker

The easiest way is to use Docker. It will listen on TCP port 8080.

sudo docker run --restart=always -it -d -v /home/username/openmaptiles/data:/data -p 8080:8080 maptiler/tileserver-gl

TileServer GL will automatically detect .mbtiles file in the data directory.

Native Binary

If you want to run TileServer GL natively, you can install it with npm (NodeJS package manager), but I don’t recommend this method. It’s error-prone.

TileServer GL is compatible with NodeJS v14 and v16.

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -

sudo apt install nodejs

Then install the tileserver-gl package. (Please don’t run this command as root user. You should create a sudo user.)

sudo npm install -g tileserver-gl

Now you can start the tile server.

sudo tileserver-gl --mbtiles /home/username/openmaptiles/data/tiles.mbtiles

Firewall

Open TCP port 8080 in firewall.

sudo ufw allow 8080/tcp

sudo systemctl restart ufw

Then in your web browser address bar, type

your-server-ip-address:8080

You should see the vector tile map. Congrats! You just successfully built your own vector tile server. Note that old versions of Firefox can’t display these vector tiles. You need to use a third-party library to display vector tile based maps, which is explained at the end of this tutorial.

OpenMapTiles mbtiles

Step 10: Generate Fonts for OpenStreetMap

Download the OpenMapTiles fonts generation tool.

cd ~

git clone https://github.com/openmaptiles/fonts.git

Install NodeJS.

sudo apt install nodejs npm

Install required nodejs module.

cd fonts/

npm install

Generate fonts, which will be saved in the _output directory.

node ./generate.js

Move this directory to /var/www/.

sudo mkdir -p /var/www/

sudo mv _output/ /var/www/font-family/

It’s also recommeneded to download the KlokanTech Noto Sans font family.

cd ~

git clone https://github.com/klokantech/klokantech-gl-fonts.git

Move it to /var/www/font-family/ directory.

sudo mv klokantech-gl-fonts/* /var/www/font-family/

Some map styles expect the font name Klokantech Noto Sans, so we need to make a copy.

cd /var/www/font-family/
sudo cp -r KlokanTech\ Noto\ Sans\ Regular/ Klokantech\ Noto\ Sans\ Regular/
sudo cp -r KlokanTech\ Noto\ Sans\ Bold/ Klokantech\ Noto\ Sans\ Bold
sudo cp -r KlokanTech\ Noto\ Sans\ CJK\ Bold/ Klokantech\ Noto\ Sans\ CJK\ Bold/
sudo cp -r KlokanTech\ Noto\ Sans\ CJK\ Regular/ Klokantech\ Noto\ Sans\ CJK\ Regular/
sudo cp -r KlokanTech\ Noto\ Sans\ Italic/ Klokantech\ Noto\ Sans\ Italic/

Step 11: Setting Up Reverse Proxy

To access TileServer GL using a domain name, we can set up a reverse proxy for TileServer GL with Nginx or Apache. This will also allow us to enable HTTPS with free Let’s Encrypt certificate.

Open TCP ports 80 and 443 in the firewall.

sudo ufw allow 80,443/tcp

sudo systemctl restart ufw

Nginx

Nginx is a very popular web server and reverse proxy. If you prefer to use Nginx, run the following command to install it.

sudo apt install nginx

Then create a server block file for TileServer GL.

sudo nano /etc/nginx/conf.d/tileserver-gl.conf

Add the following content to this file. Replace tileserver.example.com with your own domain name. You should also create DNS A record for this sub-domain. If you don’t have a real domain name, I recommend going to NameCheap to buy one. The price is low and they give whois privacy protection free for life.

server {
      listen 80;
      listen [::]:80;
      server_name tileserver.example.com;

      access_log /var/log/nginx/openstreetmap.access;
      error_log /var/log/nginx/openstreetmap.error;

      location /font-family/ {
        alias /var/www/font-family/;
      }
      location / {
          proxy_pass http://127.0.0.1:8080;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;

          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Forwarded-Protocol $scheme;
          proxy_set_header X-Forwarded-Host $http_host;
          proxy_hide_header Access-Control-Allow-Origin;
      }
    
    # This header tells web browsers not to cache the CORS reponse header.
    add_header 'Vary' "Origin";
  
    # This controls which domains can use this tile server via CORS. It's like an access control list. 
    add_header "Access-Control-Allow-Origin" "https://www.example.com";
    
    # If you want to allow all domains to use your tile server, then comment out the above line and uncomment the following line.
    # add_header "Access-Control-Allow-Origin" "$http_origin";
     
}

Save and close this file. Then test Nginx configuration.

sudo nginx -t

If the test is successful, reload Nginx for the change to take effect.

sudo systemctl reload nginx

Now you can access TileServer GL via tileserver.example.com.

Apache

If you prefer Apache over Nginx, then install Apache web server by using the following command.

sudo apt install apache2

To use Apache as a reverse proxy, we need to enable the proxy modules and the header module.

sudo a2enmod proxy proxy_http headers substitute

Then create a virtual host file for TileServer GL.

sudo nano /etc/apache2/sites-available/tileserver-gl.conf

Put the following configurations into the file. Replace tileserver.example.com with your actual domain name. Don’t forget to create DNS A record for this sub-domain. If you don’t have a real domain name, I recommend going to NameCheap to buy one. The price is low and they give whois privacy protection free for life.

<VirtualHost *:80>
   ServerName tileserver.example.com
   ErrorDocument 404 /404.html

   # disable proxy for the /font-family sub-directory
   # must be placed on top of the other ProxyPass directive
   ProxyPass /font-family !
   Alias "/font-family" "/var/www/font-family"
   #HTTP proxy
   ProxyPass / http://127.0.0.1:8080/
   ProxyPassReverse / http://127.0.0.1:8080/
   ProxyPreserveHost On

   # Only allow authorizied domains to fetch resources on this tile server
   SetEnvIf Origin "^http(s)?://(.+\.)?(example\.com|otherdomain\.tld)$" origin_is=$0
   Header unset Access-Control-Allow-Origin
   Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
   Header merge Vary Origin

   ErrorLog ${APACHE_LOG_DIR}/tileserver-gl.error.log
   CustomLog ${APACHE_LOG_DIR}/tileserver-gl.access.log combined

</VirtualHost>

Save and close the file. Then enable this virtual host.

sudo a2ensite tileserver-gl.conf

Restart Apache

sudo systemctl restart apache2

Now you can access TileServer GL using the domain name tileserver.example.com.

Step 12: Enable HTTPS

To encrypt the HTTP traffic when you visit TileServer GL server from outside, we can enable HTTPS by installing a free TLS certificate issued from Let’s Encrypt. Run the following command to install Let’s Encrypt client (certbot) on Ubuntu 22.04.

sudo apt install certbot

If you use Nginx, then you also need to install the Certbot Nginx plugin.

sudo apt install python3-certbot-nginx

Next, run the following command to obtain and install TLS certificate.

sudo certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email [email protected] -d tileserver.example.com

If you use Apache, then you need to install the Certbot Apache plugin.

sudo apt install python3-certbot-apache

Next, run the following command to obtain and install TLS certificate.

sudo certbot --apache --agree-tos --redirect --hsts --staple-ocsp --uir --email [email protected] -d tileserver.example.com

Where:

  • --nginx: Use the nginx plugin.
  • --apache: Use the Apache plugin.
  • --agree-tos: Agree to terms of service.
  • --redirect: Force HTTPS by 301 redirect.
  • --hsts: Add the Strict-Transport-Security header to every HTTP response. Forcing browser to always use TLS for the domain. Defends against SSL/TLS Stripping.
  • --staple-ocsp: Enables OCSP Stapling. A valid OCSP response is stapled to the certificate that the server offers during TLS.
  • --uir: upgrade insecure requests.

The certificate should now be obtained and automatically installed.

tileserver gl https

And you can access TileServer GL via HTTPS: https://tileserver.example.com.

TileServer GL - Server for vector and raster maps with GL styles

If you click the vector HTTP link, you will see an example map with the Klokantech Basic Style.

tileserver GL Klokantech Basic Style

You can use the following HTML code to display the map on any web page.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic preview - TileServer GL</title>
  <link rel="stylesheet" type="text/css" href="https://tileserver.example.com/mapbox-gl.css" />
  <script src="https://tileserver.example.com/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="https://tileserver.example.com/mapbox.css" />
  <script src="https://tileserver.example.com/mapbox.js"></script>
  <script src="https://tileserver.example.com/leaflet-hash.js"></script>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
  <h1 style="display:none;">Basic preview</h1>
  <div id='map'></div>
  <script>
    var q = (location.search || '').substr(1).split('&');
    var preference =
      q.indexOf('vector') >= 0 ? 'vector' :
        (q.indexOf('raster') >= 0 ? 'raster' :
          (mapboxgl.supported() ? 'vector' : 'raster'));
    if (preference == 'vector') {
      mapboxgl.setRTLTextPlugin('https://tileserver.example.com/mapbox-gl-rtl-text.js');
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'https://tileserver.example.com/styles/basic-preview/style.json',
        zoom: 5.43,  
        center: [-3.9, 54.5],
        hash: true
      });
      map.addControl(new mapboxgl.NavigationControl());
    } else {
      var map = L.mapbox.map('map', 'https://tileserver.example.com/styles/basic-preview.json', { zoomControl: false });
      new L.Control.Zoom({ position: 'topright' }).addTo(map);
      setTimeout(function() {
        new L.Hash(map);
      }, 0);
    }
  </script>
</body>
</html>

Note that if you serve the map over HTTPS, you need to add the upgrade-insecure-requests header to convert all HTTP URLs to HTTPS URLs.

Nginx

add_header Content-Security-Policy upgrade-insecure-requests;

Apache

Header always set Content-Security-Policy upgrade-insecure-requests

Step 13 : Use Other Open-Source Map Styles

The following is a list of open-source map styles compatible with OpenMapTiles vector tile schema.

Let me show you how to use these map styles. For example, I download the MapTiler 3D style.

git clone https://github.com/openmaptiles/maptiler-3d-gl-style.git

Then edit the style.json file.

cd maptiler-3d-gl-style/

nano style.json

Find the following lines.

  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}"
    }
  },
  "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",

Change the tileset URL and glyphs URL:

  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://tileserver.example.com/data/v3.json"
    }
  },
  "glyphs": "https://tileserver.example.com/font-family/{fontstack}/{range}.pbf",

Save and close the file. Then upload this style.json file to a web server and create an HTML file.

nano maptiler-3d.html

Content:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Maptiler 3D Style</title>
  <link rel="stylesheet" type="text/css" href="https://tileserver.example.com/mapbox-gl.css" />
  <script src="https://tileserver.example.com/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="https://tileserver.example.com/mapbox.css" />
  <script src="https://tileserver.example.com/mapbox.js"></script>
  <script src="https://tileserver.example.com/leaflet-hash.js"></script>
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
  <h1 style="display:none;">Basic preview</h1>
  <div id='map'></div>
  <script>
    var q = (location.search || '').substr(1).split('&');
    var preference =
      q.indexOf('vector') >= 0 ? 'vector' :
        (q.indexOf('raster') >= 0 ? 'raster' :
          (mapboxgl.supported() ? 'vector' : 'raster'));
    if (preference == 'vector') {
      mapboxgl.setRTLTextPlugin('https://tileserver.example.com/mapbox-gl-rtl-text.js');
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'https://www.example.com/style.json',
        zoom: 5.43,  
        center: [-3.9, 54.5],
        hash: true
      });
      map.addControl(new mapboxgl.NavigationControl());
    } else {
      var map = L.mapbox.map('map', 'https://tileserver.example.com/styles/basic-preview.json', { zoomControl: false });
      new L.Control.Zoom({ position: 'topright' }).addTo(map);
      setTimeout(function() {
        new L.Hash(map);
      }, 0);
    }
  </script>
</body>
</html>

Save and close the file. Here’s how the map looks like: https://www.linuxbabe.com/maps/maptiler-3d.html

Maptiler 3D Style

You might also want to check out other tools provided by OpenMapTiles on Github.

Step 14: Create Custom Styles

You can use maputnik to edit map styles. Make sure it conforms to OpenMapTiles schema.

You need to know the TileServer GL endpoints when editing your style JSON file.

  • TileJSON URL: https://tileserver.example.com/data/v3.json
  • Tiles URLhttps://tileserver.example.com/data/v3/{z}/{x}/{y}.pbf
  • Glyphshttps://tileserver.example.com/font-family/{fontstack}/{range}.pbf

There are two ways to specify Tile URL in the style JSON file.

TileJSON URL:

  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://tileserver.linuxbabe.com/data/v3.json"
    }
  },

Tiles URL:

  "sources": {
    "openmaptiles": {
      "type": "vector",
      "tiles": ["https://tileserver.linuxbabe.com/data/v3/{z}/{x}/{y}.pbf"],
       "attribution": "&copy; OpenStreetMap contributors",
       "minzoom": 0,
       "maxzoom": 14
    }
  },

I recommend using the second method: Tiles URL. Using the TILEJSON URL might cause the NetworkError when attempting to fetch resource error in Firefox.

Note: When using the Tiles URL, you must set maxzoom to 14 like in the above code.

Step 15: Enable HTTP2

To improve map loading performance, you can enable HTTP2 protocol.

Nginx

Simply open the virtual host file and change

listen 443 ssl;

to

listen 443 ssl http2;

Save and close the file. Then reload Nginx.

sudo systemctl reload nginx

Apache

First, you need to enable the HTTP2 module.

sudo a2enmod http2

Then open the SSL virtual host file.

sudo nano /etc/apache2/sites-enabled/tileserver_site-le-ssl.conf

Put the following directive after the opening <VirtualHost *:443> tag.

Protocols h2 http/1.1

Save and close the file. Then restart Apache for the changes to take effect.

sudo systemctl restart apache2

Display Map with MapLibre GL

Maplibre GL is an open-source fork of Mapbox GL. Demo: https://www.linuxbabe.com/maps/maplibre-streets.html

HTML code:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title>vector tile map made with Tegola and Maplibre</title>
         <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
         <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
         <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
         <style>
            body { margin: 0; padding: 0; }
            #map { position: absolute; top: 0; bottom: 0; width: 100%; }
         </style>
   </head>
   <body>
        <div id="map"></div>
        <script>
                var map = new maplibregl.Map({
                container: 'map',
                style:
                        'https://www.linuxbabe.com/maps/mapbox-street-style.json',
                zoom: 5.43,
                center: [-3.9, 54.5]
        });     


        map.on('load', function () {
                  // Add a new vector tile source with ID 'linuxbabe'.
                  map.addSource('linuxbabe', {
                         'type': 'vector',
                         'tiles': [
                              'https://tileserver.linuxbabe.com/data/v3/{z}/{x}/{y}.pbf'
                          ],
                          'minzoom': 6,
                          'maxzoom': 14
                    });
                    map.addLayer(
                       {
                            'id': 'default', // Layer ID
                            'type': 'line',
                            'source': 'linuxbabe', // ID of the tile source created above
                               // Source has several layers. We visualize the one with name 'sequence'.
                            'source-layer': 'sequence',
                            'layout': {
                                      'line-cap': 'round',
                                      'line-join': 'round'
                             },
                            'paint': {
                                       'line-opacity': 0.6,
                                       'line-color': 'rgb(53, 175, 109)',
                                       'line-width': 2
                             }
                      },
                   );
                });

                map.addControl(new maplibregl.NavigationControl());

                //set max zoom level (0-24)
                map.setMaxZoom(19);
        </script>
        </body>
</html>

Integrate Maplibre with Nominatim Geocoder

If you want to provide address search functionality, you can set up a Nominatim geocoding server and integrate it with your map via the Maplibre GL Geocoder plugin.

Add the following lines in HTML header.

  <script src="https://unpkg.com/@maplibre/[email protected]/dist/maplibre-gl-geocoder.min.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/@maplibre/[email protected]/dist/maplibre-gl-geocoder.css" type="text/css" />

Then add the following code in the HTML body, above the </script> tag. Replace nominatim.example.com/nominatim with the URL of your own Nonimatim server.

var geocoder_api = {
    forwardGeocode: async (config) => {
        const features = [];
        try {
            let request =
                'https://nominatim.example.com/nominatim/search?q=' +
                config.query +
                '&format=geojson&polygon_geojson=1&addressdetails=1';
            const response = await fetch(request);
            const geojson = await response.json();
            for (let feature of geojson.features) {
                let center = [
                    feature.bbox[0] +
                    (feature.bbox[2] - feature.bbox[0]) / 2,
                    feature.bbox[1] +
                    (feature.bbox[3] - feature.bbox[1]) / 2
                ];
                let point = {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: center
                    },
                    place_name: feature.properties.display_name,
                    properties: feature.properties,
                    text: feature.properties.display_name,
                    place_type: ['place'],
                    center: center
                };
                features.push(point);
            }
        } catch (e) {
            console.error(`Failed to forwardGeocode with error: ${e}`);
        }

        return {
            features: features
        };
    }
};
map.addControl(
    new MaplibreGeocoder(geocoder_api, {
        maplibregl: maplibregl
    })
);

Display Map with Leaflet

By default, TileServer GL uses Mapbox GL to display maps. Some folks use Leaflet for rendering raster tile maps, but Leaflet doesn’t support vector tiles natively. You need to use the Maplibre GL leaflet plugin. Example map: https://www.linuxbabe.com/maps/leaflet-vector.html

Here’s the code. We need to load the Leaflet and Maplibre GL library in the HTML header, then use Mapbox GL Leaflet to render the map in the HTML body.

<html>
<head>
    <title>Vector map loaded by Leaflet</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

    <!-- Maplibre GL -->
    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script> 
    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />

</head>

<body>
<div id="map"></div>

<script src="https://www.linuxbabe.com/maps/leaflet-maplibre-gl.js"></script>
<script>
var map = L.map('map').setView([54.5, -3.9], 6.4);

var gl = L.maplibreGL({
    style: 'https://www.linuxbabe.com/maps/mapbox-street-style.json'
}).addTo(map);

</script>
</body>
</html>

It’s compatible with the Nomination Geocoder.

Backend Performance Tuning

You use Varnish or MapProxy on the server to cache the tiles, so it will be faster to deliver tiles to clients.

Troubleshooting PostgreSQL Error

Check PostgreSQL status:

sudo systemctl status [email protected]

If you encounter the following error.

FATAL: could not map anonymous shared memory: Cannot allocate memory

It means you allocated too much RAM to PostgreSQL shared_buffers. Edit PostgreSQL config file.

sudo nano /etc/postgresql/15/main/postgresql.conf

Set shared_buffers to a smaller value like 5GB.

shared_buffers = 5GB

Save and close the file. Then restart PostgreSQL.

sudo systemctl restart [email protected]

How to Upgrade PostgreSQL Database Server

When a new version of PostgreSQL comes out, you can upgrade to take advantage of performance improvements. Simply run the following command, and the apt package manager will install the latest version of PostgreSQL from the apt.postgresql.org repository.

sudo apt update; sudo apt upgrade -y

After that, you also need to upgrade existing PostgreSQL clusters. Pro Tip: You should open a GNU Screen session to prevent connection drop because the upgrade will take some time to finish.

screen

Then list current clusters.

sudo pg_lsclusters

Sample output:

Ver Cluster Port Status Owner    Data directory              Log file
14  main    5432 online postgres /var/lib/postgresql/14/main /var/log/postgresql/postgresql-14-main.log
15  main    5433 online postgres /var/lib/postgresql/15/main /var/log/postgresql/postgresql-15-main.log

As you can see, PostgreSQL 14 is using the default 5432 port. PostgreSQL 15 is using port 5433. Stop PostgreSQL server.

sudo systemctl stop postgresql

Let’s check the cluster status again with: sudo pg_lsclusters. They are all down.

Ver Cluster Port Status Owner    Data directory              Log file
14  main    5432 down   postgres /var/lib/postgresql/14/main /var/log/postgresql/postgresql-14-main.log
15  main    5433 down   postgres /var/lib/postgresql/15/main /var/log/postgresql/postgresql-15-main.log

Rename the cluster name of PostgreSQL 15 from main to latest_stable.

sudo pg_renamecluster 15 main latest_stable

Then we need to shrink the PostgreSQL shared_buffer.

sudo nano /etc/postgresql/14/main/postgresql.conf

Decrease the value to prevent out-of-memory problem during upgrade. For example, I reduce the value from 15GB to 5GB.

shared_buffers = 5GB

Save and close the file.

Next, upgrade the old PostgreSQL 14 cluster.

sudo pg_upgradecluster 14 main

Start PostgreSQL server.

sudo systemctl start postgresql

Now check if your application is working. If it’s working well, then drop the old cluster.

sudo pg_dropcluster --stop 14 main

Check cluster status again:

sudo pg_lsclusters

If the upgrade is successful, you can change the shared_buffer back to the original value in the /etc/postgresql/15/main/postgresql.conf file. Don’t forget to restart PostgreSQL.

If the upgrade procedure can’t stop PostgreSQL,

pg_ctl: server does not shut down
Error: Could not stop target cluster

then you need to run the following command to stop PostgreSQL.

pkill postgres

Then edit PostgreSQL 14 config file.

sudo nano /etc/postgresql/14/main/postgresql.conf

Set the listen port to 5432.

port = 5432

Save and close the file. Then start PostgreSQL 14.

sudo systemctl restart [email protected]

Run the following command to make sure you can log into PostgreSQL console.

sudo -u postgres -i psql

Press Ctrl+D to log out.

Restart TileServer GL.

sudo systemctl restart openstreetmap

Next Step

For more information on TileServer GL, please check its documentation.

You may also want to set up Nominatim geocoding server to provide address lookup functionality.

I hope this article helped you set up TileServer GL Vector Tile Server on Ubuntu 22.04. As always, if you found this post useful, then subscribe to our free newsletter to get more tips and tricks. Take care 🙂

Rate this tutorial
[Total: 4 Average: 5]

31 Responses to “Fast Scalable Basemap with TileServer GL/OpenMapTiles (Ubuntu 22.04)

  • Xiao Guoan (Admin)
    4 months ago

    If you encounter the following error:

    onnection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"

    Then you need to reset osm password.

    sudo -u postgres -i psql
    
    ALTER USER osm WITH PASSWORD 'secret_password';
    
    \q;
    
    • I get this error AFTER resetting osm password :

      [email protected]:~/openmaptiles# sudo -u postgres -i psql
      psql (15.1 (Ubuntu 15.1-1.pgdg22.04+1))
      Type "help" for help.
      
      postgres=# ALTER USER osm WITH PASSWORD 'osmpwd';
      ALTER ROLE
      postgres=# \q
      [email protected]:~/openmaptiles# sudo make import-data
      Starting postgres docker compose target using default image (no recreate if exists)
      Wait for PostgreSQL to start...
      docker-compose run --rm --user=0:0 openmaptiles-tools pgwait
      Creating openmaptiles_openmaptiles-tools_run ... done
      docker-compose  run --rm --user=0:0 import-data
      Creating openmaptiles_import-data_run ... done
      Importing Natural Earth into 172.17.0.1:5432/openstreetmap...
      ERROR 1: PQconnectdb failed.
      connection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"
      connection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"
      
      ERROR 1: PQconnectdb failed.
      connection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"
      connection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"
      
      ERROR 1: PQconnectdb failed.
      connection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"
      connection to server at "172.17.0.1", port 5432 failed: FATAL:  password authentication failed for user "osm"
      
      ERROR 1: PostgreSQL driver doesn't currently support database creation.
      Please create database with the `createdb' command.
      ERROR 1: Postgresql driver failed to create PG:dbname=openstreetmap user=osm host=172.17.0.1 password=XXXXXXXXXXXX port=5432
      ERROR: 1
      make: *** [Makefile:439: import-data] Error 1
      
      
      • Solved

        It was a problem of mismatching between PGPASSWORD ‘s in ~/.osmenv and in .env

  • I get this error whenever I execute this command in step 8: sudo make generate-tiles-pg

    make: *** [Makefile:441: generate-tiles-pg] Error 1
    

    I can’t seem to get past this step. Any suggestion?

    Server Info:

     System load:                      0.08447265625
      Usage of /:                       13.2% of 1.51TB
      Memory usage:                     26%
      Swap usage:                       0%
      Processes:                        179
      Users logged in:                  0
      IPv4 address for br-7977ef05852f: 172.18.0.1
      IPv4 address for br-8e2c19316be3: 172.19.0.1
      IPv4 address for docker0:         172.17.0.1
      IPv4 address for eth0:            
      IPv6 address for eth0:            
      IPv4 address for eth1:            
    
  • When running ‘sudo make import-wikidata’, I meet this error. Could you help me?

    • Xiao Guoan (Admin)
      3 months ago

      “Connection reset by peer” means your network condition is unstable. Is your server located in China? The connection could be blocked by GFW (Great Firewall of China).

      • Thanks for your suggestion. Yes, my server is located in China, may I use vpn to solve it ?

    • Xiao Guoan (Admin)
      3 months ago

      Yes, you can use VPN to fix this error.

  • Hello, thank you for your work!

    Save and close the file. Then upload this style.json file to a web server and create an HTML file.

    – in which directory?

    • Xiao Guoan (Admin)
      3 months ago

      Typically, you should create an HTML file on another web server to fetch the vector tiles.

      Your website is the entry point for visitors to load the map in the web browser. That’s is to say, your visitor should load the map via

      https://yourwebsite.com/maptiler-3d.html

      not

      https://tileserver.examle.com/maptiler-3d.html

      so you should upload the style.json file to the web server that hosts your website.

      If your website uses /var/www/html/ as web root directory, then you can put the style.json file under /var/www/html/ and also create the HTML file under this directory.

      The web root directory could be at another place. You need to check your web server configuration file (such as /etc/nginx/conf.d/website.conf) to find out.

      Of course, if your website is hosted on the tile server, then you should create the HTML file on the tile server, but you still need to know the web root directory of your website.

  • I’m getting this error in the Step 8 : … gave up waiting for Postgres: PGHOST=172.17.0.1 PGDATABASE=openstreetmap PGUSER=osm PGPORT=5432 pg_isready
    ERROR: 1

    This is what I did:

    [email protected]:~# git clone https://github.com/openmaptiles/openmaptiles.git
        Cloning into 'openmaptiles'...
        remote: Enumerating objects: 7593, done.
        remote: Counting objects: 100% (492/492), done.
        remote: Compressing objects: 100% (419/419), done.
        remote: Total 7593 (delta 109), reused 416 (delta 73), pack-reused 7101
        Receiving objects: 100% (7593/7593), 48.20 MiB | 5.89 MiB/s, done.
        Resolving deltas: 100% (5104/5104), done.
        [email protected]:~# cd openmaptiles/
        [email protected]:~/openmaptiles# 
    
        
    [email protected]:~/openmaptiles# sudo make
        docker-compose run --rm --user=0:0 openmaptiles-tools bash -c \
    	    'generate-tm2source openmaptiles.yaml > build/openmaptiles.tm2source/data.yml'
        Creating openmaptiles_openmaptiles-tools_run ... done
        docker-compose run --rm --user=0:0 openmaptiles-tools bash -c \
    	    'generate-imposm3 openmaptiles.yaml > build/mapping.yaml'
        Creating openmaptiles_openmaptiles-tools_run ... done
        docker-compose run --rm --user=0:0 openmaptiles-tools bash -c \
    	    'generate-sql openmaptiles.yaml --dir ./build/sql \
    	    && generate-sqltomvt openmaptiles.yaml \
    						     --key --gzip --postgis-ver 3.0.1 \
    						     --function --fname=getmvt >> ./build/sql/run_last.sql'
        Creating openmaptiles_openmaptiles-tools_run ... done
        Created 14 sql files for parallel execution at build/sql
        docker-compose run --rm --user=0:0 openmaptiles-tools bash -c 'style-tools recompose openmaptiles.yaml build/style/style.json \
    	    style/style-header.json && \
    	    spritezero build/style/sprite /style/icons && spritezero --retina build/style/[email protected] /style/icons'
        Creating openmaptiles_openmaptiles-tools_run ... done
        [email protected]:~/openmaptiles# 
        
    
    [email protected]:~/openmaptiles# sudo make
        docker-compose run --rm --user=0:0 openmaptiles-tools bash -c 'style-tools recompose openmaptiles.yaml build/style/style.json \
    	    style/style-header.json && \
    	    spritezero build/style/sprite /style/icons && spritezero --retina build/style/[email protected] /style/icons'
        Creating openmaptiles_openmaptiles-tools_run ... done
        [email protected]:~/openmaptiles# 
        
        docker-compose.yml : 
        
          GNU nano 6.2                                                          docker-compose.yml                                                                   
        # This version must match the MAKE_DC_VERSION value below
        version: "3"
        
        volumes:
          pgdata:
        
        networks:
          postgres:
            driver: bridge
        
        services:
        
          postgres:
            image: "${POSTGIS_IMAGE:-openmaptiles/postgis}:${TOOLS_VERSION}"
            # Use "command: postgres -c jit=off" for PostgreSQL 11+ because of slow large MVT query processing
            volumes:
              - pgdata:/var/lib/postgresql/data
            networks:
              - postgres
            ports:
              - "2345"
            env_file: .env
            environment:
              # postgress container uses old variable names
              POSTGRES_DB: ${PGDATABASE:-openmaptiles}
              POSTGRES_USER: ${PGUSER:-openmaptiles}
              POSTGRES_PASSWORD: ${PGPASSWORD:-openmaptiles}
              PGPORT: ${PGPORT:-5432}
    
    [email protected]:~/openmaptiles# cat .env
        # This file defines default environment variables for all images
        
        # Layers definition and meta data
        TILESET_FILE=openmaptiles.yaml
        
        # Use 3-part patch version to ignore patch updates, e.g. 7.0.0
        TOOLS_VERSION=7.0
        
        # Make sure these values are in sync with the ones in .env-postgres file
        PGDATABASE=openstreetmap
        PGUSER=osm
        PGPASSWORD=postgrespwd
        PGHOST=172.17.0.1
        PGPORT=5432
        
        # BBOX may get overwritten by the computed bbox of the specific area:
        #   make generate-bbox-file
        # By default, the Makefile will use the content of data/$(area).bbox file if it exists.
        BBOX=-180.0,-85.0511,180.0,85.0511
        
        # Which zooms to generate with   make generate-tiles-pg
        MIN_ZOOM=0
        MAX_ZOOM=14
        
        # `MID_ZOOM` setting only works with `make generate-tiles-pg` command.  Make sure MID_ZOOM :vi=\E[?25l:ve=\E[34h\E[?25h:vs=\E[34l:ti=\E[?1049h:te=\E[?1049l:us=\E[4m:ue=\E[24m:so=\E[3m:se=\E[23m:mb=\E[5m:md=\E[1m:mh=\E[2m:mr=\E[7m:me=\E[m:ms:Co#8:pa#64:AF=\E[3%dm:AB=\E[4%dm:op=\E[39;49m:AX:vb=\Eg:G0:as=\E(0:ae=\E(B:ac=\140\140aaffggjjkkllmmnnooppqqrrssttuuvvwwxxyyzz{{||}}~~..--++,,hhII00:po=\E[5i:pf=\E[4i:Km=\E[<:k0=\E[10~:k1=\EOP:k2=\EOQ:k3=\EOR:k4=\EOS:k5=\E[15~:k6=\E[17~:k7=\E[18~:k8=\E[19~:k9=\E[20~:k;=\E[21~:F1=\E[23~:F2=\E[24~:kB=\E[Z:kh=\E[1~:@1=\E[1~:kH=\E[4~:@7=\E[4~:kN=\E[6~:kP=\E[5~:kI=\E[2~:kD=\E[3~:ku=\EOA:kd=\EOB:kr=\EOC:kl=\EOD:km:
        LC_ADDRESS=C.UTF-8
        LC_NAME=C.UTF-8
        PGPASSWORD=postgrespwd
        WINDOW=0
        LC_MONETARY=C.UTF-8
        PWD=/root/openmaptiles
        LOGNAME=root
        XDG_SESSION_TYPE=tty
        MOTD_SHOWN=pam
        HOME=/root
        LC_PAPER=C.UTF-8
        LANG=C.UTF-8
        LS_COLORS=rs=0:di=01;34:ln=01;36:mh=00:pi=40;33:so=01;35:do=01;35:bd=40;33;01:cd=40;33;01:or=40;31;01:mi=00:su=37;41:sg=30;43:ca=30;41:tw=30;42:ow=34;42:st=37;44:ex=01;32:*.tar=01;31:*.tgz=01;31:*.arc=01;31:*.arj=01;31:*.taz=01;31:*.lha=01;31:*.lz4=01;31:*.lzh=01;31:*.lzma=01;31:*.tlz=01;31:*.txz=01;31:*.tzo=01;31:*.t7z=01;31:*.zip=01;31:*.z=01;31:*.dz=01;31:*.gz=01;31:*.lrz=01;31:*.lz=01;31:*.lzo=01;31:*.xz=01;31:*.zst=01;31:*.tzst=01;31:*.bz2=01;31:*.bz=01;31:*.tbz=01;31:*.tbz2=01;31:*.tz=01;31:*.deb=01;31:*.rpm=01;31:*.jar=01;31:*.war=01;31:*.ear=01;31:*.sar=01;31:*.rar=01;31:*.alz=01;31:*.ace=01;31:*.zoo=01;31:*.cpio=01;31:*.7z=01;31:*.rz=01;31:*.cab=01;31:*.wim=01;31:*.swm=01;31:*.dwm=01;31:*.esd=01;31:*.jpg=01;35:*.jpeg=01;35:*.mjpg=01;35:*.mjpeg=01;35:*.gif=01;35:*.bmp=01;35:*.pbm=01;35:*.pgm=01;35:*.ppm=01;35:*.tga=01;35:*.xbm=01;35:*.xpm=01;35:*.tif=01;35:*.tiff=01;35:*.png=01;35:*.svg=01;35:*.svgz=01;35:*.mng=01;35:*.pcx=01;35:*.mov=01;35:*.mpg=01;35:*.mpeg=01;35:*.m2v=01;35:*.mkv=01;35:*.webm=01;35:*.webp=01;35:*.ogm=01;35:*.mp4=01;35:*.m4v=01;35:*.mp4v=01;35:*.vob=01;35:*.qt=01;35:*.nuv=01;35:*.wmv=01;35:*.asf=01;35:*.rm=01;35:*.rmvb=01;35:*.flc=01;35:*.avi=01;35:*.fli=01;35:*.flv=01;35:*.gl=01;35:*.dl=01;35:*.xcf=01;35:*.xwd=01;35:*.yuv=01;35:*.cgm=01;35:*.emf=01;35:*.ogv=01;35:*.ogx=01;35:*.aac=00;36:*.au=00;36:*.flac=00;36:*.m4a=00;36:*.mid=00;36:*.midi=00;36:*.mka=00;36:*.mp3=00;36:*.mpc=00;36:*.ogg=00;36:*.ra=00;36:*.wav=00;36:*.oga=00;36:*.opus=00;36:*.spx=00;36:*.xspf=00;36:
        PGUSER=osm
        SSH_CONNECTION=109.116.160.244 35872 194.60.201.224 22
        LESSCLOSE=/usr/bin/lesspipe %s %s
        XDG_SESSION_CLASS=user
        LC_IDENTIFICATION=C.UTF-8
        TERM=screen.xterm-256color
        LESSOPEN=| /usr/bin/lesspipe %s
        USER=root
        SHLVL=2
        LC_TELEPHONE=C.UTF-8
        PGDATABASE=openstreetmap
        LC_MEASUREMENT=C.UTF-8
        XDG_SESSION_ID=140
        XDG_RUNTIME_DIR=/run/user/0
        SSH_CLIENT=109.116.160.244 35872 22
        PGHOST=172.17.0.1
        LC_TIME=C.UTF-8
        PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
        STY=52236.pts-0.vmi1046457
        SSH_TTY=/dev/pts/0
        LC_NUMERIC=C.UTF-8
        OLDPWD=/root
        _=/usr/bin/env
    
    Step 8: Import the Map Data to PostgreSQL  : 
        
        [email protected]:~/openmaptiles# sudo make import-data
        Starting postgres docker compose target using default image (no recreate if exists)
        Creating openmaptiles_postgres_1 ... done
        Wait for PostgreSQL to start...
        docker-compose run --rm --user=0:0 openmaptiles-tools pgwait
        Creating openmaptiles_openmaptiles-tools_run ... done
        ... gave up waiting for Postgres:   PGHOST=172.17.0.1 PGDATABASE=openstreetmap PGUSER=osm PGPORT=5432 pg_isready
        ERROR: 1
        make: *** [Makefile:331: start-db] Error 1
        [email protected]:~/openmaptiles# 
        
        [email protected]:~/openmaptiles# systemctl status postgres
        Unit postgres.service could not be found.
        [email protected]:~/openmaptiles# sudo systemctl start postgresql
        [email protected]:~/openmaptiles# systemctl status postgresql
        ● postgresql.service - PostgreSQL RDBMS
             Loaded: loaded (/lib/systemd/system/postgresql.service; enabled; vendor preset: enabled)
             Active: active (exited) since Tue 2022-10-18 13:33:54 CEST; 53min ago
            Process: 50104 ExecStart=/bin/true (code=exited, status=0/SUCCESS)
           Main PID: 50104 (code=exited, status=0/SUCCESS)
                CPU: 2ms
        
        Oct 18 13:33:54 vmi1046457.contaboserver.net systemd[1]: Starting PostgreSQL RDBMS...
        Oct 18 13:33:54 vmi1046457.contaboserver.net systemd[1]: Finished PostgreSQL RDBMS.
        [email protected]:~/openmaptiles# sudo make import-data
        Starting postgres docker compose target using default image (no recreate if exists)
        Wait for PostgreSQL to start...
        docker-compose run --rm --user=0:0 openmaptiles-tools pgwait
        Creating openmaptiles_openmaptiles-tools_run ... done
        ... gave up waiting for Postgres:   PGHOST=172.17.0.1 PGDATABASE=openstreetmap PGUSER=osm PGPORT=5432 pg_isready
        ERROR: 1
        make: *** [Makefile:331: start-db] Error 1
    

    What am I doing wrongly? How to make it work?

    • Xiao Guoan (Admin)
      1 month ago

      You didn’t follow step 6 to make PostgreSQL listen on 172.17.0.1 and allow connection to this IP address?

  • I follow all steps but still meet this error, could you help me? Thanks a lot.

    • Xiao Guoan (Admin)
      1 month ago

      First, make sure PostgreSQL is listening on 172.17.0.1. List the PostgreSQL listening addresses:

      sudo ss -lnpt | grep postgres

      You should see that PostgreSQL listens on both 127.0.0.1 and 172.17.0.1.

      LISTEN 0      244            172.17.0.1:5432       0.0.0.0:*    users:(("postgres",pid=19767,fd=6))                                           
      LISTEN 0      244             127.0.0.1:5432       0.0.0.0:*    users:(("postgres",pid=19767,fd=5))
      

      Then configure UFW to allow connection from 172.17.0.0/24 and 172.18.0.0/24.

      sudo ufw allow ssh
      sudo ufw insert 1 allow in from 172.17.0.0/24
      sudo ufw insert 1 allow in from 172.18.0.0/24
      sudo ufw enable
      sudo systemctl restart ufw
      

      Run the import command again.

      sudo make import-data
  • Xiao Guoan (Admin)
    1 month ago

    If you encounter the following error, it means you need to upgrade PostgreSQL from version 14 to version 15. Instructions are available at the end of this article.

    could not open extension control file "/usr/share/postgresql/14/extension/postgis.control": No such file or directory
  • How long can reasonably be the phase `import-sql` for the `whole-map` with a `Cloud VPS` (Contabo) with `10 vCPU Cores` + `60 GB RAM` + `2 TB SSD`?

    Till now, no error messages. But this sub-phase, the `import.sql` has already been running for two days

    psql:/sql/parallel/transportation__transportation_name.sql:333: NOTICE: schema “transportation” does not exist, skipping
    DROP TRIGGER
    Time: 0.172 ms
    SELECT 51901769
    Time: 35645735.344 ms (09:54:05.735)
    CREATE INDEX
    Time: 366074.631 ms (06:06.075)
    CREATE INDEX
    Time: 236958.175 ms (03:56.958)
    CREATE INDEX
    Time: 200373.793 ms (03:20.374)
    CREATE INDEX
    Time: 290625.909 ms (04:50.626)
    CREATE TABLE
    Time: 248.791 ms
    INSERT 0 11522723

    • Same here with same contabo config, but have been running for 6 days !?

  • Can we skip this step ?

    sudo make generate-tiles-pg
    

    Because I tried 5 times, because I got every time :

    Error: Copy operation timed out
        at Timeout. (/usr/lib/node_modules/@mapbox/tilelive/lib/tilelive.js:392:22)
        at listOnTimeout (internal/timers.js:557:17)
        at processTimers (internal/timers.js:500:7)
    ERROR: 1
    make: *** [Makefile:461: generate-tiles-pg] Error 1
    
  • xiaofeng
    4 weeks ago

    I have successfully built my own vector tile server. I want to add some elements in the page but I cannot find where its HTML is. Could you help me?

    • Xiao Guoan (Admin)
      4 weeks ago

      Click the “vector” or “raster” link and it will show you an example map. Then you can prepend view-source: to the begining of the URL to view the HTML source code.

      There’s no need to alter the HTML code of the example map on the tileserver. You just copy the HTML code, change it as you see fit and upload it to your web server where it will show your map.

      • xiaofeng
        4 weeks ago

        I clicked the “Viewer” and copied its HTML code. Then I changed the address of js or css in the code such as “http://47.122.xx.xx/maplibre-gl.js” but I found it can’t show the map.

    • Xiao Guoan (Admin)
      4 weeks ago

      Check your browser console to find out what went wrong.

  • Hey,
    Great guide! I’ve got this sorted successfully, but I wanted to know how we could go about performing updates to the map data? I’ve seen a few updates using renderd, but we haven’t used that so far here.

    I’m pretty sure I could just re-run the whole of step 8 (could I?) – but I’m sure there are faster methods?

    What would you recommend?

    Thanks!

    • Xiao Guoan (Admin)
      2 weeks ago

      Renderd doesn’t apply here, as it’s used for raster tile server.

      All you need to do is follow step 8 again to download new map data and generate a new .mbtiles file, then restart the tile server.

  • Step 9:

    your-server-ip-address:8080
    

    Output: This site can’t be reached

    I didn’t enable `ufw` and set any rules because every time I enable ufw into Contabo Server, I cannot connect to server anymore via SSH

    So…since there is no firewall set at the moment…. What might be the root cause of “This site can’t be reached” ?

    • This is the current situation:

      [email protected]:~# sudo nmap 194.x.x.x
      Starting Nmap 7.80 ( https://nmap.org ) at 2022-11-23 11:08 CET
      Nmap scan report for vmi1046457.contaboserver.net (194.x.x.x)
      Host is up (0.000062s latency).
      Not shown: 997 closed ports
      PORT     STATE    SERVICE
      22/tcp   open     ssh
      80/tcp   open     http
      8080/tcp filtered http-proxy
      
      Nmap done: 1 IP address (1 host up) scanned in 3.41 seconds
      
      

      And

      [email protected]:~# sudo netstat -plant | grep 8080
      tcp        0      0 0.0.0.0:8080            0.0.0.0:*               LISTEN      188808/docker-proxy 
      
      

      If I put in the browser address bar: http://194.x.x.x/ -> I correctly get:

          Apache2 Default Page 
      

      but
      If If put: http://194.x.x.x:8080/ -> I get :

          This site can’t be reached194.x.x.x refused to connect.
          Try:
          Checking the connection
          Checking the proxy and the firewall
      

      How to make it work?

      Looking forward to your kind help

      • I changed from `8080:80` to `8080:8080` :

            [email protected]:~# sudo docker run --restart=always -it -d -v /root/openmaptiles/data:/data -p 8080:8080 maptiler/tileserver-gl
            3219b5dcd97a182b101a6fa06f05eefb13e7f0b573b58b3ce4ffe9394d4469ee
            [email protected]:~# docker ps
            CONTAINER ID   IMAGE                    COMMAND                  CREATED         STATUS                            PORTS                    NAMES
            3219b5dcd97a   maptiler/tileserver-gl   "/usr/src/app/docker…"   9 seconds ago   Up 3 seconds (health: starting)   0.0.0.0:8080->8080/tcp   adoring_shamir
            [email protected]:~# docker ps
            CONTAINER ID   IMAGE                    COMMAND                  CREATED          STATUS                             PORTS                    NAMES
            3219b5dcd97a   maptiler/tileserver-gl   "/usr/src/app/docker…"   35 seconds ago   Up 28 seconds (health: starting)   0.0.0.0:8080->8080/tcp   adoring_shamir
        

        and now it works fine

        I suggest you, Xiao, to update `Step 9` .

        The correct way is :

        sudo docker run --restart=always -it -d -v /home/username/openmaptiles/data:/data -p 8080:8080 maptiler/tileserver-gl
        
  • Andrew Calcutt
    2 weeks ago

    Just an FYI, as found by Raphy above…

    As of TileServer-GL v4.2.0 , the default docker port tileserver runs on internally has changed from 80 to 8080.

    This means the command to run is now
    docker run –rm -it -v $(pwd):/data -p 8080:8080 maptiler/tileserver-gl

    *note ‘8080:80’ is now ‘8080:8080’ *

  • Ioan Tiba
    1 week ago

    Hello. Thanks a lot for the tutorial. Everything went perfectly.
    You gave an example in step “Step 13 : Use Other Open-Source Map Styles” how to use “MapTiler 3D style.” Could you please tell me how I could use “OSM Bright” but be on the same server? And, in which folder should the different styles that I would like to use be placed. I tried to put the osm-bright folder in “openmaptiles/data” but it doesn’t seem to work.

  • It’s already almost two days that in `sudo make import-sql` of `Step 8` for `planet-latest` it is stuck here:

    Time: 76063.090 ms (01:16.063)
    psql:/sql/parallel/transportation__transportation_name.sql:691: NOTICE:  relation "osm_transportation_merge_linestring_gen_z7_geometry_idx" already exists, skipping
    CREATE INDEX
    Time: 3.709 ms
    psql:/sql/parallel/transportation__transportation_name.sql:693: NOTICE:  relation "osm_transportation_merge_linestring_gen_z7_id_idx" already exists, skipping
    CREATE INDEX
    Time: 0.509 ms
    psql:/sql/parallel/transportation__transportation_name.sql:696: NOTICE:  relation "osm_transportation_merge_linestring_gen_z6_geometry_idx" already exists, skipping
    CREATE INDEX
    Time: 0.265 ms
    psql:/sql/parallel/transportation__transportation_name.sql:698: NOTICE:  relation "osm_transportation_merge_linestring_gen_z6_id_idx" already exists, skipping
    CREATE INDEX
    
    

    I’m using the same Hardware Settings with the same Cloud Infrastructure Provider

    What does that mean?

Leave a Comment

  • Comments with links are moderated by admin before published.
  • Your email address will not be published.
  • Use <pre> ... </pre> HTML tag to quote the output from your terminal/console.
  • Please use the community (https://community.linuxbabe.com) for questions unrelated to this article.
  • I don't have time to answer every question. Making a donation would incentivize me to spend more time answering questions.

The maximum upload file size: 2 MB. You can upload: image. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop file here