s2maps-gpu/dist/plugins/react/S2Map.js

S2 Maps GPU - An open source, high-performance, and GPU-accelerated map engine for rendering large-scale, interactive maps.

import { jsx as _jsx } from "react/jsx-runtime";
import { preloadMap } from '../preload.js';
import { useEffect, useRef, useState } from 'react';
/**
 * S2Map React Component
 * @param props - Props passed to the component
 * @returns - The S2Map React Component
 */
export const ReactS2MapGPU = (props) => {
    const { mapOptions, mapReady, build, version, children, testing } = props;
    const containerRef = useRef(null);
    const [mapInstance, setMapInstance] = useState(null);
    useEffect(() => {
        let map = null;
        /** Initialize the map */
        const initializeMap = async () => {
            await preloadMap(build, version);
            const S2Map = window.S2Map; // Assuming S2Map is available globally after preload
            if (containerRef.current !== null) {
                const options = {
                    ...mapOptions,
                    container: containerRef.current,
                };
                map = new S2Map(options);
                if (testing === true)
                    window.testMap = map;
                setMapInstance(map);
                if (typeof mapReady === 'function') {
                    map.addEventListener('ready', () => {
                        mapReady(map); // Assert map is not null here as it's just been created
                    }, { once: true });
                }
            }
        };
        void initializeMap();
        return () => {
            if (mapInstance !== null)
                mapInstance.delete();
        };
    }, [mapOptions, mapReady, build, version]);
    return (_jsx("div", { id: "map", ref: containerRef, style: { position: 'absolute', top: 0, bottom: 0, width: '100%', height: '100%' }, children: children }));
};