Scrolling in map, get: Could not load image because of The source image could not be decoded

Question

Hi all;

I am using the AzureMapsControl component which wraps Azure Maps. I think this issue is 100% Azure Maps. What I do is pretty simple just putting pins up. At times, when scrolling, I get a ton of the following error messages in the browser (client). Not clicking, just scrolling (video example).

atlas.min.js:55 Error: Could not load image because of The source image could not be decoded.. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.
    at atlas.min.js:56:190132

Any idea what's going on and what I can do to avoid this?

Here's my code to add the pins:

public async Task OnDatasourceAdded(MapSourceEventArgs mapArgs)
{
    try
    {
        var clusteredItemsLayer = new SymbolLayer
        {
            Options = new SymbolLayerOptions
            {
                Source = mapArgs.Source.Id,
                TextOptions = new()
                {
                    TextField = new ExpressionOrString(new[]
                    {
                        new ExpressionOrString("get"),
                        new ExpressionOrString("point_count_abbreviated")
                    }),
                    Offset = new Expression(new[]
                    {
                        new ExpressionOrNumber(0),
                        new ExpressionOrNumber(-1.2)
                    }),
                    Color = new("white"),
                    Size = 14
                },
                Filter = new(new[]
                {
                    new ExpressionOrString("has"),
                    new ExpressionOrString("point_count"),
                })
            },
            EventActivationFlags = LayerEventActivationFlags.None()
                .Enable(LayerEventType.Click)
                .Enable(LayerEventType.MouseOver)
                .Enable(LayerEventType.MouseOut)
        };

        // on a click, display list or drill down
        clusteredItemsLayer.OnClick += OnClusterClick;
        clusteredItemsLayer.OnMouseOver += OnClusterMouseOver;
        clusteredItemsLayer.OnMouseOut += OnPinMouseOut;

        await mapArgs.Map.AddLayerAsync(clusteredItemsLayer);


        var singleItemLayer = new SymbolLayer
        {
            Options = new()
            {
                Source = mapArgs.Source.Id,
                IconOptions = new IconOptions
                {
                    Image = new ExpressionOrString(new[]
                    {
                        new ExpressionOrString("match"),
                        new Expression(new[]
                        {
                            new ExpressionOrString("get"),
                            new ExpressionOrString("Type"),
                        }),

                        new ExpressionOrString(_typeEvent),
                        new ExpressionOrString("pin-blue"),

                        new ExpressionOrString(_typeOrganization),
                        new ExpressionOrString("pin-red"),

                        new ExpressionOrString("marker-yellow"),
                    })
                },
                Filter = new(new[]
                {
                    new ExpressionOrString("!"),
                    new Expression(new []
                    {
                        new ExpressionOrString("has"),
                        new ExpressionOrString("point_count"),
                    })
                })
            },
            EventActivationFlags = LayerEventActivationFlags.None()
                .Enable(LayerEventType.Click)
                .Enable(LayerEventType.MouseOver)
                .Enable(LayerEventType.MouseOut)
        };

        // on a click, open the event/org card
        singleItemLayer.OnClick += OnPinClick;
        singleItemLayer.OnMouseOver += OnPinMouseOver;
        singleItemLayer.OnMouseOut += OnPinMouseOut;

        await mapArgs.Map.AddLayerAsync(singleItemLayer);
    }
    catch (Exception ex)
    {
        LoggerEx.LogError(ex, "OnDatasourceAdded");
        Trap.Break();
        ex.Data.TryAdd("Category", typeof(SearchMap));
        throw;
    }
}

??? - thanks - dave

Answer 1

I would start by looking at the following code:

Image = new ExpressionOrString(new[]
{
	new ExpressionOrString("match"),
	new Expression(new[]
	{
		new ExpressionOrString("get"),
		new ExpressionOrString("Type"),
	}),

	new ExpressionOrString(_typeEvent),
	new ExpressionOrString("pin-blue"),

	new ExpressionOrString(_typeOrganization),
	new ExpressionOrString("pin-red"),

	new ExpressionOrString("marker-yellow"),
})

In particular I would look at the following:

new Expression(new[]
{
	new ExpressionOrString("get"),
	new ExpressionOrString("Type"),
}),

This code is grabbing the "Type" value from the properties of the feature in the data source. Do you have an image in the maps image sprite for all the possible values you have in your data? Make sure the casings match as well. If you are adding custom images, note that those are added asynchronously, and you would have to wait for them to be added before they would be available to the layers.