New to Telerik UI for WinUI? Start a free 30-day trial

Vector Tile Map Provider

Updated on Oct 6, 2026

The vector tile format allows you to store geospatial geometry data. This information can be combined with special styling data. A vector tile provider reads this information and, based on it, renders tile images. Compared to this, raster-based providers, like ArcGisMapProvider or OpenStreetMapProvider, download a ready-made raster image from the associated server, which increases the network traffic.

The VectorTileMapProvider class is the abstract base class that vector-tile-based map providers derive from. Currently, AzureMapProvider is the built-in provider that derives from VectorTileMapProvider.

Styling API

VectorTileMapProvider exposes the following members that control how vector tiles are styled:

StyleFileSource—A Uri pointing to a .json style file that defines the appearance of the vector tile layers. The Uri can point to an application resource (ms-appx:///), a local file (file://) or a remote endpoint (http:///https://). When not set, a built-in default style is used.
IgnoreStyle—A bool value indicating whether the default or custom style set via StyleFileSource should be ignored. When set to True, the NoStyleVectorTileRendering event starts firing for every tile that is about to be rendered.
NoStyleVectorTileRendering—An event that occurs for a vector tile that is about to be rendered while IgnoreStyle is True. This allows you to manually control the rendering, instead of relying on a style file.

Setting a custom StyleFileSource

XAML

<dataVisualization:RadMap x:Name="radMap">
	<dataVisualization:RadMap.Provider>
		<telerikMap:AzureMapProvider SubscriptionKey="Azure_Maps_Subscription_Key"
									 StyleFileSource="ms-appx:///Assets/Styles/custom-style.json"/>
	</dataVisualization:RadMap.Provider>
</dataVisualization:RadMap>

The NoStyleVectorTileRendering event handler receives a NoStyleVectorTileRenderingEventArgs argument that exposes the following properties:

ZoomLevel—The zoom level of the vector tile that is about to be rendered.
BackgroundColor—Gets or sets the background color of the vector tile.

Subscribing for the NoStyleVectorTileRendering event

C#
AzureMapProvider provider = new AzureMapProvider();
provider.SubscriptionKey = "Azure_Maps_Subscription_Key";
provider.IgnoreStyle = true;
provider.NoStyleVectorTileRendering += this.Provider_NoStyleVectorTileRendering;

this.radMap.Provider = provider;
C#
private void Provider_NoStyleVectorTileRendering(object sender, NoStyleVectorTileRenderingEventArgs e)
{
	e.BackgroundColor = Microsoft.UI.Colors.LightGray;
}

Creating a Custom Vector Tile Provider

You can create a custom provider by deriving from VectorTileMapProvider, the same way AzureMapProvider does. This allows you to reuse the StyleFileSource/IgnoreStyle API surface and to register your own map sources.

By default, a map source provides the tile location through a Uri, and the control downloads the tile data from it. If your custom source needs to provide the tile data via a Stream instead (for example, when the tiles are stored in a local database or are generated in code), implement the IMapStreamSource interface and its GetStream method. When the interface is implemented, the control calls GetStream for every tile that is not available in the tile cache, instead of requesting a Uri.

The stream can contain a vector tile (a Mapbox Vector Tile .pbf payload, optionally gzip-compressed), which is rendered according to the provider style, or a ready-made raster tile image (for example PNG or JPEG), which is displayed as is.

The GetStream method is called on the UI thread, so avoid long-running operations inside it. The tileLevel argument is the internal tile level of the map. To get the matching zoom level of the tile service, pass it to the protected ConvertTileToZoomLevel method of the map source.

Implementing the IMapStreamSource interface

public class CustomVectorMapSource : VectorTileMapSource, IMapStreamSource
{
	public CustomVectorMapSource()
		: base(minZoomLevel: 1, maxZoomLevel: 20, tileWidth: 256, tileHeight: 256)
	{
		this.UniqueId = "Custom Vector Map source";
	}

	public Stream GetStream(int tileLevel, int tilePositionX, int tilePositionY)
	{
		// Return a Stream with the tile data (vector tile or raster image) for the requested level, x and y positions.
	}
}