Vector Tiles

Vector Tiles datasources are used to deliver 2D geographic data in small, pre-rendered tiles that can be efficiently loaded and displayed in web maps. Unlike raster tiles, which are images, vector tiles contain raw geographic data (points, lines, polygons) that can be styled and rendered on the client side. This allows for more dynamic and interactive maps, as the styling of the features can be changed without needing to re-render the tiles on the server. Furthermore Vector tiles datasources are clickable in the map and thus "FeatureInfo" can be added to the layer definition in VC Map.

General settings

Option Description

Name

Name of the Datasource.

Description

Description of the Datasource (optional).

Bounding Box

Describes the bounding box of the data.
Clicking the button "Edit Bounding Box" opens a new map window where a bounding box can be defined interactively. Clicking the button "Draw new extent on map" activates the bounding box mode, allowing the user to define a bounding box by clicking twice on the map (e.g., top-right and bottom-left corners of the bounding box). The coordinates of the bounding box are automatically adopted in EPSG 4326.
Clicking the button "CLOSE" closes the map window.

URI

URI of the datasource.

Further explanation to Bounding Box

The Bounding Box must fit to the extent of the provided / requested data. If the bounding box is too small, the data will not be displayed correctly in the map / or clipped to the given Bounding Box. If the bounding box is too large, the algorithm will request more data as available, which leads to unneccessary and time consuming requests, that in the end will influence the overall performance of the map.

Min. level

The minumum level on which the features will be rendered in the map.

The minimum level can only be 2 levels lower, than the given base level. So if the base level is given with 14, the minimum rendering level can start at 12.

Max. level

The maximum level until which the features will be rendered in the map.

Tile provider

Choose the tile provider for the vector tiles. The following options are available:

  • URLTemplateTileProvider: The URL template tile provider allows you to specify a URL template for fetching vector tiles. The URL template should include placeholders for the tile coordinates (e.g., minx={minx}&miny={miny}&maxx={maxx}&maxy={maxy}) that will be replaced with the actual coordinates when making requests. See here: URL template tile provider for further information

  • StaticGeojsonTileProvider: The static GeoJSON tile provider allows you to provide a static GeoJSON file that contains the vector data. The GeoJSON file will be served as vector tiles to the map. See here: Static GeoJSON tile provider for further information

  • MVTTileProvider: The MVT (Mapbox Vector Tile) tile provider allows you to serve vector tiles in the MVT format. This format is optimized for efficient transmission and rendering of vector data in web maps. A URL to request data should look like that here: /datasource-data/XXX/{z}/{x}/{y}.mvt See here: MVT tile provider for further information

  • FlatGeobufTileProvider: The FlatGeobuf tile provider allows you to serve vector tiles in the FlatGeobuf format. This format is designed for efficient storage and retrieval of geospatial data, making it suitable for serving vector tiles in web maps. See here: FlatGeobuf tile provider for further information

ID Property

The property name of input data can be specified here, that contains the unique identifier for each feature. This property will be used to assign a unique ID to each object. If this option is not specified, a unique ID will be generated automatically for each feature.

Base Levels

The base level defines the level at which the vector tiles are created / requested. It determines the level of detail and the number of tiles that will be generated for the vector data. The base level should be chosen based on the desired level of detail and the performance requirements of the application. A higher base level will result in more detailed tiles but may require more storage and processing power, while a lower base level will result in less detailed tiles but may be more efficient for larger datasets or lower zoom levels. Depending on the chosen tile provider, either only one base level can be defined or multiple. If multiple can be defined, the implementation will request / fetch data on each given base level.

EPSG code

Only valid for FlatGeobuf tile provider - please specify the EPSG code of the coordinate reference system (CRS) used in the FlatGeobuf dataset. This is necessary to ensure that the data is correctly georeferenced and displayed in the VC Map. The EPSG code should be provided as an integer value, for example, "4326" for WGS 84.

Proj4 String

Only valid for FlatGeobuf tile provider - please specify the Proj4 string of the coordinate reference system (CRS) used in the FlatGeobuf dataset. This is necessary to ensure that the data is correctly georeferenced and displayed in the VC Map. The Proj4 string should be provided in the standard Proj4 format, for example, "+proj=longlat +datum=WGS84 +no_defs" for WGS 84. Or alternatively click on Static to fetch the proj4 string from https://epsg.io.

Style

If this option is enabled, a VC Map style can be applied to the vector tiles. The style must be provided as a JSON file in the input field. The style will be applied to the vector tiles when they are rendered in the map, allowing for customization of the appearance of the vector data based on the defined style rules. See here: Style information for further information
If you need more information on how rendering of features in VC Map will be done, look here

