Added in v2.1

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.

Components

Maps are composed from a parent Map and one or more child layer components. The child components describe what should be rendered; the selected provider handles the rendering details internally.

Component	Purpose
`Map`	Hosts the interactive map, manages the current view, and coordinates child layers, events, and programmatic navigation.
`MapTileLayer`	Defines the raster tile source used as the base map, including the source URL, attribution, zoom range, tile size, and optional subdomains.
`MapMarker`	Displays a single marker at a coordinate, with optional title, tooltip, popup text, custom icon, click handling, and dragging.
`MapMarkerLayer<TItem>`	Creates markers from a data collection by using selector functions for coordinates, text, icons, identifiers, and marker behavior.
`MapCircle`	Draws a circular area from a center coordinate and radius, with provider-neutral stroke and fill styling.
`MapPolyline`	Draws an ordered path through multiple coordinates, typically used for routes, tracks, or connections.
`MapPolygon`	Draws one or more closed rings to represent areas, boundaries, or zones, with optional stroke and fill styling.
`MapLayer`	Provides the shared base behavior for map layers, including visibility, opacity, ordering, interaction, and registration with the parent map.

Installation

NuGet

Install extension from NuGet.

dotnet add package Blazorise.Maps

Imports

In your main _Imports.razor add:

@using Blazorise.Maps

Service Registration

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.