Tile Layer

The tile layer works by rendering images that display the actual map. These images are requested from third-party services that conform to the Tile Map Service standard and support the WGS 84 projection standards.

The built-in configuration options of the MapLayer allow you to set an URL template via the UrlTemplate property that will access the service and provide the needed images.

Licenses and Official Author rights to the Tile Layer Images are determined by the used Web Map Service. The Telerik Map only provides an UI control that allows you to setup and place a map in an application, built via Blazor techniques. You need to provide proper attribution with the correct copyright notice and, if needed, establish an account with the map owner to ensure unlimited/fast access.

To configure a Map Layer of type Tile:

1. Add the TelerikMap tag.
2. Set the Type parameter of the MapLayer to Tile.
3. Set the Attribution and Subdomains parameters.
4. Provide the UrlTemplate property.

The following example demonstrates how to configure the Map Tile Layer.

The Map Tile Layer configuration.

<TelerikMap Center="@MapCenter"
            Zoom="3">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@LayerAttribution"
                  Subdomains="@LayerSubdomains"
                  UrlTemplate="@LayerUrlTemplate">
        </MapLayer>
    </MapLayers>
</TelerikMap>

@code {
    private double[] MapCenter { get; set; } = new double[] { 30.268107, -97.744821 };

    public readonly string[] LayerSubdomains = new string[] { "a", "b", "c" };
    public const string LayerUrlTemplate = "https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png";
    public const string LayerAttribution = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";

}

The Map component provides two ways to define the UrlTemplate of tile layers and the MapLayerMarkerSettings Template of marker layers. See Map Content Security Policy for more information and comparison.