marker symbol clipping at tile boundaries

[bgentry]

Our site uses mapbox-gl-js. I just upgraded to v0.13.1 hoping that it would fix this issue, but it remains.

We have many markers drawn on our map. Some markers appear to get one of their sides cut off at certain zoom levels. This is a screenshot of the issue:

That comes from this screen recording of the issue when zooming

You can see this behavior for yourselves at https://www.opendoor.com/homes/phoenix

I'm encountering this on Mac OS X 10.11.3 in both Chrome and Safari.

[ansis]

Is the data added as geojson?

You should be able to fix this by increasing the buffer parameter for the geojson source:

 map.addSource("markers", {
        "type": "geojson",
        "buffer": 500,
        "data": {

The next release will increase the default and change the units of this setting (#2026) so you'll probably want to remove it when you switch to the next (currently unreleased) release.

---

A bit on why this happens: when icons are allowed to overlap we sort them so that the ones near the bottom of the screen appear above the ones at the top of the screen. Since we render the data from each tile separately, the sorted order could be wrong if we let tiles draw icons across tile boundaries. The icons from tiles drawn later would always be above the earlier ones, even if they were closer to the top of the screen. To fix this we clip markers to tile boundaries and expect the both tiles will draw the part of the marker on their side of the boundary. The vector tiles need a bit of extra data outside a tile's boundaries to make this work. Increasing the buffer parameter makes sure the tiles have the data they need.

[bgentry]

Setting buffer to 500 totally did the trick, as did 400. Thanks!