Skip to main content

Function: useBoundaryToggle()

useBoundaryToggle(baseSpec, groups): BoundaryToggleResult

Defined in: react/useBoundaryToggle.ts:54

Manages visibility state for a fixed set of BoundaryGroups over a base spec.

All groups start visible. The hook appends them once into spec and then drives layer.visible via toggleBoundaryGroup — avoiding source add/remove on each toggle (no map flicker).

Tracks hidden groups by stable source ID (getBoundaryGroupId) rather than object reference. This allows groups to be recreated (e.g. when paint overrides change) while preserving visibility state across renders.

Parameters

ParameterTypeDescription
baseSpecVisualizationSpecSpec without any boundary groups.
groupsreadonly BoundaryGroup[]Ordered list of BoundaryGroups to manage. Must be stable across renders (module constants or memoised); changing the array reference re-appends all groups to the spec.

Returns

BoundaryToggleResult

Derived spec and toggle controls.

Example

const statesGroup = createBoundaryGroup({
id: 'brazil-states',
data: 'https://example.com/estados.geojson',
});
const { spec, toggle, isVisible } = useBoundaryToggle(baseSpec, [statesGroup]);
return (
<>
<GeoVisProvider spec={spec}><GeoVisCanvas /></GeoVisProvider>
<button onClick={() => toggle(statesGroup)}>
{isVisible(statesGroup) ? 'Hide states' : 'Show states'}
</button>
</>
);