@@#params — Parameter References

Inject runtime values into your JSON configs using dot-notation parameter references.

@@#params.<key>

How it works

Any string value starting with @@#params. is replaced with the corresponding parameter value at runtime. This is Stage 1 of the resolution pipeline — params are resolved before any other prefixes.

Parameters are defined in the params_config array alongside your config. Each parameter specifies a key, a default value, and optional constraints (min, max, step, options) that determine which UI control is rendered.

Syntax

Basic reference
{
  "paint": {
    "raster-opacity": "@@#params.opacity"
  }
}
Dot notation for nested access
{
  "paint": {
    "fill-color": "@@#params.style.fillColor"
  }
}

params_config shape

The system auto-detects which UI control to render based on the parameter definition:

ConfigControl
{ default: 0.8, min: 0, max: 1, step: 0.05 }Slider
{ default: true }Switch
{ default: "#ef4444" }Color picker
{ default: "visible", options: ["visible", "none"] }Select dropdown
{ default: "hello" }Text input

Examples

Opacity slider
A number default with min/max/step renders a slider control.
Input
{
  "paint": {
    "raster-opacity": "@@#params.opacity"
  }
}
Controls
0.8
Output
{
  "paint": {
    "raster-opacity": 0.8
  }
}
Visibility toggle
An options array renders a select dropdown.
Input
{
  "layout": {
    "visibility": "@@#params.visibility"
  }
}
Controls
Output
{
  "layout": {
    "visibility": "visible"
  }
}
Color picker
A hex color string default is auto-detected and renders a color picker.
Input
{
  "paint": {
    "fill-color": "@@#params.fillColor"
  }
}
Controls
Output
{
  "paint": {
    "fill-color": "#3b82f6"
  }
}
Nested dot notation
Use dots to access nested parameter structures.
Input
{
  "paint": {
    "fill-color": "@@#params.style.color",
    "fill-opacity": "@@#params.style.opacity"
  }
}
Controls
0.7
Output
{
  "paint": {}
}

Live preview

Raster layer with multiple paramslive preview
Combines opacity slider and visibility toggle on a satellite imagery layer.
Input
{
  "source": {
    "type": "raster",
    "tiles": [
      "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2021_3857/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg"
    ],
    "tileSize": 256
  },
  "styles": [
    {
      "type": "raster",
      "paint": {
        "raster-opacity": "@@#params.opacity"
      },
      "layout": {
        "visibility": "@@#params.visibility"
      }
    }
  ]
}
Controls
0.8
Output
{
  "source": {
    "type": "raster",
    "tiles": [
      "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2021_3857/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg"
    ],
    "tileSize": 256
  },
  "styles": [
    {
      "type": "raster",
      "paint": {
        "raster-opacity": 0.8
      },
      "layout": {
        "visibility": "visible"
      }
    }
  ]
}
Tips & Gotchas
  • Params are resolved in Stage 1, before any other @@ prefixes. This means you can use @@#params values inside @@function arguments.
  • Every parameter must have a default value — it determines both the initial state and the inferred control type.
  • Dot notation (@@#params.style.opacity) walks nested objects in the params map. The key in params_config should match the full dot path.