Map useMaintainLayerOrder.tsx

0% Statements 0/12

0% Branches 0/4

0% Functions 0/3

0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { MutableRefObject, useEffect } from 'react';
import { MapRef } from 'react-map-gl/mapbox';
 
/**
 * Ensures that all given layers maintain strict order in the Mapbox layer stack.
 */
export const useMaintainLayerOrder = (mapRef: MutableRefObject<MapRef | null>, orderedLayerIds: string[]) => {
  useEffect(() => {
    const map = mapRef.current;
    if (!map) {
      return;
    }
 
    // Only move layers that exist
    const existingLayerIds = orderedLayerIds.filter((id) => map.getLayer(id));
 
    // Reverse iterate so first in array ends up lowest
    for (let i = existingLayerIds.length - 1; i >= 0; i--) {
      const layerId = existingLayerIds[i];
      try {
        map.moveLayer(layerId, i < existingLayerIds.length - 1 ? existingLayerIds[i + 1] : undefined);
      } catch (e) {
        // moveLayer will throw if layer doesn't exist in current style
      }
    }
  }, [mapRef, orderedLayerIds]);
};