Polygon Fill layer incorrectly displayed showing weird clipping

maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser

https://maplibre.org/maplibre-gl-js/docs/

Other

6.76k stars 729 forks source link

Polygon Fill layer incorrectly displayed showing weird clipping #4357

Open Fabioni opened 5 months ago

Fabioni commented 5 months ago

mapbox-gl-js version: 4.5.0

browser: chrome

Steps to Trigger Behavior

create a goejson source with a polygon
use that source in a fill layer
try around with position of vertices and zoom level until you find the bug

Link to Demonstration

https://codepen.io/Fabioni/pen/vYqBEYb

Expected Behavior

show a correct polygon

Actual Behavior

strange clipping

this should be a proper triangle:

HarelM commented 5 months ago

Thanks for taking the time to report this issue. Can you reproduce it in older versions as well? Can you reproduce it using tiles and not geojson source?

Fabioni commented 5 months ago

Hey, did not check this yet. But what I found out is that the problem only occurs if the polygon does NOT have it's first vertex again as last vertex. I know that the geojson specification requires that. I still think violating this, should either throw an error, or just work. Right now it results in totally weird and unexpected behavior. Deck.gl for example just works.

spencermountain commented 4 months ago

Thank you Fabian - I was having the same issue, and closing the polygon fixes it beautifully. I wasn't aware of there was a close requirement in the geojson spec. I'm not sure how strictly this is observed, in other tools.

I just played with the codepen, and reproduced the issue at v3.6.0. So the current behaviour does not seem to be recently introduced. I'd be happy to add a PR to check and console.warn - if that's helpful @HarelM cheers

HarelM commented 4 months ago

Feel free to add a PR with a console.warn/warnOnce addition when this behavior is caught assuming this does not happen in a place where it will impact performance.