Azure Maps Web SDK resources loading problematic / inconsistent load times

Question

Azure Maps Web SDK resources loading problematic / inconsistent load times

TB FPH 30

I am working with vue and azure maps web sdk and I am having unreal behavior when loading the map resources in the browser (tested on various browsers, same across all).

When I startup my web app, it usually loads fine, the location, zoom, etc, once all tiles are loaded, I can just hit refresh and see the map "hanging" for over a minute until something kicks back in, and things load again.

Example scenarios (Windows PC):

startup visual studio code app (yarn dev command; vue3 + vite app, latest azure maps packages, latest dependencies, node 18 LTS)
open the localhost app in any browser, see the app loading indicator for a split second, then map tiles start loading immediately, wait for the map to load fully
(Load ~390ms, DOMContentLoad ~350, Finish ~15sec, Resources ~9MB, Requests ~2600)
15 secs!!!
hit F5 to reload the page in the browser, all hell breaks loose: app loading indicator is on, Gray Scale Base Style resource is showing "pending" in the "network" tab of the DevTools, map resources NOT loaded at all, then over a minute later (I kid you not), the stylesheet finally downloads and the tiles start loading etc
(Load ~400ms, DOMContentLoad ~400, Finish ~1.6min, Resources ~9MB, Requests ~2700)
1.6 minutes!!!
hit F5 one more time, now see most of the same area partially loaded, partially tiles missing, then resources load a while later
(Load ~350ms, DOMContentLoad ~330, Finish ~1.2min, Resources ~9.2MB, Requests ~2770)
1.2 minutes!!!
hit F5 again, map loads pretty quick
(Load ~340ms, DOMContentLoad ~310, Finish ~15sec, Resources ~9MB, Requests ~2880)
**15 secs!!!
**
These are completely random, that's my worry, there is no rhyme, sense or reason as to "which" of these scenarios I will get on page load, this is just a list of possible "scenarios", I sometimes get the maps not loading "properly" each time I reload the browser, as a result, I don't think I can guarantee a good user experience.

For troubleshooting, I have followed all the docs I could possibly find, all the azure samples, etc. I have also asked the ICT to investigate Firewall / VPN / etc. Tried different network connections (some are more "open" to the general internet traffic than others), debugged VPN / Firewall with the ICT department, also tried to run test with these disabled and have the same behavior all around no matter what, which seems to be pointing to the Azure itself, however I do not know what to look for, where to look for, if there's anything I can adjust on the Azure Maps Account, etc. I cannot put a finger on anything at all it seems.

My Azure account is under Visual Studio Professional Subscription (with plenty of credit to spare / use), my Azure Maps Account resource is Location West US 2, SKU Gen2.

I'm located in New Zealand.

Thoughts anyone?

LeelaRajeshSayana-MSFT 17,521 Reputation points

2024-01-24T00:56:48.05+00:00

Hi @TB FPH Greetings! Welcome to Microsoft Q&A forum. Thank you for posting this question here. Our community SMEs on this this topic will review this question and get back to you with more details as soon as possible. Please stay tuned to this thread for updates.
rbrundritt 20,181 Reputation points Microsoft Employee

2024-01-24T16:08:38.4766667+00:00

I can honestly say I've never seen or heard of anyone experience that. Only thing I can think of off the top off my head is verify in the dev tools that you don't have throttling turned on. Even the 15 second initial load doesn't sound right. I just tried and Bing maps web SDK loads in less than 2 seconds for me after I cleared my cache, and about 1 second when I press refresh.
TB FPH 30 Reputation points

2024-01-24T20:25:40.5166667+00:00

Well, with all fairness, posting a question is an attempt to see if there's any different ideas out there (and a bit of last resort), as I've never ever seen anything like this before, with any tooling / API etc, ever; and I've not came across anything. I was hoping there's something I can do on the Azure Maps account resources itself for some debug or investigation, but again, not even what to look for, as I've tried most reasonable solutions. We're talking 15 sec for all map resources finished loading, all tiles, etc. I might go back a few steps altogether and try a completely different approach. Throttling is of, Disable cache is off. I'll have to take a step back from this as this is insane. I've just opened up the app today, decided I want to start it up with zoom level of 2, only load the map controls for zoom in/out/pitch/bearing (no load of any custom layers, data sources), just a clean light grey base style empty map.

Again, loaded pretty immediately 1ce, refreshed the page again, and again, and again... and then randomly only 2 requests show up in the Network tab, nothing loaded in the browser window

and next moment a "few more" POST requests spin up (still nothing loaded in the browser obviously)

So... there is clearly App Insights baked into Azure Maps and the requests are coming from there (node_modules/.vite/deps/azure-maps-control.js?v=...) and try to POST to https://dc.services.visualstudio.com/v2/track Once this mess is dealt with (tens of seconds?), normal requests kick in, and the actual JS/CSS and other resource are loaded (each of the "normal" requests take between 1 ms to 300-400 ms, so I agree that the actual "good" load takes few seconds).

I'm bewildered... is an understatement...
rbrundritt 20,181 Reputation points Microsoft Employee

2024-01-25T16:55:53.1033333+00:00

I was about to suggest some other things to try (like using the web hosted endpoints rather than npm/node version of Azure Maps), but then tested again and reproduced your issue. This issue must have just recently been released and there was some delay between when I got that update and when you did. I'll reach out to the Azure Maps team so they can investigate.
TB FPH 30 Reputation points

2024-01-25T19:42:08.04+00:00

Thank you for taking the time to have a look!

Accepted answer

1 additional answer

Your answer

LeelaRajeshSayana-MSFT 17,521 Reputation points

2024-01-24T00:56:48.05+00:00

