Blazorise Maps component

Display interactive maps with tile layers, markers, and geographic shapes.

The Maps extension follows the same abstraction principles as the rest of Blazorise: applications work with Blazorise components and models instead of being coupled directly to a specific map provider.

The first implementation uses Leaflet internally while keeping the public component model provider-neutral. This allows additional map providers to be supported over time without changing how applications compose maps, layers, markers, and shapes.

To use the Map component, install the Blazorise.Maps package first.

Structure

A Map contains the layers and features to display. Add the tile source, markers, and shapes your map needs.

  • <Map>Hosts the map, manages its view, and coordinates child layers.
    • <MapTileLayer>Defines the raster tile source, attribution, zoom range, and tile options.
    • <MapMarker>Displays one location with optional text, icon, popup, and interaction.
    • <MapMarkerLayer>Creates markers from a collection using selectors for location and behavior.
    • <MapCircle>Draws a circular area from a center coordinate and radius.
    • <MapPolyline>Draws a route or path through coordinates.
    • <MapPolygon>Draws closed areas or boundaries with optional stroke and fill.

All layer components derive from MapLayer, which provides shared visibility, opacity, ordering, interaction, and registration behavior.

Installation

NuGet

Install extension from NuGet. 
dotnet add package Blazorise.Maps

Imports

In your main _Imports.razor add: 
@using Blazorise.Maps

Service Registration

Register the Maps extension after the Blazorise services. 
builder.Services
    .AddBlazorise()
    .AddBlazoriseMaps();

Examples

Basic

Use MapTileLayer to define the base map and MapMarker to display a location. 
<Map View="@view" Height="Height.Rem( 28 )">
    <MapTileLayer Source="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                  Attribution="&copy; OpenStreetMap contributors" />
    <MapMarker Coordinate="@split"
               Title="Split"
               PopupText="Split, Croatia" />
</Map>

@code {
    private readonly MapCoordinate split = new( 43.5081, 16.4402 );

    private MapView view = new()
    {
        Center = new( 43.5081, 16.4402 ),
        Zoom = 13,
    };
}

Data markers

Use MapMarkerLayer<TItem> to render markers from a collection. Provide IdSelector so each marker has a stable identifier across renders.

Selected place: none

<Map View="@view" Height="Height.Rem( 28 )">
    <MapTileLayer Source="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                  Attribution="&copy; OpenStreetMap contributors" />
    <MapMarkerLayer TItem="MapPlace"
                    Data="@places"
                    IdSelector="@( place => place.Id )"
                    CoordinateSelector="@( place => place.Coordinate )"
                    TitleSelector="@( place => place.Name )"
                    PopupTextSelector="@( place => place.Description )"
                    MarkerClicked="@OnPlaceClicked" />
</Map>

<Paragraph Margin="Margin.Is3.FromTop.Is0.FromBottom">
    Selected place: @selectedPlace
</Paragraph>

@code {
    private MapView view = new()
    {
        Center = new( 43.5081, 16.4402 ),
        Zoom = 13,
    };

    private readonly List<MapPlace> places =
    [
        new( "riva", "Riva Promenade", new( 43.5073, 16.4379 ), "Waterfront promenade by the harbor." ),
        new( "diocletian-palace", "Diocletian's Palace", new( 43.5081, 16.4402 ), "Historic palace in the city center." ),
        new( "marjan", "Marjan Hill", new( 43.5107, 16.4147 ), "Forested hill and park west of the old town." ),
    ];

    private string selectedPlace = "none";

    private Task OnPlaceClicked( MapMarkerClickedEventArgs<MapPlace> eventArgs )
    {
        selectedPlace = eventArgs.Item.Name;

        return Task.CompletedTask;
    }

    private sealed record MapPlace( string Id, string Name, MapCoordinate Coordinate, string Description );
}

Shapes

Add circles, polylines, and polygons as child layers inside the map. 
<Map View="@view" Height="Height.Rem( 28 )">
    <MapTileLayer Source="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                  Attribution="&copy; OpenStreetMap contributors" />
    <MapCircle Center="@split"
               Radius="1200"
               Style="@cityAreaStyle" />
    <MapPolyline Coordinates="@route"
                 Style="@routeStyle" />
    <MapPolygon Rings="@polygon"
                Style="@polygonStyle" />
