Azure Map rendering issue

Question

Azure Map rendering issue

Ayush 0

Hello,

I am rendering a map using Azure services and it was working till yesterday, today it started throwing errors such as (shown at the bottom) I used a simple template based on the ones given on the page

please help with whatever insight possible thank you

atlas.min.js:55 Error: Could not load image because of out of range source coordinates for image copy. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.
    at atlas.min.js:55:1

LeelaRajeshSayana-MSFT 17,871 Reputation points Moderator

2023-07-31T22:55:33.03+00:00

Hi @Ayush Greetings! Welcome to Microsoft Q&A forum. Thank you for posting this question here.

Would you mind sharing the link to the article you have used to create the application. The error message indicates that the application has a problem with fetching the underlying image. It this is a custom image the application is refering to? If so, can you please make sure that the coordinates you are using to place the image on the map are valid. If the coordinates are out of range, it could cause the error you are seeing. Try adjusting the coordinates and see if that resolves the issue.
LeelaRajeshSayana-MSFT 17,871 Reputation points Moderator

2023-08-02T13:51:24.84+00:00

Hi @Ayush Greetings! I am following up to see if you got a chance to review the above response. Please let us know if you have any additional questions or need further assistance.
Aaron Daniels 5 Reputation points

2023-08-04T18:23:19.3166667+00:00

Hello! We have been experiencing the same issue. The behavior is intermittent. We are adding a red pin to the map. Sometimes it shows, sometimes it gives the exact same error message. Today, it is now rendering a different, weird, image:

This comes and goes.
Aaron Daniels 5 Reputation points

2023-08-04T18:35:25.9266667+00:00

My apologies - I mean to post as a comment, not an answer.
LeelaRajeshSayana-MSFT 17,871 Reputation points Moderator

2023-08-04T18:39:28.0033333+00:00

Hi @Aaron Daniels Thank you for sharing the details. We will investigate this behavior further and keep you posted on our findings. Please stay tuned for more updates.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-04T18:44:10.48+00:00

Can you verify what version of the Azure Maps Web SDK you are using (take a look at the script tag, it should have a number in it). Can you provide a simple sample that reproduces your issue. I suspect the rendering issue is related to the map style sheets. It's possible that if you run version 2 and version 3 on different sites, that they may have commonly named icon sheets that are cached. Try pressing CTRL+F5 to see if it resolves your issue.

Aaron Daniels 5

We are using v2 - loading them from your CDN:

https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js
https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css

A hard refresh does not resolve the issue.

We are adding point markers as the documentation specified (see below). This has been working for months. The invalid markers are a relatively (week or so) new issue. It's like the coordinates the SDK is giving of the red point marker are not matching up to the sprite that's downloaded by the SDK.

        pointMarkers = new atlas.layer.SymbolLayer(shapeSource, null, {
            filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']],
            iconOptions: {
                image: ['get', 'image'], 
                allowOverlap: true
            },
            placement: 'point',
            textOptions: {
                //Reference the label property of the polygon as the text field. 
                textField: ['get', 'label'],
                anchor: 'top',
                haloWidth: 3,
                size: ['get', 'labelSize']
            }
        });

Aaron Daniels 5

We are using v2, loading the css and js from your CDN:

https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js
https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css

A hard refresh does not resolve the issue. It's like the coordinates of the relevant image in the sprite given by the SDK are off. In the above image, you see that it's spanning 4 different images, rather than showing just the red marker.

Here's some relevant code of how we are adding the marker to the map:

        pointMarkers = new atlas.layer.SymbolLayer(shapeSource, null, {
            filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']],
            iconOptions: {
                image: ['get', 'image'], 
                allowOverlap: true
            },
            placement: 'point',
            textOptions: {
                //Reference the label property of the polygon as the text field. 
                textField: ['get', 'label'],
                anchor: 'top',
                haloWidth: 3,
                size: ['get', 'labelSize']
            }
        });

Aaron Daniels 5 Reputation points

2023-08-04T20:00:31.49+00:00

