Vector Tile Providers

• Sep 18, 2024
• 4 minutes to read

Use a vector data tile source with the Map Control to optimize your application’s performance. When the control is bound to a vector provider, it only downloads shape definitions (geometries) and applies styles on the client-side. (Raster providers require more bandwidth to download pre-rendered tiles.)

Refer to the following sections for more information on supported vector tile sources and styles:

• Connect to Mapbox Service
• Load Data from an MBTiles File
• Load Tiles in PBF and MVT Formats
• Load Data from a Custom Source
• Vector Tile Styles

Connect to Mapbox Service

Mapbox Service provides vector tilesets. Each tileset consists of vector tiles in PBF format.

Important

Before you use the Mapbox Service, read the Invoices and billing and Terms of service pages.

You should register an access token to use this service. See the access token page for more information.

Use MapboxDataProvider to connect to Mapbox Tile Service and load the Mapbox Streets tileset to a map. To choose between available tilesets, use the MapboxDataProvider.Tileset property.

XAML

<dxm:MapControl>
    <dxm:ImageLayer>
        <dxm:MapboxDataProvider AccessToken="Your_Access_Token" />
    </dxm:ImageLayer>
</dxm:MapControl>

See the MapboxDataProvider page in the API Reference section for more information.

Load Data from an MbTiles File

Vector tiles can be stored as MbTiles files (wrapped SQLite databases). Use MbTilesDataProvider to load a MbTiles file stored locally or on a server.

XAML

<dxm:MapControl>
    <dxm:ImageLayer>
        <dxm:MbTilesDataProvider FileUri="D:\MapTiles\countries.mbtiles"/>
    </dxm:ImageLayer>
</dxm:MapControl>

See the MbTilesDataProvider page in the API Reference section for more information.

Load Tiles in PBF and MVT Formats

To load vector tiles in .PBF or .MVT format, use UriBasedVectorTileDataProvider. Specify its UriBasedVectorTileDataProvider.TileUriTemplate property to set a template that the Map Control uses to obtain tiles.

XAML

<dxm:MapControl>
    <dxm:ImageLayer>
        <dxm:UriBasedVectorTileDataProvider TileUriTemplate="D:\PbfFiles\{x}-{y}-{level}.pbf"/>
    </dxm:ImageLayer>
</dxm:MapControl>

See the UriBasedVectorTileDataProvider page in the API Reference section for more information.

Load Data from a Custom Source

Follow the steps below to implement a provider that loads tiles from a custom source.

• Create a provider class that implements VectorTileDataProviderBase.
• Implement the VectorTileDataProviderBase.GetStream method so that it returns a tile as a sequence of bytes for specific coordinates in the tile grid at the specified zoom level.

• Assign the provider to the ImageLayer.DataProvider property. Note that the ImageLayer.DataProvider is a content property. You can declare a provider in XAML directly after a layer’s declaration without wrapping it in opening and closing ImageLayer.DataProvider tags.

  XAML

  <dxm:MapControl>
      <dxm:ImageLayer>
          <local:VectorTileProvider/>
      </dxm:ImageLayer>
  </dxm:MapControl>
  

  C#

  public class VectorTileProvider : VectorTileDataProviderBase {
      public override Stream GetStream(long x, long y, long level) {
          // Your implementation here.            
      }
  }
  

  VB.NET

  Public Class VectorTileProvider
      Inherits VectorTileDataProviderBase
      Public Overrides Function GetStream(ByVal x As Long, ByVal y As Long, ByVal level As Long) As Stream
          ' Your implementation here.
      End Function
  End Class
  

Vector Tile Styles

If a default vector tile style does not meet your requirements, you can apply your style to vector tiles. Styles apply on a client’s side before rendering the map.

A style must be a valid JSON file. The Map Control supports layers and their properties:

• filter
• paint
  • fill-color
  • fill-opacity
  • line-color
  • line-opacity
  • line-width
  • text-color
• layout
  • visibility
  • text-field
  • text-font
  • text-max-width
  • text-size
  • text-transform

Property values can be set directly (for example, “text-size”: 10) or via an interpolation syntax (for example, “line-width”: {“base”: 1.2, “stops”: [[15, 1], [17, 4]]}).

The following color formats are supported: hsl, rgb, rgba, hsla, hex. You can use web color names, such as red or yellow.

Apply a Style

1. The MapControl uses the System.Text.Json library to parse style files. Install the System.Text.Json package if your .NET Framework application does not reference this library. .NET projects do not require manual installation of the System.Text.Json package, as it is already included in the .NET environment. Set the DevExpress.Map.Native.VectorTileStyleParser.ProcessingLibrary property to NewtonsoftJson to use the Newtonsoft.Json library instead.
2. Use the VectorTileDataProviderBase.StyleFileUri property to define a path to a style file.

XAML

<dxm:MbTilesDataProvider ... StyleFileUri="D:\Styles\basic-style.json"/>