What is Vector Tiles?

A Vector tile is a lightweight format for storing geospatial vector data, optimized for rendering maps on web or mobile platforms. They contain raw geographic data like points, lines, and polygons and can be dynamically styled for customizable map appearances. Vector tiles enable interactive features like tooltips, clickable areas, and dynamic highlighting, enabling developers to create responsive, high-performance maps with various layers and styles.

What is Vector Tiles API?

Vector Tiles API allows developers to request geographic data as vector tiles, enabling the creation of custom, interactive maps. These tiles are linked to specific zoom levels and map regions, ensuring efficient data transfer and rendering. Using the Vector Tiles API, developers can dynamically style and render maps on the client side. This includes changing colors, adding labels, and applying different layers based on the same set of vector tiles. Vector tiles can be customised on the client side by styling them in a certain fashion.

Styling Vector Tiles

Styling vector tiles involves defining how the raw geographic data within the tiles is visually represented on the map. This includes setting the colors, line styles, symbols, labels, and other visual attributes of different map features like roads, buildings, water bodies, and land use areas. We conform to the MapLibre Style Specification. A map is composed of multiple layers, each representing a specific type of data (e.g., roads, buildings, parks). Each layer can be styled independently.

What is Style

Style refers to the set of rules and properties that determine how geographic data is visually represented on a map. A style defines the appearance of map features such as roads, buildings, water bodies, and land areas. It includes specifications for colors, line widths, text labels, icons, and other visual elements. For instance, at a higher zoom level, more details like minor roads and building footprints might be displayed, while at a lower zoom level, only major highways and city names might be displayed.
We support following APIs to fetch style related information.
Sample Request to fetch available styles:
curl --location "https://api.olamaps.io/tiles/vector/v1/styles.json?api_key=${your_api_key}" --header "X-Request-Id: XXX"
Sample Request to fetch rules/attributes for a particular style:
curl --location "https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard/style.json?api_key=${your_api_key}" --header "X-Request-Id: XXX"

Please refer to theAPI documentationfor further details.

Rendering vector tiles

Once we style our vector tiles, they need to be rendered efficiently in order to be shown on the map. You can use our in-house SDKs to do the same. We have multiple options based on the respective platform.
  • Web SDK
  • iOS SDK
  • Andriod SDK
  • Many other open source libraries are also available for rendering vector tiles such as MapLibre GL JS, DeckGL and so on.
    Following is the final output where an interactive map will be rendered using vector tiles by leveraging one of our SDKs.