Why Server Vector Tiles for MapboxGL Client rendered incorrectly - postgis

Question

I am trying to set up a web server in Node.js that serves vector tiles to be displayed in a browser using MapboxGL JS. The data for the vector tiles is stored in a PostGIS database.
I receive a geojson file and process it createing a database with next sentence: CREATE TABLE IF NOT EXISTS countries ( table_id SERIAL, properties jsonb not null, geom geometry(GeometryZ,4326), primary key (table_id));
My current set up seems to going in the right direction, as I can see vector tiles being loaded and displayed in the browser. However the rendered result is incorrect (this is a screenshot of a section of my map):
What is rendering incorrectly???
Here is the code:
var express = require('express');
var SphericalMercator = require('sphericalmercator');
var mercator = new SphericalMercator({
size: 256 //tile size
});
const { pool } = require('../postgressql/config');
var app = express();
app.get('/:namelayer/:z/:x/:y.pbf', (req, res, next) => {
var options = {
x: parseInt(req.params.x),
y: parseInt(req.params.y),
z: parseInt(req.params.z),
layerName: req.params.namelayer
};
const bbox = mercator.bbox(options.x, options.y, options.z, false, '3857');
const sql = `
SELECT ST_AsMVT(q, '${options.layerName}', 4096, 'geom')
FROM (
SELECT
table_id, properties,
ST_AsMVTGeom(
geom,
ST_MakeEnvelope(${bbox[0]}, ${bbox[1]}, ${bbox[2]}, ${bbox[3]}, 4326),
4096,
256,
false
) AS geom
FROM ${'public.'+options.layerName} c
) q;
`;
try {
pool.query(sql, (error, results) => {
if (error) {
return res.status(500).json({
ok: false,
message: error
});
}
const tile = results.rows[0];
// set the response header content type
res.setHeader('Content-Type', 'application/x-protobuf');
// trigger catch if the vector tile has no data, (return a 204)
if (tile.st_asmvt.length === 0) {
res.status(204);
}
// send the tile!
res.send(tile.st_asmvt);
});
} catch (e) {
res.status(404).send({
error: e.toString(),
});
}
});
module.exports = app;
I followed using the idea from this sites:
https://medium.com/nyc-planning-digital/using-the-new-mvt-function-in-postgis-75f8addc1d68
https://geoinquiets.github.io/taller-vt/8_postgis_vt/
https://blog.jawg.io/how-to-make-mvt-with-postgis/

Answer 1

Evidently, you have a projection problem. It looks like the black overlay is more stretched vertically towards the poles than the basemap, as well as being shifted northwards.
It's a bit hard to say for sure where the problem lies, as you haven't includede the client side code. It's possible the vector tiles are perfectly represented within the EPSG:3857 projection, but you're overlaying them on a slightly different projection (EPSG:3785 perhaps).
The fact that you've disabled ST_AsMVTGeoms clip_geom parameter also suggests that your bounding box wasn't calculated correctly, and you were working around that.
You may get better answers posting the question at gis.stackexchange.com