symbol markers with custom images do not show up

[Tanguyabel]

mapbox-gl-js version: 0.45.0 packaged with npm
browser: various
OS: various versions of MacOS

Hi,

I am posting this as a new issue because 1. I was able to reproduce this misbehaviour quite often, although it appears depending on pretty random parameters and 2. I was not able to find any related issue. Please feel free to redirect me to any related issue I would have miss.

Here is a video example of the problem. Some markers do not show up as they should. At first load, we can see an entire area free of markers. When unzooming, they appear as they should (based on overlap constraints). When zooming back to original zoom, they disappear again while they should not. This has been recorded on a MacBook with fullscreen resolution.

So, I have a layer of symbols using custom images. This layer has layout properties icon-allow-overlap and icon-ignore-placement set to default (False).

I have a second layer, on top of the first one, which I use to display active markers when user clicks on a marker. It has the same source, other custom images, and layout property icon-ignore-placement set to True.

Both layers are filtered using a property 'active': filtered on False for the first one and on True on the second one. In the example video all properties 'active' remain set to False so we see only the first layer, even though I suspect the second layer could be the cause of my problem.

This problem appears randomly, most likely based on the dimensions of the canvas. It happens with this two-layers configuration using many different custom images as symbols.

This a blocking issue for me. I am ready to run more tests or dig into the code if needed, I would just like to know if anyone else encountered it or if I am missing something obvious that could be the cause (including an issue with this version of mapbox-gl.js).

Thank you in advance for your help.

[ChrisLoer]

#7032 went in after the version you're using, but at first glance it doesn't look like it would have caused this problem.

You can set map.showCollisionBoxes = true in order to see a debug mode that will show you the collision detection boxes around each item and help you understand what's causing them to collide out. It's also possible that at some zooms you won't see any collision boxes at all -- that would indicate that the features themselves aren't being generated for that zoom (or are being filtered -- I'm not sure exactly how your two-layer filtering setup works, but you're right it does sound like a potential culprit). One thing to keep in mind is that when you change a filter the whole tile needs to get re-generated on the background so there is some latency, and that can contribute to filtering-related effects feeling "random".

We can take a closer look if you put together a minimal JSFiddle that reproduces the issue, but just from the description it's not immediately clear to me what the problem is.

[Tanguyabel]

Thanks @ChrisLoer for your comment!
I tried to display the collision boxes and it doesn't look so suspicious. However, I noticed this behaviour: in a configuration where some markers are missing, if I turn on the collision boxes, computations occur then the boxes appear and my missing markers as well.
I also ran some other tests and noticed something interesting: when I load the page while having the focus on a window other than my browser, most of the time the problem of missing markers occur. That makes me think that it could be related to some nasty webgl context related issue, although I don't want to assume too much; what do you think?
I am going to try to set up a minimal JSFiddle to reproduce the issue.

[Tanguyabel]

Ok maybe I spoke a little bit too fast. When showing collision boxes, I can see the boxes around my markers. It looks that boxes are drawn in red when an object is hidden, blue when shown. Is that correct? However as you can see on my screenshot, some of my markers have a red box even though they are visible. Is this a normal behavior? It could be that some objects in the source have the exact same location, it should not happen but I will check.
NB: I removed my second layer in here to be sure, but as it is filtered it was not showing any collision box as I could expect.

Edit: I checked and have indeed some duplicates in my data, so some markers are located at the same location. This explains the previous screenshot I guess, but not my initial issue.

[ChrisLoer]

when I load the page while having the focus on a window other than my browser, most of the time the problem of missing markers occur

I'm just guessing, but it doesn't sound like a messed up webgl context to me. It sounds more like a timing issue during tile loading -- that is, you're temporarily loading/displaying a tile that doesn't contain your markers, due to something in the way you're filtering. The timing issues could easily become more noticeable when you switch away from the active tab because we do tile loading on web workers and browsers can throttle/pause them when their tab isn't active.

[mollymerp]

This looks like a possible duplicate of #6231 – are you loading the symbol icons with Map#loadImage and Map#addImage ? A workaround could be uploading your custom image to Mapbox Studio and adding it to your style there so the custom image is included with the sprite sheet at load time.

[Tanguyabel]

Yes guys, good points! @ChrisLoer you are probably right about a timing issue and @mollymerp indeed it is most likely a duplicate of #6231. I use Mapbox#addImage after loading the image (manually, it is legacy code and I don't use Mapbox#loadImage). I am going to ensure that my layer is loaded only after the images are loaded, and see if the problem get solved.

[mollymerp]

sounds good! going to close here. please reopen with a minimal test case if you think it is a distinct issue.