Mapsui Blazor getting started

Step 1

Create a new Blazor WebAssembly Application in your IDE. And select .NET 7.0 (Standard Term Support) as Framework.

Step 2

In the package manager console type:

PM> Install-Package Mapsui.Blazor -pre

Step 3

In Index.razor add this to the to Page.

@using Mapsui.UI.Blazor

<div class="container">
    <div class="row">
        <div class="col border rounded p-2 canvas-container">
            <MapControlComponent @ref="_mapControl" />
        </div>
    </div>
</div>

<style>
    .canvas-container canvas {
        width: 100%;
        height: 80vh;
    }
</style>

@code 
{
    private MapControl? _mapControl;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            if (_mapControl != null)
                _mapControl.Map?.Layers.Add(Mapsui.Tiling.OpenStreetMap.CreateTileLayer());
        }
    }
}

Step 6

Run it and you should see a map of the world.

Troubleshooting

Text is not displayed

Add Follwing to the Blazor project, is a workaround that text is rendered.

   <ItemGroup>
	<PackageReference Include="HarfBuzzSharp.NativeAssets.WebAssembly" Version="2.8.2.3" GeneratePathProperty="true" />
    <NativeFileReference Include="$(PKGHarfBuzzSharp_NativeAssets_WebAssembly)\build\netstandard1.0\libHarfBuzzSharp.a\3.1.12\libHarfBuzzSharp.a" />
  </ItemGroup>