How to add missing images as per warning in "styleimagemissing" event in azure maps? And how to find out which images/icons are missing?

Question

I'm adding a number of icons created from imageSprite.createFromTemplate() method however sometimes I'm receiving the following error . How to resolve it using "styleimagemissing" event? How to find out which image is missing to add in the callback ?. And the symbol layer created using the icons sometimes overlaps over the bubble layer(cluster layer) too in some clusters. I don't know if that is caused due to missing images. Thanks in advance.

 atlas.min.js:55 Image "Scaffold Builder_Inactive_Icon" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

Answer 1

The styleimagemissing event will tell you the ID of the image that is missing. It won't tell you which symbol layer is trying to use that image however as a single image may be used by multiple layers.

Here is an example of how to use this event:

var iconLoaded = {};

//Add an event to handle the situation when an image is missing from the sprite.
map.events.add('styleimagemissing', function (id) {
    //Check to see if the image is has been or is being loaded. Don't try and load the image multiple times.
    if (!iconLoaded[id]) {
        iconLoaded[id] = true;
        //Load the custom image icon into the map resources.
        map.imageSprite.add(id, '../Common/images/icons/showers.png').then();
    }
});

A complete sample is available here: https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/master/AzureMapsCodeSamples/Symbol%20Layer/Load%20missing%20image%20into%20sprite.html