</Map>

@code {
    private readonly MapCoordinate split = new( 43.5081, 16.4402 );

    private MapView view = new()
    {
        Center = new( 43.5081, 16.4402 ),
        Zoom = 13,
    };

    private readonly MapShapeStyle cityAreaStyle = new()
    {
        StrokeColor = "#2f80ed",
        FillColor = "#2f80ed",
        FillOpacity = 0.12,
    };

    private readonly MapShapeStyle routeStyle = new()
    {
        StrokeColor = "#d9480f",
        StrokeWidth = 4,
    };

    private readonly MapShapeStyle polygonStyle = new()
    {
        StrokeColor = "#2f9e44",
        FillColor = "#2f9e44",
        FillOpacity = 0.16,
    };

    private readonly IReadOnlyList<MapCoordinate> route =
    [
        new( 43.5073, 16.4379 ),
        new( 43.5081, 16.4402 ),
        new( 43.5094, 16.4349 ),
        new( 43.5107, 16.4147 ),
    ];

    private readonly IReadOnlyList<IReadOnlyList<MapCoordinate>> polygon =
    [
        [
            new( 43.5066, 16.4366 ),
            new( 43.5094, 16.4384 ),
            new( 43.5101, 16.4432 ),
            new( 43.5069, 16.4445 ),
            new( 43.5066, 16.4366 ),
        ],
    ];
}

Events

Handle map events and move the map programmatically with the component reference, or by updating the bound View.

Center: 43.5081, 16.4402 | Zoom: 13.0 | Last click: none

<Buttons Margin="Margin.Is3.FromBottom">
    <Button Color="Color.Primary" Clicked="@ShowSplit">
        Split
    </Button>
    <Button Color="Color.Secondary" Clicked="@ShowCroatia">
        Croatia
    </Button>
</Buttons>

<Map @ref="@mapRef"
     View="@view"
     ViewChanged="@OnViewChanged"
     Clicked="@OnMapClicked"
     Height="Height.Rem( 28 )">
    <MapTileLayer Source="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
                  Attribution="&copy; OpenStreetMap contributors" />
    <MapMarker Coordinate="@split"
               Title="Split"
               PopupText="Split, Croatia" />
</Map>

<Paragraph Margin="Margin.Is3.FromTop.Is0.FromBottom">
    Center: @view.Center.Latitude.ToString( "0.0000" ), @view.Center.Longitude.ToString( "0.0000" )
    | Zoom: @view.Zoom.ToString( "0.0" )
    | Last click: @lastMapClick
</Paragraph>

@code {
    private Map mapRef;

    private readonly MapCoordinate split = new( 43.5081, 16.4402 );

    private MapView view = new()
    {
        Center = new( 43.5081, 16.4402 ),
        Zoom = 13,
    };

    private string lastMapClick = "none";

    private Task ShowSplit()
        => mapRef.SetView( split, 13 ).AsTask();

    private Task ShowCroatia()
    {
        var bounds = new MapBounds(
            new MapCoordinate( 42.30, 13.40 ),
            new MapCoordinate( 46.60, 19.50 ) );

        return mapRef.FitBounds( bounds, new() { Padding = new( 24, 24 ) } ).AsTask();
    }

    private Task OnViewChanged( MapView changedView )
    {
        view = changedView;

        return Task.CompletedTask;
    }

    private Task OnMapClicked( MapMouseEventArgs eventArgs )
    {
        lastMapClick = $"{eventArgs.Coordinate.Latitude:0.0000}, {eventArgs.Coordinate.Longitude:0.0000}";

        return Task.CompletedTask;
    }
}

Providers

The current provider supports raster XYZ tile services through MapTileLayer. You can use OpenStreetMap or another compatible tile service by setting Source, Subdomains, and Attribution according to the service requirements.

Future providers can build on the same Blazorise map concepts, such as Map, MapMarker, MapCircle, MapPolyline, and MapPolygon, while adapting the rendering details internally.

Attribution is optional in the API, but tile providers often require it. When using OpenStreetMap tiles, set Attribution to credit OpenStreetMap contributors.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page