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

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

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

type MapInstance = any;
interface UseStyleSwitcherOptions extends StyleSwitcherControlOptions {
    /** Position of the control on the map */
    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
}
/**
 * React hook for using StyleSwitcherControl with any map instance
 *
 * @example
 * ```tsx
 * import { useEffect, useRef } from 'react';
 * import { useStyleSwitcher } from 'map-gl-style-switcher/react';
 * import maplibregl from 'maplibre-gl';
 *
 * function MyMapComponent() {
 *   const mapContainer = useRef<HTMLDivElement>(null);
 *   const map = useRef<maplibregl.Map | null>(null);
 *
 *   const styles = [
 *     { id: 'streets', name: 'Streets', styleUrl: 'mapbox://styles/mapbox/streets-v11' },
 *     { id: 'satellite', name: 'Satellite', styleUrl: 'mapbox://styles/mapbox/satellite-v9' }
 *   ];
 *
 *   useEffect(() => {
 *     if (!mapContainer.current) return;
 *
 *     map.current = new maplibregl.Map({
 *       container: mapContainer.current,
 *       style: styles[0].styleUrl,
 *       center: [0, 0],
 *       zoom: 2
 *     });
 *
 *     return () => map.current?.remove();
 *   }, []);
 *
 *   useStyleSwitcher(map.current, {
 *     styles,
 *     theme: 'auto',
 *     position: 'top-right'
 *   });
 *
 *   return <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />;
 * }
 * ```
 */
declare function useStyleSwitcher(map: MapInstance | null, options: UseStyleSwitcherOptions): StyleSwitcherControl | null;

export { StyleSwitcherControl, StyleSwitcherControlOptions, useStyleSwitcher };