Hooks

React hooks for controlling map components and accessing the Mapbox GL instance.

Available Hooks

These hooks provide programmatic control over map components and access to the underlying Mapbox GL instance.

useMap

Access the Mapbox GL instance and loading state

Used with Map

useVideoControl

Control video layer playback with play, pause, and toggle

Used with MapVideoLayer

useLineAnimatedControl

Control animated line playback state

Used with MapLineAnimated

useMarkerAnimatedControl

Control animated marker playback state

Used with MapMarkerAnimated

useMap

Access the Mapbox GL map instance and loading state. Must be used within a Map component.

import { useMap } from "@/registry/map";

const MyComponent = () => {
  const { map, isLoaded } = useMap();

  const flyToLocation = () => {
    if (!map) return;

    map.flyTo({
      center: [-74.006, 40.7128],
      zoom: 14,
    });
  };

  return (
    <button onClick={flyToLocation} disabled={!isLoaded}>
      Fly to NYC
    </button>
  );
};

Return Value	Type	Description
`map`	mapboxgl.Map \| null	The Mapbox GL map instance
`isLoaded`	boolean	Whether the map has finished loading

useVideoControl

Control video layer playback. Pass the video layer ID to control a specific MapVideoLayer component.

import { useVideoControl } from "@/registry/map";

const VideoControls = () => {
  const { play, pause, toggle, isPlaying } = useVideoControl("my-video-layer");

  return (
    <div className="flex gap-2">
      <button onClick={play}>Play</button>
      <button onClick={pause}>Pause</button>
      <button onClick={toggle}>
        {isPlaying ? "Pause" : "Play"}
      </button>
    </div>
  );
};

Parameter	Type	Description
`layerId`	string	The ID of the video layer to control

Return Value	Type	Description
`play`	() => void	Start video playback
`pause`	() => void	Pause video playback
`toggle`	() => void	Toggle between play and pause
`isPlaying`	boolean	Current playback state

useLineAnimatedControl

Control animated line playback state. Use with MapLineAnimated component.

import { useLineAnimatedControl, MapLineAnimated } from "@/registry/map";

const AnimatedRoute = () => {
  const { isPlaying, start, stop, toggle } = useLineAnimatedControl();

  return (
    <>
      <MapLineAnimated
        id="route"
        path={routePath}
        autoStart={isPlaying}
      />
      <button onClick={toggle}>
        {isPlaying ? "Stop" : "Start"} Animation
      </button>
    </>
  );
};

Return Value	Type	Description
`start`	() => void	Start the animation
`stop`	() => void	Stop the animation
`toggle`	() => void	Toggle animation state
`isPlaying`	boolean	Current animation state

useMarkerAnimatedControl

Control animated marker playback state. Use with MapMarkerAnimated component.

import { useMarkerAnimatedControl, MapMarkerAnimated } from "@/registry/map";

const AnimatedMarker = () => {
  const { isPlaying, start, stop, toggle } = useMarkerAnimatedControl();

  return (
    <>
      <MapMarkerAnimated
        id="marker"
        coordinates={pathCoordinates}
        autoStart={isPlaying}
      />
      <button onClick={toggle}>
        {isPlaying ? "Stop" : "Start"} Marker
      </button>
    </>
  );
};

Return Value	Type	Description
`start`	() => void	Start the animation
`stop`	() => void	Stop the animation
`toggle`	() => void	Toggle animation state
`isPlaying`	boolean	Current animation state

← PreviousComponents Next →Reference