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.

Install-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,
    };
}

Markers From Data

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 And Navigation

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

Parameters

Map

Parameter	Description	Type	Default
`ChildContent`	Defines tile layers, markers, shapes, and other map content rendered inside the map.	`RenderFragment`	`null`
`Options`	Configures map interaction, provider, zoom limits, and controls.	`MapOptions`	`new()`
`View`	Defines the map center, zoom level, and optional bounds. Updating the value after render moves the displayed map view.	`MapView`	`new()`

MapTileLayer

Parameter	Description	Type	Default
`Attribution`	Provides attribution text required by the tile provider.	`string`
`Id`	Identifies this layer for updates, events, and removal. Changing the value after initialization removes the previous provider layer and registers a new one.	`string`
`Interactive`	Enables pointer interaction for this layer when supported by the provider.	`bool`	`true`
`MaxZoom`	Limits this tile layer to the specified maximum zoom level.	`double?`	`null`
`MinZoom`	Limits this tile layer to the specified minimum zoom level.	`double?`	`null`
`Name`	Provides an optional display name for UI or diagnostics.	`string`
`Opacity`	Applies layer opacity to tile, marker, and shape rendering, where 1 is fully opaque and 0 is fully transparent.	`double`	`1d`
`Source`	Defines the raster tile source URL, typically using {z}, {x}, and {y} placeholders.	`string`
`Subdomains`	Defines optional tile subdomains used by the source URL.	`string[]`	`null`
`TileSize`	Defines the tile size in pixels.	`int`	`256`
`Visible`	Controls whether this layer is rendered on the map.	`bool`	`true`
`ZIndex`	Controls the layer ordering relative to other layers when supported by the provider.	`int?`	`null`

MapMarker

Parameter	Description	Type	Default
`Coordinate`	Defines the marker coordinate.	`MapCoordinate`	`null`
`Draggable`	Allows the marker to be moved by dragging.	`bool`	`false`
`Icon`	Defines a custom marker icon.	`MapMarkerIcon`	`null`
`Id`	Identifies this layer for updates, events, and removal. Changing the value after initialization removes the previous provider layer and registers a new one.	`string`
`Interactive`	Enables pointer interaction for this layer when supported by the provider.	`bool`	`true`
`Name`	Provides an optional display name for UI or diagnostics.	`string`
`Opacity`	Applies layer opacity to tile, marker, and shape rendering, where 1 is fully opaque and 0 is fully transparent.	`double`	`1d`
`PopupText`	Provides popup text opened by the marker.	`string`
`Title`	Provides browser title text for the marker.	`string`
`TooltipText`	Provides tooltip text displayed near the marker.	`string`
`Visible`	Controls whether this layer is rendered on the map.	`bool`	`true`
`ZIndex`	Controls the layer ordering relative to other layers when supported by the provider.	`int?`	`null`

MapMarkerLayer

Parameter	Description	Type	Default
`Data`	Provides the data items used to create markers.	`IEnumerable<TItem>`	`null`
`Id`	Identifies this layer for updates, events, and removal. Changing the value after initialization removes the previous provider layer and registers a new one.	`string`
`Interactive`	Enables pointer interaction for this layer when supported by the provider.	`bool`	`true`
`Name`	Provides an optional display name for UI or diagnostics.	`string`
`Opacity`	Applies layer opacity to tile, marker, and shape rendering, where 1 is fully opaque and 0 is fully transparent.	`double`	`1d`
`Visible`	Controls whether this layer is rendered on the map.	`bool`	`true`
`ZIndex`	Controls the layer ordering relative to other layers when supported by the provider.	`int?`	`null`

MapCircle

Parameter	Description	Type	Default
`Center`	Defines the circle center coordinate.	`MapCoordinate`	`null`
`Id`	Identifies this layer for updates, events, and removal. Changing the value after initialization removes the previous provider layer and registers a new one.	`string`
`Interactive`	Enables pointer interaction for this layer when supported by the provider.	`bool`	`true`
`Name`	Provides an optional display name for UI or diagnostics.	`string`
`Opacity`	Applies layer opacity to tile, marker, and shape rendering, where 1 is fully opaque and 0 is fully transparent.	`double`	`1d`
`Radius`	Defines the circle radius in meters.	`double`	`0`
`Style`	Controls the circle stroke and fill styling.	`MapShapeStyle`	`new()`
`Visible`	Controls whether this layer is rendered on the map.	`bool`	`true`
`ZIndex`	Controls the layer ordering relative to other layers when supported by the provider.	`int?`	`null`

MapPolyline

