No map shown on Blazor WASM

[SaschaPatschka]

Hy

I have created a new Blazor WASM App, added the css and the Script:

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />

<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="_content/AzureMapsControl.Components/azure-maps-control.js"></script>

<AzureMap Id="map" CameraOptions="new CameraOptions { Center= new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534), Zoom= 10 }"
          StyleOptions="StyleOptions"/>
<SurveyPrompt Title="How is Blazor working for you?" />



@code {
 

    public StyleOptions StyleOptions = new StyleOptions
        {
            Style = MapStyle.GrayscaleDark,
            ShowLogo = false,
            ShowFeedbackLink = false
        };
          }

      But Nothing is showing?

      Does anyone know why?
      
     Greets Sascha

[mitikov]

Hey @SaschaPatschka , would you mind showing the HTML Elements in Chrome?

It happened to me that CSS-wise there was no sizing for the HTML container, thus it did not show up, while markup was there.

The quick start guide asks some inlined styles to be applied (like width/height), that's my best shot within the volume of info you've supplied.

[minimalisticMe]

I have the same issue.
Using a Blazor WASM App with nuget package AzureMapsControl.Components version 1.12.0-alpha0028 (same issue with version 1.11.0) and Subscription Key the map area is empty.

I adapted the code to show readiness:

<AzureMap Id="map"
          CameraOptions="new CameraOptions { Center= new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534), Zoom= 10 }"
          StyleOptions="StyleOptions"
          OnReady="@(async (e) => { Console.WriteLine(e.Type); })"
          EventActivationFlags="MapEventActivationFlags
                                .None()
                                .Enable(MapEventType.Ready)"/>

Neither Firefox nor Chrome show any errors, but a warning regarding Unable to perform style diff: Unimplemented: setSprite.. Rebuilding the style from scratch.:

Chrome:

Firefox:

You can see the line saying ready in both Firefox and Chrome but in both cases the map won't render

[minimalisticMe]

@mitikov I can't speak for @SaschaPatschka but my Chrome Elements looks like this:

Can you see anything suspicious there?

[minimalisticMe]

The comment from @mitikov is quite helpful.

Looking at Layout it seems width is fine, but height is 0.

When adding the following lines at the beginning of the razor-file the map will be rendered:

<style>
    body {
        margin: 0;
    }

    #map {
        position: absolute;
        width: 100%;
        min-width: 500px;
        height: 100%;
        min-height: 500px;
    }
</style>

[SaschaPatschka]

For my the comment from @mitikov was helpful.

No i have the following razor markup:

<div style="height: 300px;"> <AzureMap @ref="azureMaps" Id="Map" CameraOptions="new CameraOptions {Center = new AzureMapsControl.Components.Atlas.Position(Longitude,Latitude),Zoom = 10}" StyleOptions="new StyleOptions {ShowLogo = false, Style = MapStyle.Satellite}" EventActivationFlags="MapEventActivationFlags .None() .Enable(MapEventType.Ready)" OnReady="OnMapReady" /> </div>

       But i am searching for a better solution where the map size automatically fits the container?

[PhilipEve]

The documentation at https://github.com/arnaudleclerc/AzureMapsControl.Components/tree/develop/docs/map currently suggests that the "ready" event is fired by default. This doesn't seem to be the case based on my experience.