Search code examples
expressmapboxpostgisvector-tilesfeature-clustering

How to receive tile data from ClusterBuster vector tile server in the sample example?

Summary

Seems the guys did a great work with the built-in filtering, clustering and caching on the ClusterBuster vector tile server. I'm really excited about this project that looks very promising and i'm eager to try it!

I'm working on a project on plotting Deck.gl layers (MVTLayer) on top of Google Maps from a vector tile server through their integration. I want to try to integrate and to serve from ClusterBuster server some clustered points saved in PostGIS.

Expected result:

Actual result:

  • Provided sample example not working (points not showing on map, neither on Mapbox, nor on Google Maps with Deck.gl).

My attempts

I tried building and running the example provided but somehow, i'm not able to do this.

I ran the provided express server clusterbuster/example/express.ts and for frontend tried with the provided mapbox example from clusterbuster/example/mapbox.html (with my mapbox token) but nothing appears on mapbox map (nor on Google maps with my Deck.gl example).

As stated in the clusterbuster/example/readme.md i created an .env file with PostGIS connections settings.

After running the following commands:

yarn
yarn start

i get this output:

C:\zFVStuff\Google Maps - Deck.gl\_Servers\ClusterBuster\clusterbuster-master> yarn start
yarn run v1.22.4
$ yarn build && ts-node example/express.ts
$ rollup --config rollup.config.js

./lib/index.ts → dist/index.d.ts...
created dist/index.d.ts in 5.7s

./lib/index.ts → dist/index.js...
created dist/index.js in 5.1s
attempting to create supporting SQL functions
failure in creating First SQL function
failure in creating TileBBox SQL function
failure in creating TileDoubleBBox SQL function
Example app listening on port 3005!

send3663284b-0e58-4587-af82-b35604a99303: 4.964ms
3663284b-0e58-4587-af82-b35604a99303: 817.819ms
sendd0bdd671-1f47-4b40-84ba-2fed6adfd045: 3.451ms
d0bdd671-1f47-4b40-84ba-2fed6adfd045: 1276.588ms
sendcd36f672-4c4b-4a95-b772-7584e6eb8c55: 1.349ms
cd36f672-4c4b-4a95-b772-7584e6eb8c55: 1754.146ms

The requests seems to be ok, returning status 200 but tile data from ClusterBuster server is undefined nothing appears on the map (neither your Mapbox, or my Google Maps). Also, it's curious that all tile responses seems to have the same size 216 B. _img

The data was imported ok in the PostGIS database. _img2

Result is undefined after debugging the express.ts server file with VSCode Javascript Debug Terminal and starting it with the command ts-node .\example\express.ts.

In the Chrome network tab, in none of the sub-tabs Preview or Response i can't see any data. _img 1-2

I also tried logging the result tile in the express server in the success function,

server({ 
   ...//excluded for visibility 
}).then(result => {
   ...//excluded for visibility 

   console.log(result)

   res.status(200).send(result);
})

and below is the output, i get undefined: enter image description here

Any help or advice is really appreciate! Thank you in advance!

Solution

  • After enabling debug in the TileServer configuration (with debug: true), i noticed 2 errors:

    SELECT ST_AsMVT(tile, 'points', 4096, 'geom') AS mvt FROM tile
{
  e: error: password authentication failed for user "userXYZ"
...

    SELECT ST_AsMVT(tile, 'points', 4096, 'geom') AS mvt FROM tile
{
  e: Error: read ECONNRESET
      at TCP.onStreamRead (internal/stream_base_commons.js:205:27) {
...

    Initially I ran from the root of clusterbuster with ts-node .\example\express.ts or with yarn start (that underneath uses the same and it tries to connect with my user instead of .env config file)

    After running ts-node express.ts from the example folder it took into account the .env config file with postgres user instead of my user. Now the tile data from the server is returned ok and the example works at expected.

    Many thanks to the contributor cosmin-petrescu that helped me. Entire thread can be seen here on github.