Error in coordinates decoding from PBF vector tile

[SiPi76]

Hi,

I am serving pbf vector tiles based from a python backend using mapbox_vector_tile pip package.

Basically my backend :

• reads the xyz coordinates ;
• finds the relevent data from my database ;
• generate a geojson source using EPSG3857 ;
• generate the vector tile and encode it in pbf ;

My problem is that when maplibre decodes the featurecollection sent from the backend (in EPSG3857), the coordinates are completely off and the layer is not displaying on the map.

I checked the coordinates encoded in the pbf file and they are correct.

Hope to get some insight here.

Thx
Bests

[zerda-ocm]

A demo would be helpful.

[SiPi76]

Yes` you're right ! As an exemple this is a FeatureCollection that the backend constructs :

{'name': 'segmentsLayer', 'features': [{'type': 'Feature', 'id': 'TC009', 'geometry': {'type': 'LineString', 'coordinates': [[1.10550594, 49.44684601], [1.10549295, 49.44684982], (more points), [1.104146, 49.44730759], [1.10413396, 49.4473114]]}, 'properties': {'name': 'segments', 'id': 'TC009'}}]}

It would send it via a Response object from Flask :
encoded_tile = mapbox_vector_tile.encode(tile_data, default_options={"transformer": lonlat_to_webmercator.transform}) return Response(encoded_tile, mimetype="application/x-protobuf")

Where the transform function is converting the coordinates to ESPG3857. (It works I checked by decoding a message as an exmple).

When I look at the layer that maplibre is supposed to draw, I get as propreties :
[ { "name": "segments", "id": "TC009" }, { "name": "segments", "id": "TC009" }, { "name": "segments", "id": "TC009" }, { "name": "segments", "id": "TC009" } ]
and as coordinates :
[ { "type": "LineString", "coordinates": [ [ 1.186646819114685, 52.13777548201455 ], [ 1.1866461485624313, 52.13777548201455 ], [ 1.1866454780101776, 52.137775893575935 ], (MORE POINTS) [ 1.1154690384864807, 49.79158164396003 ] ] }, { "type": "LineString", "coordinates": [ [ 1.1154688708484173, 49.79180328229012 ], [ 1.1154687870293856, 49.79180333640093 ], [ 1.1154687032103539, 49.79180339051169 ], [ 1.1154685355722904, 49.79180339051169 ], [ 1.1154684517532587, 49.7918034446225 ], [ 1.115468367934227, 49.79180349873329 ], [ 1.1154682002961636, 49.79180349873329 ], [ 1.1154681164771318, 49.7918035528441 ], [ 1.1154680326581001, 49.791803606954915 ], [ 1.1154678650200367, 49.791803606954915 ] ] }, { "type": "LineString", "coordinates": [ [ 1.1151244584470987, 49.791803715176485 ], [ 1.1151242908090353, 49.791803715176485 ], [ 1.1151242069900036, 49.7918037692873 ], (MORE POINTS) [ 1.115121440961957, 49.79180468917079 ], [ 1.1151213571429253, 49.7918047432816 ] ] } ]

[SiPi76]

Here's the code for adding the source and the layer :
`map.once('load', () => {
console.log("Map loaded. Initializing PBF source and layers.");

// Add the vector source for PBF tiles
map.addSource('segments', {
    type: 'vector',
    version: 2,
    tiles: ['http://127.0.0.1:5000/tiles/{z}/{x}/{y}.pbf'],
    minzoom: 0,
    maxzoom: 22
});

map.addLayer({
    id: 'trace-layer',
    type: 'line',
    source: 'segments',
    'source-layer': 'segmentsLayer',
    layout: {
        'line-join': 'round',
        'line-cap': 'round'
    },
    paint: {
        'line-color': '#ff0000',
        'line-width': 2
    }
});
console.log("Trace layer added.");

});`

[zerda-ocm]

I don't see an obvious error, although it's hard to troubleshoot the problem with just some code fragments. Is it possible for you to make a live demo? Or at least provide a pbf tile ? If I get you right, you believe the data in the pbf tile is correct, but maplibre (which version?) messed up the coordinates?

Also, "more points" doesn't help to see which coordinates are "completely off". I assume it appears to be shifted by a fixed amount?

[SiPi76]

segment.json
44763.zip

Here is the geojson data and the corresponding pbf for a tile. I've zipped the pbf because github apparently doesn"t support uploading pbf files directly.

The coordinates are 1m appart from each other and should be in 1.10XXXX lng and 49.44XXXX lat range.

Because of my lack of knowledge in spatial data, it is possible that I'm doing it totally wrong :')

[zerda-ocm]

The pbf file, you uploaded, does not contain any valid geometry. All values are 'NULL':

{
    "name": "segments",
    "id": "TC009"
}
{
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                null,
                null
            ],
            [
                null,
                null
            ],
            ...
]
    },
    "properties": {
        "name": "segments",
        "id": "TC009"
    }
}

[acalcutt]

I may be wrong about this, but aren't the coordinates inside a pbf file relative to the tile? when I've debugged tiles before i had to use something like https://github.com/mapbox/vt2geojson to get real coordinates, otherwise the coordinates from directly decoding it weren't valid

[SiPi76]

I just realized it and corrected my code and now it works

It seems indeed that the coordinates weren't related to the tile being draw. Now it works.

I guess working late night hours on a project isn't the best idea ever.

Thanks and sorry for your time ! 👍