OnMapReadyAsync() - Style is not done loading

Question

Hi all; I am using AzureMapsControl which is a lightweight wrapper around Azure Maps. But I'm 99% certain this is an Azure Maps issue. This has happened once. In this code:

public async Task OnMapReadyAsync(MapEventArgs mapArgs) 
	{ 
	MapCenter = new TopologyPoint(User.Address.Location.X, User.Address.Location.Y);

	await mapArgs.Map.SetCameraOptionsAsync(options => options.Center = new Position(MapCenter.X, MapCenter.Y));
	EventsDataSource = new DataSource(EventsDatasourceId);
	await mapArgs.Map.AddSourceAsync(EventsDataSource);
			

On the call to mapArgs.Map.AddSourceAsync() I am getting:

Style is not done loading
Error: Style is not done loading
    at Sn._checkLoaded (https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js:55:508843)
    at Sn.addSource (https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js:55:512037)
    at t.addSource (https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js:55:713323)
    at k_._addSource (https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js:55:1245486)
    at k_.add (https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js:55:1243005)
    at Core.addSource (https://localhost:7229/_content/AzureMapsControl.Components/azure-maps-control.js:381:35)
    at https://localhost:7229/_framework/blazor.server.js:1:3244
    at new Promise (<anonymous>)
    at y.beginInvokeJSFromDotNet (https://localhost:7229/_framework/blazor.server.js:1:3201)
    at Yt._invokeClientMethod (https://localhost:7229/_framework/blazor.server.js:1:60713)

Stack trace:

   at System.Threading.Tasks.ValueTask`1.get_Result() in System.Threading.Tasks\ValueTask.cs:line 484
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1.MoveNext()
   at System.Threading.Tasks.ValueTask`1.get_Result() in System.Threading.Tasks\ValueTask.cs:line 484
   at Microsoft.JSInterop.JSRuntimeExtensions.<InvokeVoidAsync>d__0.MoveNext()
   at AzureMapsControl.Components.Runtime.MapJsRuntime.<InvokeVoidAsync>d__3.MoveNext()
   at AzureMapsControl.Components.Map.Map.<AddSourceAsync>d__199`1.MoveNext()
   at LouisHowe.web.Pages.User.SearchMap.<OnMapReadyAsync>d__38.MoveNext() in C:\Git\LouisHowe\LouisHowe.web\Pages\User\SearchMap.razor.cs:line 152

What's going on? Do I need to await something else somewhere? thanks - dave

Answer 1

I'm not certain about the OnMapReadyAsync event. I'm assuming that this is your own event handler that's tied into the OnReady property of the map, and not the same named property that is on the MapServiceclass called by the AddMapAsync method here: https://github.com/arnaudleclerc/AzureMapsControl.Components/blob/776a40fc39fa4a6b8206dee98263b25d27a5e444/src/AzureMapsControl.Components/Map/MapService.cs Looking at the AddMapAsync code, it looks like it loads the map and invokes the OnMapReadyAsync event without waiting for the maps onready event to fire. If using the MapService, I could see this issue occurring.

It looks like this component is still pointing to version 2 of Azure Maps and I do recall one of the minor versions having a similar issue, but it was resolved in an update a day or two later, so possible this library is pulling in that minor version and not the latest. Near the end of version 3 the whole styling stack of the base maps in Azure Maps was rearchitected (after I moved to another team :)) and there were some bugs in a few versions of version 2. Those where resolved in the latest version of version 2, but version 3 has since had a lot of improvements and bug fixes. This library should work with version 3 without any issues. Getting it to use that version may resolve this issue (I can't reproduce this in issue in Azure Maps directly).

Another possible solution is to try the OnLoad event. The way the events work, OnReady fires as soon as enough of the maps resources are loaded to safely start adding layers and sources. The OnLoad event fires after all the maps resources have completely loaded (roughly one or two hundred milliseconds later depending on the performance of the device).