Getting started

1. Download Tegola

Choose the binary that matches the operating system Tegola will run on. Quick links are available below for your convenience:

Additional binaries for other operating systems and versions are here.

Find the Tegola file that was downloaded and move it into a fresh directory. Rename this file tegola.

2. Set up a data provider

Tegola needs geospatial data to run. Currently, Tegola supports PostGIS which is a geospatial extension for PostgreSQL. If you don’t have PostGIS installed, download PostGIS.

You’ll need to load your data provider with data. For your convenience, you can download PostGIS data for Bonn, Germany. Unzip this archive to extract the file bonn_osm.sql.

Create a new database named bonn, and use a restore command to import the unzipped sql file into the database. Documentation can be found here under the section titled “Restoring the dump”. The command should look something like this:

psql bonn < bonn_osm.sql

To enable the Tegola application to connect to the database, create a database user named tegola and grant the privileges required to read the tables in the public schema of the bonn database, using these commands:

psql -c "CREATE USER tegola;"
psql -d bonn -c "GRANT SELECT ON ALL TABLES IN SCHEMA public TO tegola;"

3. Create a configuration file

Tegola utilizes a single configuration file to coordinate with data provider(s). This configuration file is written in TOML format.

Create your configuration file in the same directory as the Tegola binary and name it config.toml. Next, copy and paste the following into this file:

port = ":8080"

# register data providers
name = "bonn"           # provider name is referenced from map layers
type = "postgis"        # the type of data provider. currently only supports postgis
host = "localhost"      # postgis database host
port = 5432             # postgis database port
database = "bonn"       # postgis database name
user = "tegola"         # postgis database user
password = ""           # postgis database password
srid = 3857             # The default srid for this provider. If not provided it will be WebMercator (3857)

  name = "road"
  geometry_fieldname = "wkb_geometry"
  id_fieldname = "ogc_fid"
  sql = "SELECT ST_AsBinary(wkb_geometry) AS wkb_geometry, name, ogc_fid FROM all_roads_3857 WHERE wkb_geometry && !BBOX!"

  name = "main_roads"
  geometry_fieldname = "wkb_geometry"
  id_fieldname = "ogc_fid"
  sql = "SELECT ST_AsBinary(wkb_geometry) AS wkb_geometry, name, ogc_fid FROM main_roads_3857 WHERE wkb_geometry && !BBOX!"

  name = "lakes"
  geometry_fieldname = "wkb_geometry"
  id_fieldname = "ogc_fid"
  sql = "SELECT ST_AsBinary(wkb_geometry) AS wkb_geometry, name, ogc_fid FROM lakes_3857 WHERE wkb_geometry && !BBOX!"

name = "zoning"

  provider_layer = "bonn.road"
  min_zoom = 10
  max_zoom = 20

  provider_layer = "bonn.main_roads"
  min_zoom = 5
  max_zoom = 20

  provider_layer = "bonn.lakes"
  min_zoom = 5
  max_zoom = 20

Note: This configuration file is specific to the Bonn data provided in step 2. If you’re using another dataset, reference the Configuration Documentation.

4. Start Tegola

Navigate to the Tegola directory in your computer’s terminal and run this command:

./tegola --config=config.toml

You should see a message confirming the config file load and Tegola being started on port 8080. If your computer’s port 8080 is being used by another process, change the port in the config file to an open port.

5. Create an HTML page

Tegola delivers geospatial vector tile data to any requesting client. For simplicity, we’ll be setting up a basic HTML page as our client that will display the rendered map. We’ll be using the OpenLayers client side library to display and style the vector tile content.

Create a new directory called static in the same directory as the Tegola binary. In static, create a new HTML file called index.html, copy in the contents below, and open in a browser:

<!DOCTYPE html>
    <title>Tegola Sample</title>
    <link rel="stylesheet" href="" type="text/css">
    <script src=""></script>
      #map {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #f8f4f0;
    <div id="map"></div>
      var map = new ol.Map({
        layers: [
          new ol.layer.VectorTile({
            source: new ol.source.VectorTile({
              attributions: '© <a href="">Mapbox</a> ' +
              '© <a href="">' +
              'OpenStreetMap contributors</a>',
              format: new ol.format.MVT(),
              tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
              tilePixelRatio: 16,
        target: 'map',
        view: new ol.View({
          center: [790793, 6574927], //coordinates the map will center on initially
          zoom: 14

In your browser, navigate to http://localhost:8080. If everything was successful, you should see a map:

Bonn, Germany