mapbox / mapbox/vt-pbf

Malformed protobuff after geojson-vt parsing.

Open
#45 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
206
Forks
38
PR merge metrics
No merged PRs in 30d

Description

## 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 :
```json
{
"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 :

```ts
import geojsonVt from 'geojson-vt'
export type GeoJSONVT = ReturnType

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
```ts
router.get('/:z/:x/:y.pbf', tilesHandler)
```

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

```

------

## Issue

MapboxGL is complaining in frontend :
> Error {message: 'Unimplemented type: 3'}

Which obviously tells [pbf is malformed](https://github.com/mapbox/mapbox-gl-js/issues/1567)

Here are some logs :

jsonTile
```json
{
"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
```bash
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
]
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in the shown tilesHandler, following the result of vtpbf.fromGeojsonVt through the Express response path. Reproduce the request with the sample geojson-vt tile and inspect the bytes received by the client. Done means the response contains the generated vector-tile bytes and Mapbox GL can parse the tile without the protobuf error.

Written by the indexing model from the issue text.

Assessment

Tech stack
express, javascript, typescript
Domain
api, backend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.