Blazor Map Overview

Updated on Sep 18, 2026

The Blazor Map component displays geospatial information organized in layers. The component provides tile layers, vector shape layers, bubble layers, and marker layers.

Creating Blazor Map

1. Use the TelerikMap tag to add the component to a Razor file.
2. Add a <MapLayer> tag nested inside <MapLayers>. Set its Type to MapLayersType.Tile.
3. Set the UrlTemplate parameter to a JavaScript function name that obtains subdomain, x, y, and zoom arguments dynamically and returns the required tile URL.
4. (optional) Set the Map Attribution and Subdomains parameters, depending on the specific tile provider.

Basic Telerik Map for Blazor

Example

View Source

<TelerikMap Height="85vh">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@MapAttribution"
                  Subdomains="@MapSubdomains"
                  UrlTemplate="mapUrlTemplateFunction">
        </MapLayer>
    </MapLayers>
</TelerikMap>

@* Move the JavaScript code to a separate JS file. *@
<script suppress-error="BL9992">
    function mapUrlTemplateFunction(context) {
        return `https://${context.subdomain}.tile.openstreetmap.org/${context.zoom}/${context.x}/${context.y}.png`;
    }
</script>

@code {
    private readonly string[] MapSubdomains = new string[] { "a", "b", "c" };
    private const string MapAttribution = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
}

Layers

The layers are responsible for organizing the Map information. Read more about the supported Blazor Map layers...

Markers

You can add different points with real coordinates on the map as markers. Read more about the Blazor Map Markers...

Pan and Zoom

The zoom operation can be performed with a double click on the map or by using the mouse scroll wheel. You can set the zoom level through the Zoom property.

The end user can pan the control by simply holding the left mouse button and dragging the map to a desired location.

Raster maps are divided into images (tiles) for serving over the web. Tiles are typically 256px squares. The top level (zoom level 0) displays the whole world as a single tile. Each progressive zoom level doubles the size of the Map.

Blazor Map also incorporates a navigation tool allowing the end user to easily zoom, pan and change the current view. You can change the navigation tool position by using the MapControlsNavigator.Position enum.

Events

The Blazor Map generates events that you can handle and further customize its behavior. Read more about the Blazor Map events....

Map Parameters

The Blazor Map provides various parameters that allow you to configure the component:

Parameter	Type	Description
Center	double[]	The map center. Coordinates are listed as [Latitude, Longitude].
MinZoom	double	The minimum zoom level. Typical web maps use zoom levels from 0 (the whole world) to 19 (sub-meter features).
MaxZoom	double	The maximum zoom level. Typical web maps use zoom levels from 0 (the whole world) to 19 (sub-meter features).
MinSize	double	The size of the map in pixels at zoom level 0.
Pannable	bool	Controls whether the user can pan the map.
WrapAround	bool	Specifies whether the map should wrap around the east-west edges.
Zoom	double	The initial zoom level. Typical web maps use zoom levels from 0 (the whole world) to 19 (sub-meter features). The map size is derived from the zoom level and minScale options: size = (2 ^ zoom) * minSize.
Zoomable	bool	Controls whether the map zoom level can be changed by the user.
Class	string	Specifies the class of the main DOM element.
Width	string	Specifies the width of the main DOM element.
Height	string	Specifies the height of the main DOM element.

MapControls parameters

The following MapControlsAttribution parameters enable you to customize the appearance of the Blazor Map Controls:

Parameter	Type	Description
Position	MapControlsPosition (enum)	Specifies the position of the attribtion control.

The following MapControlsNavigator parameters enable you to customize the appearance of the Blazor Map Controls:

Parameter	Type	Description
Position	MapControlsPosition (enum)	Specifies the position of the navigation control.

The following MapControlsZoom parameters enable you to customize the appearance of the Blazor Map Controls:

Parameter	Type	Description
Position	string	Specifies the position of the zoom control.

Map Reference and Methods

The Map exposes a Refresh method. Use it to redraw the component after making programmatic changes that do not apply automatically.

Get the Map reference and use its methods

Example

View Source

<TelerikButton OnClick="@ChangeMapZoom">Change Map Zoom</TelerikButton>

<TelerikMap @ref="MapRef"
            Height="75vh"
            Zoom="@MapZoom">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@MapAttribution"
                  Subdomains="@MapSubdomains"
                  UrlTemplate="mapUrlTemplateFunction">
        </MapLayer>
    </MapLayers>
</TelerikMap>

<script suppress-error="BL9992">
    function mapUrlTemplateFunction(context) {
        return `https://${context.subdomain}.tile.openstreetmap.org/${context.zoom}/${context.x}/${context.y}.png`;
    }
</script>

@code {
    private TelerikMap? MapRef { get; set; }

    private double MapZoom { get; set; } = 4;

    private readonly string[] MapSubdomains = new string[] { "a", "b", "c" };
    private const string MapAttribution = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";

    private void ChangeMapZoom()
    {
        MapZoom = 1;

        MapRef?.Refresh();
    }
}

Next Steps

• Configure Map Layers
• Handle Map Events

See Also

• Live Demo: Map