Add MapsGL weather layers

This example demonstrates how to add and manage weather layers using the MapsGLLayersProvider. The provider offers a React-based state management solution for MapsGL weather layers, making it easy to control layer visibility and settings.

Key Features

Declarative layer management through React context
Built-in layer controls with toggle functionality
Automatic state synchronization with MapsGL
Collapsible interface layers UI

Implementation

Define your layer configuration:

import { LayersConfig } from '@xweather/maps-ui-sdk';
const layersConfig: LayersConfig = [{
    id: 'radar',
    title: 'Radar',
}, {
    title: 'Conditions', 
    group: [{
        id: 'temperatures',
        title: 'Temperatures',
        selected: true
    }, {
        id: 'wind',
        title: 'Winds',
        multiselect: true, 
        options: [{
            id: 'wind-barbs',
            title: 'Barbs',
        }, {
            id: 'wind-particles',
            title: 'Particles',
            selected: true
        }]
    }]
}, {
    title: 'Severe Weather',
    group: [{
        id: 'alerts',
        title: 'Alerts',
    }, {
        id: 'custom-lightning',
        title: 'Lightning',
        value: 'lightning-strikes'  
    }]
}];

The configuration supports:

Layers with id, title, value, and selected state. The id should match a valid MapsGL weather layer (see the MapsGL Weather Layers documentation (opens in a new tab) for a complete list) unless a custom id is needed. In that case, specify the actual weather layer code in the value property. For layer group option layers the selected state only applies if the group is selected.
Layer groups with multiple related layers.
Nested options with multiselect capability.

Create the basic drawer component. Use Anchor for positioning and add a drawer toggle:

import {
    Drawer,
    useDrawerContext,
    Anchor,
    VStack,
    HStack,
    Heading,
    MapsGLLayersControl,
} from '@xweather/maps-ui-sdk';
 
const LayersDrawer = () => {
    const { open } = useDrawerContext();
 
    return (
        <Anchor.Position offset={12}>
            <Anchor.Left className="z-20" offset={0}>
                <Drawer>
                    <VStack className='h-full'>
                        <HStack className="mx-4 mt-5 mb-9">
                            <Heading level={2}>Layers</Heading>
                        </HStack>
                        <div className='overflow-y-auto overflow-x-hidden'>
                            <MapsGLLayersControl config={layersConfig} />
                        </div>
                    </VStack>
                </Drawer>
            </Anchor.Left>
            <Anchor.TopLeft className="z-10">
                <IconButton
                    icon={StackIcon}
                    onClick={open}
                />
            </Anchor.TopLeft>
        </Anchor.Position>
    
);

The MapsGLLayersControl component handles rendering and managing layer interactions using the useLayerControl and useLayerGroupControl hooks.

Create a provider component to initialize the layer state using the layerStateFromConfig utility and wrap its children in the DrawerProvider and MapsGLLayersProvider:

import { useMemo, ReactNode } from 'react';
import {
    MapsGLLayersProvider,
    layerStateFromConfig,
    useMapsGLMapControllerContext,
    DrawerProvider,
} from '@xweather/maps-ui-sdk';
 
const LayersDrawerProvider = ({ children }: { children: ReactNode }) => {
    const { controller } = useMapsGLMapControllerContext();
    const layerState = useMemo(() => 
        layerStateFromConfig(layersConfig, controller), 
        [controller]
    );
 
    return (
        <MapsGLLayersProvider initialState={layerState}>
            <DrawerProvider>
                {children}
            </DrawerProvider>
        </MapsGLLayersProvider>
    );
};

The layerStateFromConfig utility converts the layer configuration into a layer state object that the MapsGLLayersProvider can use to manage layer visibility and settings.

Wrap LayersDrawer with the LayersDrawerProvider from the previous step and the MapsGLMapControllerProvider which is a dependency of the MapsGLLayersProvider:

import { MapsGLMapControllerProvider } from '@xweather/maps-ui-sdk';
 
export const WeatherLayers = () => (
    <MapsGLMapControllerProvider
        accessKeys={accessKeys}
        strategy="mapbox"
        map={map}
    >
        <LayersDrawerProvider>
            <LayersDrawer />
        </LayersDrawerProvider>
    </MapsGLMapControllerProvider>
);

For details on setting up the map and controller, see the Add a map controller with controls example.

Examples Layers Provider