Examples

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

Minimal visualization

{
  "version": "2.3",
  "type": "simple",
  "config": {},
  "paint": {},
  "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_"] },
  "paint": {
    "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"]
  },
  "paint": {
    "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
  }
}

H3 visualization

{
  "config": {
    "steps": {"type": "quantiles", "count": 5},
    "aggregation": "sum",
    "binMode": "fixed",
    "baseBinLevel": 3,
    "numericAttribute": "capacity_mw"
  },
  "paint": {"color": "@riverine"},
  "type": "h3",
  "version": "2.3.1",
  "label": {},
  "legend": {"displayName": "auto"}
}