# Vector Tile Map Provider

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`](https://www.telerik.com/winui/documentation/controls/radmap/features/providers/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](https://docs.mapbox.com/mapbox-gl-js/style-spec/) 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.

> note 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**

```C#
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.
	}
}
```

## See Also

* [Providers Overview](https://www.telerik.com/winui/documentation/controls/radmap/features/providers/providers)
* [Azure Map Provider](https://www.telerik.com/winui/documentation/controls/radmap/features/providers/azuremapprovider)