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
  • Minimal visualization
  • Point layer example
  • Polygon layer example
  • Line layer example
  • Color category
  • Numeric visualization
  • Heatmap visualization

Was this helpful?

Export as PDF
  1. Felt Style Language

Examples

This page contains examples of different kinds of visualizations expressed in the Felt Style Language

Minimal visualization

{
  "version": "2.3",
  "type": "simple",
  "config": {},
  "style": {},
  "label": {}
}

Point layer example

{
  "version": "2.3",
  "type": "simple",
  "config": { "labelAttribute": ["oper_cln", "owner_cln"] },
  "paint": {
    "color": "#8F7EBF",
    "strokeColor": "#CEC5E8"
  },
  "label": {
    "haloColor": "#E9E4F7",
    "color": "#8F7EBF"
  }
}

Polygon layer example

{
  "version": "2.3",
  "type": "simple",
  "config": { "labelAttribute": ["name"] },
  "label": {
    "minZoom": 4,
    "color": "#804779",
    "haloColor": "#EBD3E8",
    "haloWidth": 1,
    "fontSize": [12, 21]
  }
}

Line layer example

{
  "version": "2.3",
  "type": "simple",
  "config": { "labelAttribute": ["WSR_RIVER_"] },
  "style": {
    "color": "hsl(217, 80%, 40%)"
  },
  "label": {
    "color": "hsl(217, 80%, 40%)",
    "fontStyle": "italic",
    "repeatDistance": 200
  }
}

Color category

{
  "version": "2.3",
  "type": "categorical",
  "config": {
    "categoricalAttribute": "primary_fu",
    "categories": ["Oil", "Coal", "Gas", "Hydro", "Wind", "Solar"]
  },
  "style": {
    "color": [
      "#EB9360",
      "#AD7B68",
      "#A4B170",
      "#7AB6C2",
      "#8F99CC",
      "#E5C550"
    ],
    "strokeColor": [
      "#FFC8A8",
      "#D4D4D4",
      "#CBD79D",
      "#A3D6E0",
      "#BCC3E5",
      "#F2DB85"
    ],
    "size": [[1.5, 6]],
    "strokeWidth": [[0.25, 2]]
  },
  "label": {
    "minZoom": 12,
    "placements": ["E", "W"],
    "color": [
      "#DE7D45",
      "#946E59",
      "#7E8C46",
      "#5B99A6",
      "#6270B2",
      "#CCA929"
    ],
    "haloColor": [
      "#FAEAE1",
      "#F2E9E4",
      "#EDF2DA",
      "#D8ECF0",
      "#E4E7F7",
      "#F2E8C2"
    ],
    "lineHeight": [1.2],
    "fontSize": [
      {
        "linear": [
          [12, 10],
          [20, 20]
        ]
      }
    ]
  }
}

Numeric visualization

{
  "version": "2.3",
  "type": "numeric",
  "config": {
    "numericAttribute": "Renter occupied (%)",
    "steps": [5, 20, 25, 35, 45, 100]
  },
  "legend": {"displayName": "auto"},
  "paint": {
    "color": "@galaxy",
    "opacity": 0.9,
    "strokeColor": ["#9e9e9e"],
    "strokeWidth": 0.5,
    "isSandwiched": true
  }
}

Heatmap visualization

{
  "version": "2.3",
  "type": "heatmap",
  "config": {},
  "legend": {"displayName": {"0": "Low", "1": "High"}},
  "paint": {
    "color": "@purpYlPink",
    "highlightColor": "#EA3891",
    "highlightStrokeColor": "#EA3891",
    "highlightStrokeWidth": {"linear": [[3, 0], [20, 2]]},
    "isSandwiched": false,
    "opacity": 0.9,
    "size": 10,
    "strokeColor": "#8F7EBF",
    "strokeWidth": {"linear": [[3, 0.8], [20, 2]]},
    "intensity": 0.2
  }
}
PreviousErrors

Last updated 11 months ago

Was this helpful?