Malformed protobuff after geojson-vt parsing.

[cyrilchapon]

Context

I'm trying to serve a dynamic vector tiles routes from MongoDB documents.

I have some data in a mongodb, which — after some complex query — I am aggregating into a GeoJSON feature collection that looks like this :

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "_id": "63c9081b6826b11dce76b781",
        "name": "Walsh - Romaguera"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          4.5988,
          46.0235
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "_id": "63c9081b6826b11dce76b782",
        "name": "McKenzie, Bashirian and Wintheiser"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          4.5777,
          45.993
        ]
      }
    }
  ]
}

I'm building server side a tile index with geojson-vt like so :

import geojsonVt from 'geojson-vt'
export type GeoJSONVT = ReturnType<typeof geojsonVt>

export const tileIndex: GeoJSONVT = geojsonVt(myFeatureCollection, {})

Later, in an express handler, I'm serving tiles like so :

import { tileIndex } from './tile-index.ts'
const vtpbf = require('vt-pbf')

const tilesHandler = (req, res) => {
  const { z, x, y } = req.params

  // Getting tile as json
  const jsonTile = tileIndex.getTile(z, x, y)

  // Converting tile to pbf
  const pbfTile = jsonTile != null ? vtpbf.fromGeojsonVt({ geojsonLayer: jsonTile }) : null

  res
    .status(200)
    .type('application/x-protobuf')
    .send()
}

I bound this to a route like so

router.get('/:z/:x/:y.pbf', tilesHandler)

And am calling this in mapbox-gl (with react-map-gl) like so :

      <Source
        id="my-source"
        type="vector"
        tiles={['http://localhost:1337/tiles/{z}/{x}/{y}.pbf']}
      />

---

Issue

MapboxGL is complaining in frontend :

Error {message: 'Unimplemented type: 3'}

Which obviously tells pbf is malformed

Here are some logs :

jsonTile

{
  "features": [
    {
      "geometry": [
        [
          791,
          1360
        ]
      ],
      "type": 1,
      "tags": {
        "_id": "63c92f4b4b38c39b45d8c5ba",
        "name": "Ryan and Sons"
      }
    },
    {
      "geometry": [
        [
          200,
          2166
        ]
      ],
      "type": 1,
      "tags": {
        "_id": "63c92f4b4b38c39b45d8c5bb",
        "name": "Zieme Inc"
      }
    }
  ],
  "numPoints": 2,
  "numSimplified": 2,
  "numFeatures": 2,
  "source": [
    {
      "id": null,
      "type": "Point",
      "geometry": [
        0.5128838888888889,
        0.3557929645239258,
        0
      ],
      "tags": {
        "_id": "63c92f4b4b38c39b45d8c5ba",
        "name": "Ryan and Sons"
      },
      "minX": 0.5128838888888889,
      "minY": 0.3557929645239258,
      "maxX": 0.5128838888888889,
      "maxY": 0.3557929645239258
    },
    {
      "id": null,
      "type": "Point",
      "geometry": [
        0.5127430555555555,
        0.355985194665117,
        0
      ],
      "tags": {
        "_id": "63c92f4b4b38c39b45d8c5bb",
        "name": "Zieme Inc"
      },
      "minX": 0.5127430555555555,
      "minY": 0.355985194665117,
      "maxX": 0.5127430555555555,
      "maxY": 0.355985194665117
    }
  ],
  "x": 525,
  "y": 364,
  "z": 10,
  "transformed": true,
  "minX": 0.5127430555555555,
  "minY": 0.3557929645239258,
  "maxX": 0.5128838888888889,
  "maxY": 0.355985194665117
}

pbfTile

Uint8Array(96) [
   26, 94, 120,   1,  10,  12, 103, 101, 111, 106, 115, 111,
  110, 76,  97, 121, 101, 114,  40, 128,  32,  18,  15,  18,
    4,  0,   0,   1,   1,  24,   1,  34,   5,   9, 220,  24,
  192, 42,  26,   3,  95, 105, 100,  26,   4, 110,  97, 109,
  101, 34,  28,  10,  26,  34,  54,  51,  99,  57,  50, 102,
   52, 98,  52,  98,  51,  56,  99,  51,  57,  98,  52,  53,
  100, 56,  99,  53,  98,  97,  34,  34,  15,  10,  13,  82,
  121, 97, 110,  32,  97, 110, 100,  32,  83, 111, 110, 115
]

[sharathprabhal]

@cyrilchapon Were you able to find a solution? I'm facing something similar

[cyrilchapon]

@sharathprabhal yes, check implementation here :

https://github.com/cyrilchapon/foundtruck/blob/8575dad86876dcad9f27421b8fbbbed861321ee8/packages/api/src/tiles.ts#L16

Edit: In a nutshell, you have to gzip the tile after encoding it to PBF

[sharathprabhal]

@sharathprabhal yes, check implementation here :

https://github.com/cyrilchapon/foundtruck/blob/8575dad86876dcad9f27421b8fbbbed861321ee8/packages/api/src/tiles.ts#L16

Edit: In a nutshell, you have to gzip the tile after encoding it to PBF

Thank you so much for the quick reply. It saved me a ton of time!