mapbox / mapbox/mapbox-gl-js

Spurious polygon fills displayed that are not present in source tileset

Open
#7,748 12 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle: needs investigation :mag:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

mapbox-gl-js version: 0.52.0
browser: Chrome

Steps to Trigger Behavior
  1. Upload this MBTiles file to Mapbox Studio - a polygon tileset with minzoom 10 and maxzoom 12
  2. Use Mapbox GL JS to display the resulting tileset
Link to Demonstration

Demo can be found here (Mapbox GL JS code can be viewed in source)

Expected Behavior

Mapbox GL JS should accurately display the MBTiles file at zoom levels 10 and 11. For reference, this is how the MBTiles file displays in GIS desktop software (MapTiler Desktop): observe that the polygons shown in the city centre are mostly roads, at all zoom levels.

screen recording 2019-01-05 at 11 58 pm

Actual Behavior

Mapbox GL JS displays spurious polygon fills at zoom levels 10 and 11, that are not present in the source MBTiles file. This can be observed in the demo above, or in this gif.

screen recording 2019-01-06 at 12 20 am

Note re the MBTiles file

Please note: although this MBTiles file was created with tippecanoe, and at first glance this might appear to be an issue with tippecanoe simplification, I believe this to be a bug in Mapbox GL JS, not tippecanoe. This is because the MBTiles file does not display these spurious fills in desktop GIS software. (In addition, I have observed the same issue after generating a non-simplified tileset from the same source data, using the --no-feature-limit --no-tile-size-limit --no-line-simplification --no-tiny-polygon-reduction options.)

However, for reference, the source GeoJSON file can be found here, and it was created using tippecanoe 1.32.9 on OSX with the command tippecanoe -f -z12 -Z10 --coalesce-smallest-as-needed --detect-shared-borders -o sheffield_demo.mbtiles diffs_jan18_sheffield.geojson

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 with the linked mapbox_bug_example.html demonstration and reproduce the spurious polygon fills at zoom levels 10 and 11 using the supplied sheffield_demo.mbtiles file. Compare the rendered result with the source MBTiles and the desktop GIS reference; done means the map displays only polygons present in the source tileset at those zoom levels.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.