MapsGL Layers Control

The MapsGLLayersControl component provides an interface for managing map layer visibility and styling through integration with the MapsGL SDK. It supports both individual and grouped layer controls, with built-in functionality for layer styling.

Features

Layer visibility management
Layer style customization
Optional layer grouping with single/multi-select support
Integration with MapsGL layer system
Built-in style controls

Usage

The component must be used within both MapsGLMapControllerProvider and MapsGLLayersProvider. It expects a config prop that defines the layer structure and options. For detailed configuration options, see the MapsGLLayersProvider documentation.

import { 
    MapsGLLayersControl, 
    MapsGLMapControllerProvider, 
    MapsGLLayersProvider 
    } from '@xweather/map-ui-sdk';
 
const layersConfig = [{
    id: 'radar',
    title: 'Radar',
    selected: true,
    settingsOptions: [{
        name: 'opacity',
        value: 70
    }]
}, {
    title: 'Conditions',
    group: [{
        id: 'temperatures',
        title: 'Temperatures',
        settingsOptions: [{
            name: 'opacity',
            value: 80
        }]
    }]
}];
 
export default function App() {
    return (
        <MapsGLMapControllerProvider>
            <MapsGLLayersProvider>
                <MapsGLLayersControl config={layersConfig} />
            </MapsGLLayersProvider>
        </MapsGLMapControllerProvider>
    );
}

Hooks

MapsGLLayersControl uses several hooks internally to manage layer state and styling. These hooks can be used to build completely custom layer control interfaces:

useLayerControl

Hook for managing individual layer state and styling.

Option	Description	Default
`id`	Type: `string` (required)Unique identifier for the layer
`settingsOptions`	Type: `LayerButtonOptionSetting[]` ()Array of style control options

Returns:

Name	Type	Description
`isActive`	`boolean`	Current visibility state of the layer
`handleToggle`	`() => void`	Function to toggle layer visibility
`controlSettings`	`ControlSettings[] \| null`	Processed settings for ControlView
`settingsState`	`Record<string, any>`	Current state of layer style settings

useLayerGroupControl

Hook for managing grouped layer behavior.

Option	Description	Default
`id`	Type: `string` (required)Unique identifier for the group
`options`	Type: `LayerButtonSegmentOptions[]` (required)Array of layer options in the group
`multiselect`	Type: `boolean` ()Whether multiple layers can be active	`false`

Returns:

Name	Type	Description
`isActive`	`boolean`	Whether the layer group is active (this is different than the individual layer active state)
`handleToggle`	`() => void`	Function to toggle the entire group
`handleOptionClick`	`(optionId: string) => void`	Function to toggle individual layers within the group

useLayersControl

Hook for accessing global layer state through MapsGLLayersProvider.

Returns:

Name	Type	Description
`layers`	`Record<string, LayerState>`	Global state of all layers
`addLayer`	`(layerId: string) => void`	Function to add a new layer to the map
`removeLayer`	`(layerId: string) => void`	Function to remove a layer from the map
`toggleLayer`	`(layerId: string) => void`	Function to toggle layer visibility
`updateLayerSetting`	`(layerId: string, setting: ValuePayload) => void`	Function to update layer style settings
`hideModal`	`() => void`	Function to hide the settings modal

Related Components

MapsGLLayersProvider: Manages global layer state and MapsGL integration
ControlView: Renders layer style controls

Layers Provider Timeline Control