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

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

import { useRef, useMemo, useEffect } from 'react';
import { StyleSwitcherControl } from './index.js';

/**
 * 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' }} />;
 * }
 * ```
 */
function useStyleSwitcher(map, options) {
    const controlRef = useRef(null);
    const { position, ...controlOptions } = options;
    // Stringify options for deep comparison
    const optionsKey = useMemo(() => JSON.stringify(controlOptions), [controlOptions]);
    useEffect(() => {
        if (!map)
            return;
        // Create and add the control
        controlRef.current = new StyleSwitcherControl(controlOptions);
        map.addControl(controlRef.current, position || 'top-right');
        return () => {
            if (controlRef.current && map) {
                map.removeControl(controlRef.current);
                controlRef.current = null;
            }
        };
    }, [map, position, optionsKey, controlOptions]);
    return controlRef.current;
}

export { StyleSwitcherControl, useStyleSwitcher };
//# sourceMappingURL=react.js.map