Simple visualizations

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.

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"]
  },
  "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.1"
}

The {"linear": [[zoom, value], …]} objects used for size, fontSize, and strokeWidth above are interpolators — values that change with zoom level. See Zoom-based styling and Interpolators for the full syntax; plain numbers work anywhere an interpolator does.

Raster layers can also use simple to display imagery as-is — see Raster visualizations.

More patterns

Icon markers (points). Set iconImage to draw points as icons; the icon takes the layer's color and size. See Icons for the full catalog.

{
  "version": "2.3.1",
  "type": "simple",
  "filters": ["status", "in", ["active"]],
  "paint": {
    "iconImage": "hospital",
    "iconFrame": "frame-circle",
    "color": "#E74C3C",
    "size": 4,
    "opacity": 0.9,
    "isClickable": true,
    "isHoverable": true
  },
  "legend": {}
}

Road-style casing (lines). A paint array renders last-to-first, so the wider casing layer goes second (underneath) and the narrower fill goes first (on top).

{
  "version": "2.3.1",
  "type": "simple",
  "config": {"labelAttribute": ["name"]},
  "paint": [
    {"color": "#FFFFFF", "size": 4, "lineCap": "round", "lineJoin": "round", "isClickable": true},
    {"color": "#374151", "size": 8, "lineCap": "round", "lineJoin": "round"}
  ],
  "label": {
    "color": "auto",
    "haloColor": "auto",
    "haloWidth": 2,
    "placement": "Above",
    "minZoom": 12
  },
  "legend": {}
}