Azure Maps Web SDK resources loading problematic / inconsistent load times

TB FPH 30 Reputation points
2024-01-23T20:37:19.75+00:00

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):

  1. startup visual studio code app (yarn dev command; vue3 + vite app, latest azure maps packages, latest dependencies, node 18 LTS)
  2. 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!!!
  3. 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!!!
  4. 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!!!
  5. 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?

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

Accepted answer
  1. Sinny Pan 90 Reputation points Microsoft Employee
    2024-01-26T09:06:49.5133333+00:00

    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.

    3 people found this answer helpful.

1 additional answer

Sort by: Most helpful
  1. rbrundritt 13,521 Reputation points Microsoft Employee
    2024-01-26T02:12:17.2866667+00:00

    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,

    1 person found this answer helpful.