VizzJson
Transform static JSON into dynamic, parameterized map configurations using the @@ prefix convention.
What is the @@ convention?
Instead of hardcoding values in your map configuration JSON, you use @@ prefixes to reference parameters, call functions, instantiate layers, and evaluate expressions — all from JSON. At runtime, these references are resolved into concrete values that MapLibre can render.
Resolution Pipeline
Configs are resolved in two stages:
JSON Config
→Stage 1
resolveParams()
@@#params.*
Stage 2
JSONConverter
@@function: @@type: @@=
Rendered Map
Prefix Reference
| Prefix | Purpose | Example |
|---|---|---|
| @@#params.X | Inject runtime parameter values | "raster-opacity": "@@#params.opacity" |
| @@function:name | Call a registered function | "@@function": "setQueryParams" |
| @@type: ClassName | Instantiate a class or React component | "@@type": "BasicLegend" |
| @@=[expression] | Evaluate an inline expression | "@@=geometry.coordinates" |
Try it out
Simple parameter resolution
Adjust the controls to see how @@#params references resolve to concrete values.
Input
{
"paint": {
"raster-opacity": "@@#params.opacity"
},
"layout": {
"visibility": "@@#params.visibility"
}
}Controls
Output
{
"paint": {
"raster-opacity": 0.8
},
"layout": {
"visibility": "visible"
}
}