icon-offset and icon-translate has icons rendered behind other layers

[averas]

I'm trying to realise a point layer with multiple symbol icons per point. To achieve this I've tried using the layout/paint properties icon-offset and icon-translate and while both do the trick, they both suffer from the fact that the adjusted icons are overpainted by other layers occasionally (tile edges?). Is this a bug or is it not meant to be used like this?

[peterqliu]

757

[peterqliu]

This seems like a dupe of #757, so I will close for now. Feel free to reopen if it is distinct.

[averas]

This was supposedly fixed as part of #757 and released with v0.12.3 but still occurs, so it was not the same issue. Please reopen or confirm that icon offset/translate is not meant to be used this way.

To reproduce, have a symbol layer with:

"paint": { "icon-translate": [-25, 0] }

[averas]

http://codepen.io/anon/pen/yezaGy

Zoom in on the symbol until it flips under a tile edge .. then out again.

[averas]

This may somehow be related to the GeoJSON source and perhaps geojson-vt because even though I got the impression I saw traces of similar behaviour when restyling symbols in the regular streets vector tiles I had a hard time reproducing the exact same behaviour there.

@mourner ?

[averas]

Okay, perhaps the problem was quite obvious.. just setting icon-allow-overlap and icon-ignore-placement to false mitigates the problem. The reason I had one if these set to true was, however, that I wanted to have the symbols in this particular layer to be able to rendered on top of each other, but it seems I have to choose.

I've updated the codepen. It seems there is no way to have the symbols being able to overlap each other without having the symbols sliding in under tile edges..

http://codepen.io/anon/pen/VeMPyL

[lucaswoj]

This behavior was not fixed by #757.

The relevant bit of code is in draw_symbol

There's no easy way to prevent drawing the symbols twice (once in each overlapped tile).

[ansis]

The real solution will be to make your style possible without -ignore-placement or -allow-overlap, but a temporary workaround is to increase the buffer size of the geojson tiles created internally.

Maybe try setting "buffer" to 500 or even bigger:

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

[averas]

@ansis Ah, thanks for that!

Am I then correct in my assumption that this is related to the GeoJSON source itself? I took my data and served it with vector tiles instead and did not see traces of the same behaviour (although I didn't really test it thoroughly)..

[ansis]

Yes, it's mostly a geojson issue. The equivalent buffer parameter in vectortiles is much larger by default.

[ansis]

The default buffer size was increased in https://github.com/mapbox/mapbox-gl-js/pull/2026