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
  • Vector example
  • Raster example

Was this helpful?

Export as PDF
  1. Felt Style Language
  2. Types of visualizations

Simple visualizations

PreviousTypes of visualizationsNextCategorical visualizations

Last updated 1 year ago

Was this helpful?

Simple visualizations are those that show each feature in a vector dataset using the same style or the image as it is in raster ones.

Simple visualizations must define "type": "simple" and a single value for each supported style and label properties.

Vector example

The Airports layer in Felt is an example of a simple visualization using a vector dataset

and is defined by the following style:

{
  "attributes": {
    "ele": {"displayName": "Elevation (meters)"},
    "faa": {"displayName": "FAA Code"},
    "iata": {"displayName": "IATA Code"},
    "icao": {"displayName": "ICAO Code"},
    "name": {"displayName": "Name"},
    "name_en": {"displayName": "Name (EN)"},
    "wikipedia": {"displayName": "Wikipedia entry"}
  },
  "config": {"labelAttribute": ["name_en", "name"]},
  "filters": [["name", "isnt", null], "and", ["name", "ne", ""]],
  "label": {
    "color": "hsl(40,30%,40%)",
    "fontSize": {"linear": [[12, 12], [20, 20]]},
    "fontStyle": "Normal",
    "fontWeight": 400,
    "haloColor": "hsl(40,20%,85%)",
    "haloWidth": 1.5,
    "justify": "auto",
    "letterSpacing": 0.1,
    "lineHeight": 1.2,
    "maxLineChars": 10,
    "maxZoom": 23,
    "minZoom": 10,
    "offset": [8, 0],
    "padding": 10,
    "placement": ["E", "W"],
    "visible": true
  },
  "legend": {},
  "paint": {
    "color": "hsl(40,30%,80%)",
    "highlightColor": "#EA3891",
    "highlightStrokeColor": "#EA3891",
    "highlightStrokeWidth": {"linear": [[3, 0], [20, 2]]},
    "isSandwiched": false,
    "opacity": 1,
    "size": {"linear": [[3, 1], [20, 6]]},
    "strokeColor": "hsl(40,20%,55%)",
    "strokeWidth": {"linear": [[3, 0.5], [20, 2]]}
  },
  "version": "2.3"
}

Raster example

This is an example of a simple visualization using a raster dataset

and is defined by the following style:

{
  "version": "2.3",
  "type": "simple",
  "config": {},
  "paint": {"isSandwiched": false, "opacity": 0.93}
}