Skip to main content

useMapLibre()

useMapLibre(deck, styleUrl, options): Map$1 | null

Hook to integrate a MapLibre GL map with a Deck.gl instance.

This hook manages the lifecycle of a MapLibre map, including initialization, style updates, and cleanup. It ensures the Deck.gl control is properly added to the map and handles cleanup when the component unmounts.

Parameters​

deck​

The Deck.gl IControl instance to add to the map

IControl | null

styleUrl​

string

The MapLibre style URL to use for the map

options​

MapOptions

MapLibre map options (container, center, zoom, etc.)

Returns​

Map$1 | null

The MapLibre map instance, or null if not yet initialized

Example​

function MapComponent() {
  const deckglInstance = useDeckgl();
  const container = useId();

  const mapOptions = useMemo(() => ({
    container,
    center: [-122.4, 37.8],
    zoom: 12,
  }), [container]);

  useMapLibre(
    deckglInstance as IControl,
    'https://tiles.example.com/style.json',
    mapOptions
  );

  return <div id={container} />;
}