URL template tile provider

The URLTemplateTileProvider creates a Vectortile layer from a URL based GeoJSON. This tileprovider is great for service based queries, such as a WFS. The service only needs to output the data as GeoJSON and allow spatial queries. If a provider provides a URL template with pre-tiled GeoJSON files, this type of TileProvider can be used. An example call would be the following: http://myFeatureSource/layer/getFeatures?minx={minx}&miny={miny}&maxx={maxx}&maxy={maxy}. The placeholders in the URL template will be replaced with the actual tile coordinates when making requests for vector tiles. This allows for dynamic fetching of vector tiles based on the current map view and zoom level.

A valid URI in URI field should have the following form: http://myFeatureSource/layer/getFeatures?minx={minx}&miny={miny}&maxx={maxx}&maxy={maxy}

Advantage: This tile provider is suitable for service-based queries, such as WFS, where the service can output data in GeoJSON format and support spatial queries. It allows for dynamic fetching of vector tiles based on the current map view and zoom level. Fast displaying of larger vector datasets according to the principle "What U See is what U get" & viewport related request of the data & works great with WFS services.

Disadvantage: The performance of this tile provider depends on the performance of the underlying service and its ability to handle spatial queries efficiently. If the service is slow or not optimized for spatial queries, it may result in slower loading times for vector tiles in the map.

Please note that the URL template tile provider expects the data to be provided in GeoJSON format. If your data is in a different format, you may need to set up a service that can convert your data into GeoJSON format and support spatial queries to use this tile provider effectively. Furthermore, coordinates must be provided as WGS84 coordinates EPSG:4326

Static GeoJSON tile provider

The StaticGeojsonTileProvider creates a Vectortile layer from a static GeoJSON file. The data will be completely downloaded, but rendered with better performance by loading only the displayed map section. Compared to the classic GeoJSON data source, this method has better performance. The GeoJSON file must be provided via a URI and the URI must end with *.geojson.

A valid URI in the URI field looks as follows: https://raw.githubusercontent.com/…​/california.geojson.

Advantage: fast displaying of larger GeoJSON files in 2D & 3D & applying of individual styles.

Disadvantage: The complete file must always be loaded into the client first. Thus, depending on the size / amount of the data, the inital loading of the data can take a while (depending on the internet band width).

MVT tile provider

