s2maps-gpu/dist/plugins/syncMove.js

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

/**
 * Sync the camera between multiple maps
 * ex.
 * ```ts
 * import { syncMove } from 's2maps-gpu/plugins';
 * // create multiple maps
 * const mapA = new S2Map({ ... });
 * const mapB = new S2Map({ ... });
 * const mapC = new S2Map({ ... });
 * // sync the maps
 * await syncMove(mapA, mapB, mapC);
 * ```
 * @param maps - The maps to sync with eachother
 */
export async function syncMove(...maps) {
    if (maps.length < 2)
        return;
    // Grab the first view
    let currentView = await maps[0].getView();
    // Update all the other maps to the same view
    for (let i = 0; i < maps.length; i++)
        maps[i].jumpTo(currentView);
    // Now listen for changes
    for (const map of maps) {
        /**
         * Sync the cameras and update the view if their views don't match
         * @param event - The move handler to update all the other maps.
         */
        const listener = (event) => {
            const { view } = event.detail;
            if (!viewAreTheSame(currentView, view)) {
                for (const otherMap of maps) {
                    if (otherMap.id !== map.id)
                        otherMap.jumpTo(view);
                }
                currentView = view;
            }
        };
        map.addEventListener('view', listener);
        map.addEventListener('delete', () => {
            map.removeEventListener('view', listener);
        }, { once: true });
    }
}
/**
 * Compare two views allowing from some tolerance
 * @param a - the first view
 * @param b - the second view
 * @returns - true if the views are different
 */
function viewAreTheSame(a, b) {
    const { abs } = Math;
    const eps = 1e-9;
    return (abs(a.zoom - b.zoom) > eps ||
        abs(a.lon - b.lon) > eps ||
        abs(a.lat - b.lat) > eps ||
        abs(a.bearing - b.bearing) > eps ||
        abs(a.pitch - b.pitch) > eps);
}