Parameter	Description	Type	Default
`Coordinates`	Defines the ordered coordinates connected by the polyline.	`IReadOnlyList<MapCoordinate>`	`null`
`Id`	Identifies this layer for updates, events, and removal. Changing the value after initialization removes the previous provider layer and registers a new one.	`string`
`Interactive`	Enables pointer interaction for this layer when supported by the provider.	`bool`	`true`
`Name`	Provides an optional display name for UI or diagnostics.	`string`
`Opacity`	Applies layer opacity to tile, marker, and shape rendering, where 1 is fully opaque and 0 is fully transparent.	`double`	`1d`
`Style`	Controls the polyline stroke styling.	`MapShapeStyle`	`new()`
`Visible`	Controls whether this layer is rendered on the map.	`bool`	`true`
`ZIndex`	Controls the layer ordering relative to other layers when supported by the provider.	`int?`	`null`

MapPolygon

Parameter	Description	Type	Default
`Id`	Identifies this layer for updates, events, and removal. Changing the value after initialization removes the previous provider layer and registers a new one.	`string`
`Interactive`	Enables pointer interaction for this layer when supported by the provider.	`bool`	`true`
`Name`	Provides an optional display name for UI or diagnostics.	`string`
`Opacity`	Applies layer opacity to tile, marker, and shape rendering, where 1 is fully opaque and 0 is fully transparent.	`double`	`1d`
`Rings`	Defines the polygon rings. The first ring is the outer boundary; additional rings can represent holes.	`IReadOnlyList<IReadOnlyList<MapCoordinate>>`	`null`
`Style`	Controls the polygon stroke and fill styling.	`MapShapeStyle`	`new()`
`Visible`	Controls whether this layer is rendered on the map.	`bool`	`true`
`ZIndex`	Controls the layer ordering relative to other layers when supported by the provider.	`int?`	`null`

Events

Map

Event	Description	Type
`Clicked`	Handles single-click interaction on the map surface.	`EventCallback<MapMouseEventArgs>`
`ContextMenu`	Handles context-menu interaction on the map surface.	`EventCallback<MapMouseEventArgs>`
`DoubleClicked`	Handles double-click interaction on the map surface.	`EventCallback<MapMouseEventArgs>`
`Ready`	Runs after the map provider has initialized the rendered map.	`EventCallback<MapReadyEventArgs>`
`ViewChanged`	Notifies when the bound map view changes.	`EventCallback<MapView>`
`ViewUpdated`	Reports view changes with bounds and the reason for the change.	`EventCallback<MapViewUpdatedEventArgs>`

MapMarker

Event	Description	Type
`Clicked`	Handles clicks on this marker.	`EventCallback<MapMarkerEventArgs>`
`Dragged`	Handles completed drag operations for this marker.	`EventCallback<MapMarkerDraggedEventArgs>`

MapMarkerLayer

Event	Description	Type
`CoordinateSelector`	Selects the marker coordinate from each data item.	`Func<TItem, MapCoordinate>`
`DraggableSelector`	Determines whether each marker can be dragged.	`Func<TItem, bool>`
`IconSelector`	Selects a custom icon for each marker.	`Func<TItem, MapMarkerIcon>`
`IdSelector`	Selects a stable marker identifier from each data item.	`Func<TItem, string>`
`MarkerClicked`	Handles clicks on data-bound markers.	`EventCallback<MapMarkerClickedEventArgs<TItem>>`
`MarkerDragged`	Handles completed drag operations for data-bound markers.	`EventCallback<MapMarkerDraggedEventArgs<TItem>>`
`PopupTextSelector`	Selects popup text for each marker.	`Func<TItem, string>`
`TitleSelector`	Selects the browser title text for each marker.	`Func<TItem, string>`
`TooltipTextSelector`	Selects tooltip text for each marker.	`Func<TItem, string>`

Methods

Map

Method	Description	Return	Parameters
`FitBounds`	Fits the map view to the specified bounds.	`ValueTask`	`MapBounds bounds, MapFitBoundsOptions options`
`GetBounds`	Reads the currently visible geographic bounds from the rendered map.	`ValueTask<MapBounds>`
`GetView`	Reads the current center, zoom level, and visible bounds from the rendered map.	`ValueTask<MapView>`
`InvalidateSize`	Invalidates the map size after its container size changes.	`ValueTask`
`PanTo`	Pans the map to the specified center coordinate.	`ValueTask`	`MapCoordinate center, MapAnimationOptions options`
`SetView`	Sets the map view to the specified center and zoom.	`ValueTask`	`MapCoordinate center, double zoom, MapAnimationOptions options`
`ZoomIn`	Increases the current zoom level.	`ValueTask`
`ZoomOut`	Decreases the current zoom level.	`ValueTask`

Blazorise Maps component

Components

Installation

NuGet

Imports

Service Registration

Examples

Basic

Markers From Data

Shapes

Events And Navigation

Providers

API

Parameters

Map

MapTileLayer

MapMarker

MapMarkerLayer

MapCircle

MapPolyline

MapPolygon

Events

Map

MapMarker

MapMarkerLayer

Methods

Map

On this page