Hi @TB FPH Greetings! Welcome to Microsoft Q&A forum. Thank you for posting this question here. Our community SMEs on this this topic will review this question and get back to you with more details as soon as possible. Please stay tuned to this thread for updates.
rbrundritt 20,181 Reputation points Microsoft Employee

2024-01-24T16:08:38.4766667+00:00

I can honestly say I've never seen or heard of anyone experience that. Only thing I can think of off the top off my head is verify in the dev tools that you don't have throttling turned on. Even the 15 second initial load doesn't sound right. I just tried and Bing maps web SDK loads in less than 2 seconds for me after I cleared my cache, and about 1 second when I press refresh.
TB FPH 30 Reputation points

2024-01-24T20:25:40.5166667+00:00

Well, with all fairness, posting a question is an attempt to see if there's any different ideas out there (and a bit of last resort), as I've never ever seen anything like this before, with any tooling / API etc, ever; and I've not came across anything. I was hoping there's something I can do on the Azure Maps account resources itself for some debug or investigation, but again, not even what to look for, as I've tried most reasonable solutions. We're talking 15 sec for all map resources finished loading, all tiles, etc. I might go back a few steps altogether and try a completely different approach. Throttling is of, Disable cache is off. I'll have to take a step back from this as this is insane. I've just opened up the app today, decided I want to start it up with zoom level of 2, only load the map controls for zoom in/out/pitch/bearing (no load of any custom layers, data sources), just a clean light grey base style empty map.

Again, loaded pretty immediately 1ce, refreshed the page again, and again, and again... and then randomly only 2 requests show up in the Network tab, nothing loaded in the browser window

and next moment a "few more" POST requests spin up (still nothing loaded in the browser obviously)

So... there is clearly App Insights baked into Azure Maps and the requests are coming from there (node_modules/.vite/deps/azure-maps-control.js?v=...) and try to POST to https://dc.services.visualstudio.com/v2/track Once this mess is dealt with (tens of seconds?), normal requests kick in, and the actual JS/CSS and other resource are loaded (each of the "normal" requests take between 1 ms to 300-400 ms, so I agree that the actual "good" load takes few seconds).

I'm bewildered... is an understatement...
rbrundritt 20,181 Reputation points Microsoft Employee

2024-01-25T16:55:53.1033333+00:00

I was about to suggest some other things to try (like using the web hosted endpoints rather than npm/node version of Azure Maps), but then tested again and reproduced your issue. This issue must have just recently been released and there was some delay between when I got that update and when you did. I'll reach out to the Azure Maps team so they can investigate.
TB FPH 30 Reputation points

2024-01-25T19:42:08.04+00:00

Thank you for taking the time to have a look!

Answer 1

Sinny Pan 265 Microsoft Employee

We've released the new version of Azure Maps Web SDK to resolve this issue. For the user using v3 CDN, it should be taking effect directly. For users using NPM package, please use the latest version v3.1.1.

TB FPH 30 Reputation points

2024-01-29T20:38:30.87+00:00

I've upgraded the package and re-tested the application and can confirm the issue is gone. Thank you!

Answer 2

rbrundritt 20,181 Microsoft Employee

The team has confirmed the issue and a recent release its related to. They are looking into it. As a workaround, you can disable telemetry by adding the following option to the map when loading it. disableTelemetry: true,

Jeff Sedlak 0 Reputation points Microsoft Employee

2024-01-26T02:46:06.1433333+00:00

Thanks Ricky for notifying us of the issue. This caused by a bug in ApplicationInsights v3.0.5. We will be releasing a patch with v3.0.7. Until then you can override the package in your package.json to use v3.0.7 or use the mitigation Ricky already mentioned.
TB FPH 30 Reputation points

2024-01-26T03:55:44.07+00:00

This is interesting. I assume the "fix" will apply across the Azure Maps Web SDK, as I added the suggested option and as much as the telemetry POST requests are now gone, the /styling/styles API has... the same plague... ;-) (I tried different base map styles for comparison as well)?

"https://atlas.microsoft.com/styling/styles?api-version=2.0&version=2023-01-01&mcv=310 "
Sinny Pan 265 Reputation points Microsoft Employee

2024-01-26T09:05:27.5+00:00

Thanks for reporting this issue, @TB FPH , we've released the new version of Azure Maps Web SDK to resolve this issue. If you're using v3 CDN, it should be taking effect directly. If you're using NPM package, please use the latest version v3.1.1. Thanks.
TB FPH 30 Reputation points

2024-01-31T03:26:37.2333333+00:00

@Sinny Pan Sorry team, I'm still seeing issues. As much as I no longer see problems with the POST (track API), the /styling and /tile APIs are not quite consistent to say the least.

Please take a quick look at the below example (2 different page reloads) - seems completely unrelated to the config of the map (pitch of 60 for example) or if map is loaded with no data/layers - clean - or with data layers. Few page reloads complete as expected, few more attempts and it definitely responds with a massive delay.
Thoughts?
LeelaRajeshSayana-MSFT 17,521 Reputation points

2024-01-31T14:13:43.25+00:00

Hi @TB FPH Thank you for your feedback. Our team will review this and share more details with you.
TB FPH 30 Reputation points

2024-02-14T19:19:50.67+00:00

Hi @LeelaRajeshSayana-MSFT is there any news on the network issues noted down above? has this been verified as reproducible or has this been simply left as resolved?
LeelaRajeshSayana-MSFT 17,521 Reputation points

2024-02-15T21:41:35.0666667+00:00

Hi @Jeff Sedlak Do you have any additional feedback/insights on the above behavior?

Share via

Azure Maps Web SDK resources loading problematic / inconsistent load times

1 additional answer

Your answer