I’ve worked with maps on the web for the past year or so, using maplibre-gl as my library of choice, this library supports vector maps, which in my opinion feel much better than usual rasterized maps. Unfortunately, there is no freely available tile server for vector tiles, which brought me to host my own.

The process is very simple, I host them in both a 4€/month Hetzner VPS, and in my closet home server.

The setup

This tutorial assumes very basic knowledge of Linux.

  1. Have docker installed, there are a million tutorials out there, just google it.

  2. Figure out which area you want to host from Geofabrik, in my case I care about Portugal.

  3. cd to the folder where you want to store your tiles and run:

    docker run -v "$(pwd)/data":/data ghcr.io/onthegomap/planetiler:latest --download --area=portugal

This will download the map data and parse it into an easy to serve format in data/output.mbtiles. This takes 2~ minutes on my closet server, it will take longer if you chose a larger area.

  1. In the same folder run:
    docker run --rm -it -v "$(pwd)/data":/data -p 8080:8080 maptiler/tileserver-gl -p 8080

This will start a server on port 8080 serving the tiles.

  1. Optionally setup a reverse proxy to serve the tiles on a domain, I use Nginx, but you can use whatever you want, and if you do not want to serve them on a domain, feel free to skip this.

  2. In your app, init maplibre-gl as so, substituting the address for your own:

    var map = new maplibregl.Map({
        container: 'map', // container id
        style: '{your_address}/styles/basic-preview/style.json', // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 1 // starting zoom
    });