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

David Thielen 2,956 Reputation points
2024-07-20T22:39:43.9+00:00

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

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
695 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 17,181 Reputation points Microsoft Employee
    2024-07-21T21:53:23.64+00:00

    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.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.