Icon added using addImage not rendering consistently.

[ajfickas]

mapbox-gl-js version: 1.7.0 (also reproduced in 1.3.1)

browser: Chrome Version 79.0.3945.130 (Official Build) (64-bit)

Steps to Trigger Behavior

1. Use map.addImage to add a base64 encoded image.
2. Add a symbol layer that uses the image.
3. Observe the icon will only sometimes appear.

Link to Demonstration

1. Open jsbin: https://jsbin.com/retaxub/edit?js,output
2. Observe either an icon of a ship in the center of the map or no such icon.
3. Reload or re-run the jsbin to observe the icon of a ship rendering only sometimes. I've seen it render consistently many times in a row and not render many times in a row. Lately, I've been seeing the icon render rarely, so it may take a bunch of tries to see the icon render. It's not clear what affects the chances.

Expected Behavior

The icon consistently appears on the map.

Actual Behavior

The icon only sometimes appears on the map.

Some background on my use case

This may tie into the future plans mentioned here: #9226 (comment)

My use case is to be able to render X features per tile, where X can vary from 0 to no more than 50 features and a subset of those features use a unique custom icon.

The reason I'm using base64 encoded images is so I can return images along with a tile's features in lieu of a better solution that performs better than fetching images separately.

[ansis]

Thanks for the example! map.addImage(...) currently only accepts images that have already loaded. It looks like something like this may fix the example:

    const imageEl = document.createElement('img');
    imageEl.onload = () => mapboxglMap.addImage(id, imageEl);
    imageEl.height = 70;
    imageEl.width = 70;
    imageEl.src = "data:image/png;base64,...",

We should either:

• document this limitation
• add support for not-yet-loaded images

[ajfickas]

@ansis Thanks! Didn't realize data URLs need to be loaded too. 🤦‍♂ Indeed with those changes, my example appears to now load the icon consistently. Might be a day or two until I can test out those changes for my particular use case, but it looks like this should solve the icons not rendering there as well. 🙇

[stevage]

FWIW I added the addImage() function to mapbox-gl-utils to remove that friction. It looks like:

map.U.loadImage('marker', '/assets/marker-pin.png');

(Yes, mapbox-gl-js should support loading images directly from URL. It's a very common need.)

[xialvjun]

It's in fact this issue: #6231 and #7598... You added layer before icon-image is loaded.
mapbox-gl should have the ability to update the layer when we addImage, but I didn't find the way.

[Akiyamka]

In summary, for the show layer on map correctly I need to complete next steps:

Style includes icon?
 |
 +-- Yes ---> Icon loaded before?
 |            |
 No           |          =========================
 |            +-- No ---> 1. Create virtual image
 |            |           2. Wait until loaded
 |           Yes          3. Add image to map
 |            |          =========================
 |            |           |
 +------------+-----------+----> Add layer to map

But it not work in case icon name takes from source. Need additional step for parse geojson source.
If source - mapbox tile layer with icon url in feature property - I have no idea how it can be implemented with the current restrictions