Blazor Map Overview

The Blazor Map component displays geospatial information organized in layers.

The component provides tile layers, shape (vector) layers, bubble layers, and marker layers.

Telerik UI for Blazor Ninja image

The Map component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Map

  1. Use the TelerikMap tag to add the component to your razor page.

  2. Add the MapLayer tag nested inside MapLayers.

  3. Set the Type property.

  4. Set the Attribution and Subdomains properties.

  5. Provide the UrlTemplate property.

A basic configuration of the Telerik Map.

@* This code snippet showcases an example of a basic Map configuration. *@

<TelerikMap>
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@Attribution"
                  Subdomains="@Subdomains"
                  UrlTemplate="@UrlTemplate">
        </MapLayer>
    </MapLayers>
</TelerikMap>

@code {
    public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
    public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
    public string Attribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
}

Layers

Tha 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 to 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....

Methods

The Map methods are accessible through its reference.

  • Refresh - redraws the component.

Get a reference to the Map and use its methods.

@* This code snippet showcases an example usage of the Refresh() method. *@

<TelerikButton OnClick="@( () => ChangeZoom() )">Change Size!</TelerikButton>
<br />
<br />

<TelerikMap @ref="MapRef" Zoom="@Zoom">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@Attribution"
                  Subdomains="@Subdomains"
                  UrlTemplate="@UrlTemplate">
        </MapLayer>
    </MapLayers>
</TelerikMap>

@code {
    TelerikMap MapRef { get; set; }

    public double Zoom { get; set; } = 4;

    public void ChangeZoom()
    {
        Zoom = 1;
        MapRef.Refresh();
    }

    public string[] Subdomains { get; set; } = new string[] { "a", "b", "c" };
    public string UrlTemplate { get; set; } = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
    public string Attribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
}

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.

Next Steps

Configure the Tile Layer

Using the Map Events

See Also

In this article