Bug in `VectorTileFeature.toGeoJSON()` causes polygon overlap

Overview

After a lot of consternation in a couple issues (1 2) in the Deck.gl library, I believe I’ve come up with a simple, reproducible example that the problem is caused by VectorTileFeature.toGeoJSON in this library.

Downstream problem

When hosting Mapbox Vector tiles representing polygons, there are dark regions where the tiles meet, which I believe are caused by incorrect overlapping regions from .toGeoJSON.

Reproducible example

1. Create a simple bounding box that crosses over a tile boundary.

bbox.geojson:

{
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -119.286701,
                    37.68731
                ],
                [
                    -119.286701,
                    37.821895
                ],
                [
                    -119.71789,
                    37.821895
                ],
                [
                    -119.71789,
                    37.68731
                ],
                [
                    -119.286701,
                    37.68731
                ]
            ]
        ]
    },
    "properties": {}
}

1. Use tippecanoe to split it into tiles.

   tippecanoe -Z8 -z8 -e tiles bbox.geojson
   

2. Upload the four outputted tiles to S3. (My JS isn’t perfect yet and I couldn’t get the example working with local files).

   aws s3 cp tiles s3://tiles.nst.guide/mvt-testing/ --recursive --content-type application/x-protobuf --content-encoding 'gzip'
   

3. Use vector-tile-js to create 4 GeoJSON files from the vector tiles.

npm install @mapbox/vector-tile pbf node-fetch

var VectorTile = require('@mapbox/vector-tile').VectorTile
var Protobuf = require('pbf');
var fs = require('fs')
var fetch = require('node-fetch');

var xyz_array = [
  [42, 98, 8],
  [43, 98, 8],
  [42, 99, 8],
  [43, 99, 8],
]

for (var i = 0; i < xyz_array.length; i++) {
  let [x, y, z] = xyz_array[i]
  let mapSource = `https://tiles.nst.guide/mvt-testing/${z}/${x}/${y}.pbf`;
  fetch(mapSource).then(
    response => response.arrayBuffer()
  ).then(buffer => {
    let tile = new VectorTile(new Protobuf(buffer));
    let vectorTileLayer = tile.layers['bbox']
    let vectorTileFeature = vectorTileLayer.feature(0);
    let geoJSONFeature = vectorTileFeature.toGeoJSON(x, y, z);
    fs.writeFile(`tmp_${z}_${x}_${y}.geojson`, JSON.stringify(geoJSONFeature), () => console.log('written'))
  })
}

1. Merge the GeoJSON files together

npm install @mapbox/geojson-merge
geojson-merge tmp_8_42_98.geojson tmp_8_42_99.geojson tmp_8_43_98.geojson tmp_8_43_99.geojson > combined.geojson

1. Inspect the merged GeoJSON and see the overlap.

combined.geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.5037841796875,
              37.821988845756366
            ],
            [
              -119.5037841796875,
              37.696860987441895
            ],
            [
              -119.718017578125,
              37.696860987441895
            ],
            [
              -119.718017578125,
              37.821988845756366
            ],
            [
              -119.5037841796875,
              37.821988845756366
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.5037841796875,
              37.74031329210264
            ],
            [
              -119.5037841796875,
              37.68735239874452
            ],
            [
              -119.718017578125,
              37.68735239874452
            ],
            [
              -119.718017578125,
              37.74031329210264
            ],
            [
              -119.5037841796875,
              37.74031329210264
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.28680419921875,
              37.821988845756366
            ],
            [
              -119.28680419921875,
              37.696860987441895
            ],
            [
              -119.5587158203125,
              37.696860987441895
            ],
            [
              -119.5587158203125,
              37.821988845756366
            ],
            [
              -119.28680419921875,
              37.821988845756366
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.28680419921875,
              37.74031329210264
            ],
            [
              -119.28680419921875,
              37.68735239874452
            ],
            [
              -119.5587158203125,
              37.68735239874452
            ],
            [
              -119.5587158203125,
              37.74031329210264
            ],
            [
              -119.28680419921875,
              37.74031329210264
            ]
          ]
        ]
      },
      "properties": {}
    }
  ]
}

[e-n-f]

Since you mentioned you were using Tippecanoe to create the tiles, I should have mentioned that you want tippecanoe -b 0 to create tiles with no buffer.

[kylebarron]

Thanks for your response!