LogoLogo
Sign upHelp CenterContactSocial
Home
Home
  • Overview
  • REST API
    • Getting started
    • Navigating maps and workspaces
    • Uploading files and URLs
    • Styling layers
    • Refreshing live data layers
    • Working with elements
    • Listening to updates using webhooks
    • API Reference
      • Authentication
      • Maps
      • Layers
      • Elements
      • Users
      • Comments
      • Embed Tokens
      • Sources
      • Projects
  • JS SDK
    • Getting started
    • General concepts
    • Controlling maps
    • Working with selection
    • Reading entities
    • Drawing elements
    • Working with layers
    • Layer filters
    • Building custom charts
    • Map interactions and viewport
    • Hiding and showing
    • Integrating with React
    • Sample application
    • Examples
    • API Reference
  • Felt Style Language
    • Getting started
    • Style definition blocks
      • The config block
      • The paint block
      • The label block
      • The legend block
      • The popup block
      • The attributes block
      • The filters block
    • Types of visualizations
      • Simple visualizations
      • Categorical visualizations
      • Numeric visualizations (color & size)
      • Heatmaps
      • Hillshade
    • Zoom-based Styling
      • Interpolators
    • Legends
    • Errors
    • Examples
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Felt Style Language

Zoom-based Styling

PreviousHillshadeNextInterpolators

Last updated 11 months ago

Was this helpful?

Zoom-based styling is useful to change how features and labels are shown at different zoom levels.

Most of the properties used on the style and label blocks can be defined using interpolators to enable zoom-based styling. Take a look at the full list of properties that can be interpolated in .

We support multiple types of interpolators: Step functions, linear, exponential and cubic bezier to enable your map looking like you want at each zoom level. See the page.

An example of a layer changing feature colors depending on the zoom level can be found below

"paint": {
  "color": {"linear": [[14, "red"], [20, "blue"]]},
  ...
}

On zoom levels lower than 14, features of this layer will be rendered in red color. On zoom levels higher than 20, features of this layer will be rendered in blue color.

In zooms between 14 and 20, color will be linearly interpolated between red and blue.

the full specification
Interpolators
Features at zoom level 14
Features at zoom level 17
Features at zoom level 20