Blogs

Vector Tiles Styling

A vector tile layer involves a set of vector tiles available (streamed) from a server or opened from a local hard disk, and a set of style parameters that determines how the tiles are drawn and appear on the map. The data and style definitions are separated to enable dynamic, highly customized rendering by dataset or individual layer in ways not possible with static raster tile layers. Vector tile layers can be dynamically rendered based on client-side display resolution, night or day, transparency level, and other contextual considerations. Vector tiles, furthermore, provide full quality map feature resolution at every zoom level.

TatukGIS recently introduced significantly upgraded support for vector tile layer styles to read and dynamically display styles offered by leading hosting services and custom styles created using any vector tile style editor. Support for vector tile styles is provided in the Developer Kernel TGIS_MVTStyler class. Previous support for vector tiles (introduced in December 2020) was limited to simplified, pre-built styles.

TatukGIS supports the Mapbox Style Specification for vector tile layers, an open standard for style definitions created in the JSON format and used by leading vector tile hosting services, e.g., ESRI, OpenStreetMaps, Maptiler, Zoomstack, Mapbox. The specification describes the layer structure, indicates the order in which layers are painted, ways of painting (colors, icons, labels, sizes, etc.), symbology (sprites, shields, etc.), and criteria for selecting contents of the layer to be painted (maximum and minimum scales, filters, etc.).

The same upgraded ability to read and display vector tile layers with styles is available in TatukGIS’ desktop GIS Editor and free GIS Viewer products.

The example below is the definition for a vector tile map layer representing land use.

{
  "id": "landuse-residential",
  "type": "fill",
  "source": "openmaptiles",
  "source-layer": "landuse",
  "filter": [
    "all",
    ["==", "$type", "Polygon"],
    ["in", "class", "residential",     "suburb", "neighbourhood"]
  ],
  "paint": {"fill-color": "hsl(47, 13%, 86%)", "fill-opacity": 0.7}
}

The TGIS_MVTStyler class translates a style into an internal structure and, upon rendering a vector tile, applies layer parameters dynamically based on the current context and zoom level.

Using a vector tile layer in TatukGIS projects requires a .ttkwp configuration file. This file specifies the path to the web tiles layer, the style, and other parameters of the layer. For example:

[TatukGIS Layer]
Storage=WEBTILES
Type=CUSTOM
Name=World Basemap
Caption=World Basemap
Url1=url to a set of vector tiles ../tile/{level}/{row}/{col}.{ext}
Format=pbf
Style=url or path to json style
TileWidth=512
TileHeight=512
Copyright=Copyright comes here

All layer parameters are described in the TGIS_LayerWebTiles class of the TatukGIS Developer Kernel on-line documentation.

Images below demonstrate different styling applied to the same world base map vector tile dataset hosted by ESRI, OpenStreetMaps, Maptiler, Zoomstack, and Mapbox.

 

ESRI World Navigation Map


World Topographic Map


Charted Territory style


Light Gray Canvas style



Nova style


OpenStreetMap


World Street Map


World Street Map (Night) style


Mapbox bright style


World Topographic Map with shaded relief


Zoomstack Road


Zoomstack Road