The MVT (Mapbox Vector Tile) tile provider allows you to serve vector tiles in the MVT or PBF format. This format is optimized for efficient transmission and rendering of vector data in web maps. Vector tiles are encoded as Google Protobufs (PBF), which allow for the serialization of structured data. For clarity, Mapbox vector tiles use the .mvt file extension. The specification details are largely structured around the rules implemented in the base .proto file. More details regarding Mapbox Vectortiles can be found here (https://docs.mapbox.com/vector-tiles/specification/)

Multiple base levels can be provided to the data source, like "baseLevels": [​13,14,​15​],​ ⇐ definition of levels where Data are requested from and tile levels are determined.

A valid URI in URI field should have the following form: /datasource-data/XXX/{z}/{x}/{y}.mvt or /datasource-data/XXX/{z}/{x}/{y}.pbf or https://mydataXXX/{z}/{x}/{y}.pbf or https://mydataXXX/{z}/{x}/{y}.mvt

Advantage: fast displaying of larger vector files & viewport related request of data & smaller data downloads due to PBF format.

Disadvantage: The MVT tile provider expects the data to be provided in MVT format. If your data is in a different format, you may need to set up a service that can convert your data into MVT format to use this tile provider effectively. Furthermore, coordinates must be provided as Web Mercator EPSG:3857.

PBF / MVT files may need to be calculated or are provided service based. FME can also write MVT tiles! Mapbox styling is not supported by virtualcitySYSTEMS.

FlatGeobuf tile provider

FlatGeobuf is an open 2D data format developed to efficiently stream large, heterogeneous 2D vector geodata. It is based on the FlatBuffers serialization library and uses a spatial index to enable fast querying and streaming of geospatial data. The FlatGeobuf data ource makes it possible to integrate FlatGeobuf data into the VC Publisher and thus into the VC Map. The FlatGeobuf tile provider allows you to serve vector tiles in the FlatGeobuf format. This format is designed for efficient storage and retrieval of geospatial data, making it suitable for serving vector tiles in web maps.

The URI must point to a FlatGeobuf file and the URI must end with ".fgb". A valid URI looks as follows: https://github.com/…​/countries.fgb.

Advantage: Faster displaying of larger vector files in 2D & 3D compared to "normal FlatGeoBuf datasource" & applying of individual styles.

Disadvantage: The FlatGeobuf tile provider expects the data to be provided in FlatGeobuf format. If your data is in a different format, you may need to set up a service that can convert your data into FlatGeobuf format to use this tile provider effectively.

Styles

Stiles can be defined as Vector styles, based on Open layers (https://openlayers.org/en/latest/examples/?q=styles) or as Declarative styles, based on Cesium 3D Tiles Styling https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling.

The style in the example below uses a legend to be displayed in the map and the attribute media of each feature to style the features. Below you will find one legend item of the style. It defines a fill color, a stroke color and a title. The result will be a rectangle box with the given fill color and the stroke line around it with given color and width. on the right side of the recatngle, the given title will be displayed in the same line. The used colors for stroke and fill coorespond to the style definition, see below

{
            "type": "FillLegendRow",
            "fill": {
              "color": "#85b66f"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "< 5 min"
          },

Since it is not guaranteed, that the values of the media property are numbers, the values are casted to numbers and then compared. Below an excerpt of the style definition is displayed. "strokeColor": "color('#232323', 1)" defines the stroke color for all features. Under color conditions, the Conditions for feature coloring is given. If "Number(${attributes.media}) < 5" the result of that expression is true, the color of the feature will be "color('#85b66f', 0.8)"

 "strokeColor": "color('#232323', 1)",
    "color": {
      "conditions": [
        [
          "Number(${attributes.media}) < 5",
          "color('#85b66f', 0.8)"
        ]
      ]
    }
Click to open the full example of a declarative style for vector tiles in the VC Map 
{
  "type": "DeclarativeStyleItem",
  "name": "walkability_overall",
  "properties": {
    "title": "walkability, overall",
    "legend": [
      {
        "type": "StyleLegendItem",
        "colNr": 1,
        "rows": [
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#85b66f"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "< 5 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#48f882"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "5 - 10 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#b2df8a"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "10 - 15 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#e2dc38"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "15 - 20 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#fb9938"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "20 - 25 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#e23b38"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "25 - 30 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#ab1446"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "30 - 60 min"
          },
          {
            "type": "FillLegendRow",
            "fill": {
              "color": "#7c7673"
            },
            "stroke": {
              "color": "#232323",
              "width": 1
            },
            "title": "> 60 min"
          }
        ]
      }
    ]
  },
  "declarativeStyle": {
    "show": "true",
    "strokeColor": "color('#232323', 1)",
    "color": {
      "conditions": [
        [
          "Number(${attributes.media}) < 5",
          "color('#85b66f', 0.8)"
        ],
        [
          "Number(${attributes.media}) <= 10",
          "color('#48f882', 0.8)"
        ],
        [
          "Number(${attributes.media}) <= 15",
          "color('#b2df8a', 0.8)"
        ],
        [
          "Number(${attributes.media}) <= 20",
          "color('#e2dc38', 0.8)"
        ],
        [
          "Number(${attributes.media}) <= 25",
          "color('#fb9938', 0.8)"
        ],
        [
          "Number(${attributes.media}) <= 30",
          "color('#e23b38', 0.8)"
        ],
        [
          "Number(${attributes.media}) < 60",
          "color('#ab1446', 0.8)"
        ],
        [
          "Number(${attributes.media}) >= 60",
          "color('#7c7673', 0.8)"
        ]
      ]
    }
  }
}

More information on stiles can be found here: VC Map styles

Rendering in VC Map

Vector tiles datasources can be rendered in two different ways in VC Map. The default rendering path is set to "raster" but can be set to "primitive" as well.

Raster renderer: The raster renderer creates draped images out of the vector features fetched via the tile providers and applies the defined styling. This method is pretty fast in rendering and displaying the features. Only visible features will be rendered in the map! Feature are clickable and "FeatureInfo" can be applied. Drawback is, that features will not be handled as vector geometries and thus vector properties and 3D styles (3D pins or 3D placemarkers) cannot be applied.

Primitive renderer: The primitive renderer renders the features as vector features, and thus vector properties and 3D styles (3D pins or 3D placemarkers) cannot be applied. Features are also clickable and "FeatureInfo" can be applied. Drawback is, due to higher rendering tasks, the map performance will be way lower than on "raster renderer"

How to: In the VC map in config editor of the layer you have to add "renderer": "primitive" to the layer definition to enable the primitive renderer.

Data Preview

The data preview allows a visual check of the configured data source before publication. It displays the data in the map window using the selected projection and within the defined extent. Users can interactively pan and zoom the map to review the display.
Changes to the data source or the extent are applied to the preview after clicking “Reload Map.”