Change any control — color ramp, opacity, outline, number of breaks. The map redraws instantly, client-side via WebGL. No page reload. No server call.
Experience Builder lets you pick one renderer and lock it in. With the SDK, you replace the renderer object whenever you want.
Color Ramp
Red Cross
Blues
Greens
Oranges
Purples
Terrain
Renderer Controls
Opacity
85%
Outline Width
0.5 px
Class Breaks
7
The SDK Code
// Swap the renderer in real time.
// No page reload. No server call.const breaks = colors.map((color, i) => ({
minValue: i * step,
maxValue: (i + 1) * step,
symbol: {
type: "simple-fill",
color: hexToRgba(color, opacity),
outline: { width: outlineW }
}
}));
layer.renderer = {
type: "class-breaks",
field: "Shape__Area",
classBreakInfos: breaks
};
// EB has no equivalent for this.
// The renderer is just a JS object —
// replace it whenever you want.
Loading World Countries...
Layer loaded — adjust any control to redraw the renderer