Koop PostGIS Vector Tiles

I introduced the Koop PostGIS provider from a developer perspective in a previous post where the output is GeoServices. This post will guide us through installing a Koop service with support for PostGIS input and Vector Tiles as an output format.

Update 09/12/2021

Replaced ArcGIS Oceans Basemap with Dark Gray Vector Basemap in the client javascript example.

Install

Koop providers require you to first install Koop. You can add koop-provider-pg to your Koop server dependencies by installing it with npm:

1
2
3
4
5
6
7
8
9
10
11
12
# install koop cli using npm
$ npm install -g @koopjs/cli

# create a new koop app
$ koop new app pg-koop

# cd into the pg-koop app
$ cd pg-koop

# install provider
$ koop add provider koop-provider-pg

This will allow you to serve your PostGIS data as GeoServices. You can add @koopjs/output-vector-tiles to generate pbf vector tiles as output:

1
$ koop add output @koopjs/output-vector-tiles

Start the Koop server

1
2
# start koop server
$ koop serve

Vector Tiles

The server will now support both GeoServices and Vector Tiles as output formats to your PostGIS input data. Below is a list of the output routes for vector tiles:

1
2
3
4
5
6
7
8
9
10
# :id = ${schema}.$(table)

"VectorTileServer" output routes for the "pg" provider Methods
--------------------------------------------------------------------------- ---------
/pg/:id/VectorTileServer/:z([0-9]+)/:x([0-9]+)/:y([0-9]+).pbf GET
/pg/:id/VectorTileServer/tiles.json GET
/pg/rest/services/:id/VectorTileServer/:z([0-9]+)/:x([0-9]+)/:y([0-9]+).pbf GET
/pg/rest/services/:id/VectorTileServer GET, POST
/pg/rest/services/:id/VectorTileServer GET, POST
/pg/rest/services/:id/VectorTileServer/resources/styles/root.json GET

Your data can now be viewed in clients that support Vector Tiles. Below is an example using ArcGIS API for Javascript creating a VectorTileLayer class with the service URL to display the data. Replace ${schema}.${table} with schema.table from your PostGIS db to view:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
require(["esri/Map", "esri/views/MapView", "esri/layers/VectorTileLayer"], function(
Map,
MapView,
VectorTileLayer
) {
// Create a Map
const map = new Map({
basemap: "dark-gray-vector"
});
// Make map view and bind it to the map
var view = new MapView({
container: "viewDiv",
map: map,
center: [-122.31082,47.60606],
zoom: 12
});
// add vector tile layer from pg-koop
var tileLayer = new VectorTileLayer({
url:
"http://localhost:8080/pg/rest/services/${schema}.${table}/VectorTileServer"
});
map.add(tileLayer);
});

Generating the following ouput of PostGIS point data over the Dark Gray Vector Basemap

Esri JS

You can view the example in the Koop PostGIS provider source.