Sorry - it wasn't showing my first reply until I posted my second. What a day.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-05T23:33:05.7066667+00:00
Odd. Not sure. Try clearing your browser cache. That's about the only thing I can think of at the moment.

If that doesn't work... The version you are pointing to automatically grabs the latest minor version of the web SDK, so it should be fine. That said, v2 likely won't have many if any (code) updates going forward since v3 is in the works. With that in mind, you could try pointing to a specific older minor version of v2 to see if the issue resolves that way. Try using the following URLs:

https://atlas.microsoft.com/sdk/javascript/mapcontrol/2.2/atlas.min.js https://atlas.microsoft.com/sdk/javascript/mapcontrol/2.2/atlas.min.css

If that doesn't work, try 2.1.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-05T23:34:46.65+00:00

You could also try setting the version number to 3.0.0-preview.10 to try the latest preview version 3. It should mostly be backwards compatible, if not completely. I think the may change is behind the scenes with how map styles are handled.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-09T06:12:47.1366667+00:00
I finally managed to reproduce this consistently in the v3 preview of the SDK (couldn't reproduce in the V2 SDK). I had to do the following to get it to reproduce:

Load the map zoomed in to city level with the grayscale_dark style set.

Use map.setStyle({style: 'road'}) to change the style.

If the initial map style is set to road the issue does not reproduce.
JJ 5 Reputation points

2023-08-09T17:08:58.6166667+00:00

I have been getting the wrong “pin-red” image intermittently as well for the past several weeks. What I observed was that the sprite.png would come back as one of two variants causing the image map coordinates to not align.

We had been using 2, but I tried the given suggestion of trying 2, 2.1, 2.2 for https://atlas.microsoft.com/sdk/javascript/mapcontrol/[Version]/atlas.min.css and https://atlas.microsoft.com/sdk/javascript/mapcontrol/[Version]/atlas.min.js. I have continued to see the issue intermittently with 2 and 2.2, but not with 2.1. Last night I created a set of postman tests to run multiple iterations against the sprite.json call and the sprite.png call. Behavior was consistent with the sprite.json call, but with he sprite.png call I have seen the following on average running 20-100 iterations at 2000ms-120000ms for test runs;

Version MapControl Failure Rate

2 2.3.2 (as of today) 2-12%

2 2.3.1 2-12%

2.2 2.2.7 0-12%

2.1 2.1.17 0%

*Failure here is defined as the wrong png (158,484) is being returned

For 2 and 2.2, the image seems to vary in content-length between 158,003(appears correct) and 158,484(appears incorrect). Is it possible a host/node in the load balancer/cluster has the wrong image?

I am hesitant to switch back to 2.1 as the styling and appearance is drastically different than what users will have been used to.

rbrundritt 21,711 Volunteer Moderator

Can you try version 3 to see if that resolves the issue:

<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.js"></script>

Aaron Daniels 5 Reputation points

2023-08-09T21:04:36.4233333+00:00
This is happening on a production system. We do not want to upgrade to the v3 preview, and need it resolved for v2.

What JJ documented above perfectly illustrates the issue. We are using the SDK as documented here: https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control. It is intermittently returning the incorrect image, which was originally causing the same error as reported by Ayush:

atlas.min.js:55 Error: Could not load image because of out of range source coordinates for image copy. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported. at atlas.min.js:55:1

And now is showing the wrong cross section of the sprite. It's like a subset of instances in the CDN is returning the wrong image.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-10T15:07:25.79+00:00

I highlighted this and separate related forum post to the Azure Maps team, and confirmed that it is a known issue that they are working on.

1 answer

Your answer

LeelaRajeshSayana-MSFT 17,871 Reputation points Moderator

2023-07-31T22:55:33.03+00:00

Hi @Ayush Greetings! Welcome to Microsoft Q&A forum. Thank you for posting this question here.

Would you mind sharing the link to the article you have used to create the application. The error message indicates that the application has a problem with fetching the underlying image. It this is a custom image the application is refering to? If so, can you please make sure that the coordinates you are using to place the image on the map are valid. If the coordinates are out of range, it could cause the error you are seeing. Try adjusting the coordinates and see if that resolves the issue.
LeelaRajeshSayana-MSFT 17,871 Reputation points Moderator

2023-08-02T13:51:24.84+00:00

Hi @Ayush Greetings! I am following up to see if you got a chance to review the above response. Please let us know if you have any additional questions or need further assistance.
Aaron Daniels 5 Reputation points

2023-08-04T18:23:19.3166667+00:00

Hello! We have been experiencing the same issue. The behavior is intermittent. We are adding a red pin to the map. Sometimes it shows, sometimes it gives the exact same error message. Today, it is now rendering a different, weird, image:

This comes and goes.
Aaron Daniels 5 Reputation points

2023-08-04T18:35:25.9266667+00:00

My apologies - I mean to post as a comment, not an answer.
LeelaRajeshSayana-MSFT 17,871 Reputation points Moderator

2023-08-04T18:39:28.0033333+00:00

Hi @Aaron Daniels Thank you for sharing the details. We will investigate this behavior further and keep you posted on our findings. Please stay tuned for more updates.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-04T18:44:10.48+00:00

Can you verify what version of the Azure Maps Web SDK you are using (take a look at the script tag, it should have a number in it). Can you provide a simple sample that reproduces your issue. I suspect the rendering issue is related to the map style sheets. It's possible that if you run version 2 and version 3 on different sites, that they may have commonly named icon sheets that are cached. Try pressing CTRL+F5 to see if it resolves your issue.
Aaron Daniels 5 Reputation points

2023-08-04T19:52:56.08+00:00

We are using v2 - loading them from your CDN:

https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js
https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css

A hard refresh does not resolve the issue.

We are adding point markers as the documentation specified (see below). This has been working for months. The invalid markers are a relatively (week or so) new issue. It's like the coordinates the SDK is giving of the red point marker are not matching up to the sprite that's downloaded by the SDK.

pointMarkers = new atlas.layer.SymbolLayer(shapeSource, null, { filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], iconOptions: { image: ['get', 'image'], allowOverlap: true }, placement: 'point', textOptions: { //Reference the label property of the polygon as the text field. textField: ['get', 'label'], anchor: 'top', haloWidth: 3, size: ['get', 'labelSize'] } });
Aaron Daniels 5 Reputation points

2023-08-04T19:59:52.64+00:00

We are using v2, loading the css and js from your CDN:

https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js
https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css

A hard refresh does not resolve the issue. It's like the coordinates of the relevant image in the sprite given by the SDK are off. In the above image, you see that it's spanning 4 different images, rather than showing just the red marker.

Here's some relevant code of how we are adding the marker to the map:

pointMarkers = new atlas.layer.SymbolLayer(shapeSource, null, { filter: ['any', ['==', ['geometry-type'], 'Point'], ['==', ['geometry-type'], 'MultiPoint']], iconOptions: { image: ['get', 'image'], allowOverlap: true }, placement: 'point', textOptions: { //Reference the label property of the polygon as the text field. textField: ['get', 'label'], anchor: 'top', haloWidth: 3, size: ['get', 'labelSize'] } });
Aaron Daniels 5 Reputation points

2023-08-04T20:00:31.49+00:00

Sorry - it wasn't showing my first reply until I posted my second. What a day.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-05T23:33:05.7066667+00:00

Odd. Not sure. Try clearing your browser cache. That's about the only thing I can think of at the moment.

If that doesn't work... The version you are pointing to automatically grabs the latest minor version of the web SDK, so it should be fine. That said, v2 likely won't have many if any (code) updates going forward since v3 is in the works. With that in mind, you could try pointing to a specific older minor version of v2 to see if the issue resolves that way. Try using the following URLs:

https://atlas.microsoft.com/sdk/javascript/mapcontrol/2.2/atlas.min.js https://atlas.microsoft.com/sdk/javascript/mapcontrol/2.2/atlas.min.css

If that doesn't work, try 2.1.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-05T23:34:46.65+00:00

You could also try setting the version number to 3.0.0-preview.10 to try the latest preview version 3. It should mostly be backwards compatible, if not completely. I think the may change is behind the scenes with how map styles are handled.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-09T06:12:47.1366667+00:00

I finally managed to reproduce this consistently in the v3 preview of the SDK (couldn't reproduce in the V2 SDK). I had to do the following to get it to reproduce:

Load the map zoomed in to city level with the grayscale_dark style set.

Use map.setStyle({style: 'road'}) to change the style.

If the initial map style is set to road the issue does not reproduce.
JJ 5 Reputation points

2023-08-09T17:08:58.6166667+00:00

I have been getting the wrong “pin-red” image intermittently as well for the past several weeks. What I observed was that the sprite.png would come back as one of two variants causing the image map coordinates to not align.

We had been using 2, but I tried the given suggestion of trying 2, 2.1, 2.2 for https://atlas.microsoft.com/sdk/javascript/mapcontrol/[Version]/atlas.min.css and https://atlas.microsoft.com/sdk/javascript/mapcontrol/[Version]/atlas.min.js. I have continued to see the issue intermittently with 2 and 2.2, but not with 2.1. Last night I created a set of postman tests to run multiple iterations against the sprite.json call and the sprite.png call. Behavior was consistent with the sprite.json call, but with he sprite.png call I have seen the following on average running 20-100 iterations at 2000ms-120000ms for test runs;

Version MapControl Failure Rate

2 2.3.2 (as of today) 2-12%

2 2.3.1 2-12%

2.2 2.2.7 0-12%

2.1 2.1.17 0%

*Failure here is defined as the wrong png (158,484) is being returned

For 2 and 2.2, the image seems to vary in content-length between 158,003(appears correct) and 158,484(appears incorrect). Is it possible a host/node in the load balancer/cluster has the wrong image?

I am hesitant to switch back to 2.1 as the styling and appearance is drastically different than what users will have been used to.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-09T20:50:07.4333333+00:00

Can you try version 3 to see if that resolves the issue:

<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.css" rel="stylesheet" /> <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3.0.0-preview.10/atlas.min.js"></script>
Aaron Daniels 5 Reputation points

2023-08-09T21:04:36.4233333+00:00

This is happening on a production system. We do not want to upgrade to the v3 preview, and need it resolved for v2.

What JJ documented above perfectly illustrates the issue. We are using the SDK as documented here: https://learn.microsoft.com/en-us/azure/azure-maps/how-to-use-map-control. It is intermittently returning the incorrect image, which was originally causing the same error as reported by Ayush:

atlas.min.js:55 Error: Could not load image because of out of range source coordinates for image copy. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported. at atlas.min.js:55:1

And now is showing the wrong cross section of the sprite. It's like a subset of instances in the CDN is returning the wrong image.
rbrundritt 21,711 Reputation points Volunteer Moderator

2023-08-10T15:07:25.79+00:00

I highlighted this and separate related forum post to the Azure Maps team, and confirmed that it is a known issue that they are working on.

Answer 1

IoTGirl 3,956 Microsoft Employee Moderator

Hello Folks,

We have two options presented here:

Clear the cache as the image sprite may have changed and an old location is being loaded.
New and old sprite versions are definitely different, so a confirmation was asked as to the version being used or try some of the other versions of the control to see if that fixes the issue

Specifically, we have changed our tile source as noted in our blog, https://techcommunity.microsoft.com/t5/azure-maps-blog/there-is-a-new-style-of-maps-across-microsoft/ba-p/3788157, but it should be discrete by version.

Please follow up as to which you have tried and whether the issue is still occurring. As Ricky notes, if you stay at 2.1 or 2.2 you should only be using the V1 tileset and that would eliminate the new tileset as the source of the issue.

Sincere thanks,

IoTGirl

Aaron Daniels 5 Reputation points

2023-08-08T15:28:32.78+00:00

We will update to 2.2 and let you know how it goes. Thank you!

Version	MapControl	Failure Rate
2	2.3.2 (as of today)	2-12%
2	2.3.1	2-12%
2.2	2.2.7	0-12%
2.1	2.1.17	0%

Share via

Azure Map rendering issue

1 answer

Your answer