All docs
V20.1
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Vector Tile Providers

  • 5 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

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.

private void Form1_Load(object sender, EventArgs e) {
    ImageLayer layer = new ImageLayer();
    MapboxDataProvider dataProvider = new MapboxDataProvider();

    dataProvider.AccessToken = "Your_access_token_here";

    layer.DataProvider = dataProvider;
    mapControl1.Layers.Add(layer);
}

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.

private void Form1_Load(object sender, EventArgs e) {
    ImageLayer layer = new ImageLayer();
    MbTilesDataProvider dataProvider = new MbTilesDataProvider();
    dataProvider.FileUri = new Uri(@"D:\countries.mbtiles", UriKind.Absolute);
    layer.DataProvider = dataProvider;
    mapControl1.Layers.Add(layer);
}            

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.

ImageLayer layer = new ImageLayer();
UriBasedVectorTileDataProvider dataProvider = new UriBasedVectorTileDataProvider();            
dataProvider.TileUriTemplate = @"D:\PbfFiles\{x}-{y}-{level}.pbf";
layer.DataProvider = dataProvider;
mapControl1.Layers.Add(layer);

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.

    using DevExpress.XtraMap;
    using System;
    using System.IO;
    using System.Windows.Forms;
    //...
    private void Form1_Load(object sender, EventArgs e) {
        ImageLayer layer = new ImageLayer();
        VectorTileProvider dataProvider = new VectorTileProvider();
        layer.DataProvider = dataProvider;
        mapControl1.Layers.Add(layer);
    }
    public class VectorTileProvider : VectorTileDataProviderBase {
        public override Stream GetStream(long x, long y, long level) {
            // Your implementation here.
        }
    }
    

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.

If a style uses custom fonts (not installed on the client machine), specify a path to a directory that contains fonts (.TTF files) via the provider's FontFolder property. Otherwise, the default font (Segoe UI) is used.

Apply a Style

  1. The MapControl uses the Newtonsoft.Json library to parse style files. Install the Newtonsoft.Json package if your application does not reference this library.
  2. Use the VectorTileDataProviderBase.StyleFileUri property to define a path to a style file.
dataProvider.StyleFileUri = new Uri(@"D:\style.json", UriKind.Absolute);