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.