Mapbox-gl-js: Fill and line layers on same tiled source data diverge based on zoom

Created on 22 Nov 2019  路  5Comments  路  Source: mapbox/mapbox-gl-js

We are seeing an issue regarding fill vs. line alignment that affects layers generated from tiled data.

mapbox-gl-js version: 1.5.0

browser: Chrome 78.0.3904.97

Steps to Trigger Behavior

  1. use tippecanoe to build vector tiles for polygon geometries
  2. build a map with a tiled source and fill+line layers showing this tiled source (same initialized source for both)
  3. zoom to a corner of the geometry
  4. observe line layer detaching from fill layer in a different but deterministic way per unit zoom level

Link to Demonstration

JSBin link

Static example -
Screen Shot 2019-11-21 at 3 43 12 PM

Animated example showing different issues and unit zoom -
bad-simplification

Sample geometry: GeoJSON or Tiles

Expected Behavior

Border lines stay in their defined locations.

Actual Behavior

Border lines seem to move or align to some sort of grid depending on zoom level.

I've tested with a geojson source type and inlined geojson, and cannot reproduce this behavior.

bug

All 5 comments

One additional bit of context here is the tiles are generated only through z10, and the issues seem to be exhibited on z14-z18. So, this issue seems to only be triggered when the underlying data is overzoomed.

Float truncation?

maybe related, but happening to a GeoJSON source - https://github.com/mapbox/mapbox-gl-js/issues/7023#issuecomment-517164123

Is my answer here to generate more zooms? Wondering why this only happens to line layers and not polygon layers.

Thanks for the good reproduction.

Yep, you're right that this is a result of overzooming.

It could be float truncation. The line tessellation sometimes creates new vertices to split a line segment. Without enough precision this interpolated vertex won't be close to the line segment.

Or maybe there is a precision issue in the shader.

Is my answer here to generate more zooms? Wondering why this only happens to line layers and not polygon layers.

Yep, until this is fixed I think that will be your best solution.

@ansis thanks for the confirmation. Do you have any expectation on when this would be worked on? (just for better reasoning around our internal fix's longevity..)

@dyakovlev I've opened a fix for it here https://github.com/mapbox/mapbox-gl-js/pull/9024 . This may make it into the next release that is scheduled to go out wednesday dec 4th.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mollymerp picture mollymerp  路  3Comments

aaronlidman picture aaronlidman  路  3Comments

muesliq picture muesliq  路  3Comments

PBrockmann picture PBrockmann  路  3Comments

BernhardRode picture BernhardRode  路  3Comments