map-gl-style-switcher/dist/react-map-gl.d.ts

A customizable style switcher control for Mapbox GL JS and MapLibre GL JS

import React from 'react';
import { b as StyleItem } from './index-CsaOV7jZ.js';
export { I as IControl, c as StyleSwitcherClassNames, a as StyleSwitcherControl, S as StyleSwitcherControlOptions } from './index-CsaOV7jZ.js';

interface MapGLStyleSwitcherProps {
    /** Array of map styles to choose from */
    styles: StyleItem[];
    /** Currently active style ID */
    activeStyleId?: string;
    /** Theme of the control */
    theme?: 'light' | 'dark' | 'auto';
    /** Whether to show style labels */
    showLabels?: boolean;
    /** Whether to show style images */
    showImages?: boolean;
    /** Position of the control on the map */
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
    /** Animation duration in milliseconds */
    animationDuration?: number;
    /** Maximum height of the control */
    maxHeight?: number;
    /** Right-to-left layout */
    rtl?: boolean;
    /** Custom CSS class names */
    classNames?: Partial<{
        container: string;
        list: string;
        item: string;
        itemSelected: string;
        itemHideLabel: string;
        dark: string;
        light: string;
    }>;
    /** Callback when style is about to change */
    onBeforeStyleChange?: (from: StyleItem, to: StyleItem) => void;
    /** Callback when style has changed */
    onAfterStyleChange?: (from: StyleItem, to: StyleItem) => void;
    /** Simplified callback that just returns the new style URL */
    onStyleChange?: (styleUrl: string) => void;
}
/**
 * React component for adding a style switcher control to react-map-gl Map
 *
 * @example
 * ```tsx
 * import { MapGLStyleSwitcher } from 'map-gl-style-switcher';
 * import { Map } from 'react-map-gl/maplibre';
 * import 'map-gl-style-switcher/dist/map-gl-style-switcher.css';
 *
 * function MyMap() {
 *   const [mapStyle, setMapStyle] = useState('style-url');
 *
 *   return (
 *     <Map mapStyle={mapStyle} ...otherProps>
 *       <MapGLStyleSwitcher
 *         styles={styles}
 *         activeStyleId="voyager"
 *         onStyleChange={setMapStyle}
 *         position="bottom-left"
 *       />
 *     </Map>
 *   );
 * }
 * ```
 */
declare const MapGLStyleSwitcher: React.FC<MapGLStyleSwitcherProps>;

export { MapGLStyleSwitcher, StyleItem };