map-gl-style-switcher/dist/react-map-gl.js

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

import { useControl } from 'react-map-gl/maplibre';
import { StyleSwitcherControl } from './index.js';

/**
 * 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>
 *   );
 * }
 * ```
 */
const MapGLStyleSwitcher = ({ styles, activeStyleId, theme = 'light', showLabels = true, showImages = true, position = 'bottom-left', animationDuration, maxHeight, rtl, classNames, onBeforeStyleChange, onAfterStyleChange, onStyleChange, }) => {
    useControl(() => new StyleSwitcherControl({
        styles,
        activeStyleId,
        theme,
        showLabels,
        showImages,
        animationDuration,
        maxHeight,
        rtl,
        classNames,
        onBeforeStyleChange,
        onAfterStyleChange: (from, to) => {
            // Call the provided onAfterStyleChange callback first
            onAfterStyleChange?.(from, to);
            // Then call the simplified onStyleChange callback
            onStyleChange?.(to.styleUrl);
        },
    }), {
        position,
    });
    // This component doesn't render anything visible itself
    return null;
};

export { MapGLStyleSwitcher, StyleSwitcherControl };
//# sourceMappingURL=react-map-gl.js.map