Map is displayed with a height of 0

[DavidThielen]

If I have <AzureMap> as the sole content of my Index.razor page, it displays fine. (This was in a small sample app I wrote).

But when I move it to my application I want to use it in, which has a lot of stuff in the MainLayout.razor, it has a height of 0. I finally tried to force a height doing the following:

<div style="width: 600px; height: 600px;">
<AzureMap Id="map"
          CameraOptions="new CameraOptions { Zoom = 12 }"
          Controls="new Control[]
{
    new ZoomControl(new ZoomControlOptions { Style = ControlStyle.Auto }, ControlPosition.TopLeft),
    new CompassControl(new CompassControlOptions { Style = ControlStyle.Auto }, ControlPosition.BottomLeft),
    new StyleControl(new StyleControlOptions { Style = ControlStyle.Auto, MapStyles = MapStyle.All() }, ControlPosition.BottomRight)
}"
          StyleOptions="new StyleOptions { ShowLogo = false }"
          EventActivationFlags="MapEventActivationFlags.None().Enable(MapEventType.Ready)"
          OnReady="OnMapReadyAsync" />
</div>

But it's still a height of 0:

According to this reply, there needs to be a way to call the component to tell it to resize.

I've put this in as a bug rather than an enhancement because the component is not useable in many use cases without this.

[arnaudleclerc]

Because the library cannot guess what your application should look like, the styling is entirely up to you.

The samples should be displaying the map without any issue. Try to include the following css on your application and see if it works :

#map {
    position: fixed;
    width: 100%;
    height: 100%;
}

[DavidThielen]

That works great - thanks - dave