use-map.md

useMap

The useMap hook allows a component to reference the Map that contains it.

When used with MapProvider, this hook can also reference maps that are rendered outside of the current map component's direct render tree.

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

import {Map, useMap} from 'react-map-gl';

function Root() {
  return (
    <Map ... >
      <NavigationButton />
    </Map>
  );
}

function NavigateButton() {
  const {current: map} = useMap();

  const onClick = () => {
    map.flyTo({center: [-122.4, 37.8]});
  };

  return <button onClick={onClick}>Go</button>;
}

import {Map, useMap} from 'react-map-gl/maplibre';

function Root() {
  return (
    <Map ... >
      <NavigationButton />
    </Map>
  );
}

function NavigateButton() {
  const {current: map} = useMap();

  const onClick = () => {
    map.flyTo({center: [-122.4, 37.8]});
  };

  return <button onClick={onClick}>Go</button>;
}

When used with the MapProvider, this hook can also reference maps that are rendered outside of the current component's direct render tree as long as both trees are part of the current <MapProvider>.

import {MapProvider, Map, useMap} from 'react-map-gl';

function Root() {
  // Note: `useMap` will not work in <Root>, only children of <MapProvider> can use `useMap`

  return (
    <MapProvider>
      <Map id="myMapA" ... />
      <Map id="myMapB" ... />
      <NavigateButton />
    </MapProvider>
  );
}

function NavigateButton() {
  const {myMapA, myMapB} = useMap();

  const onClick = () => {
    myMapA.flyTo({center: [-122.4, 37.8]});
    myMapB.flyTo({center: [-74, 40.7]});
  };

  return <button onClick={onClick}>Go</button>;
}

import {MapProvider, Map, useMap} from 'react-map-gl/maplibre';

function Root() {
  return (
    <MapProvider>
      <Map id="myMapA" ... />
      <Map id="myMapB" ... />
      <NavigateButton />
    </MapProvider>
  );
}

function NavigateButton() {
  const {myMapA, myMapB} = useMap();

  const onClick = () => {
    myMapA.flyTo({center: [-122.4, 37.8]});
    myMapB.flyTo({center: [-74, 40.7]});
  };

  return <button onClick={onClick}>Go</button>;
}

See a full example here.

Signature

useMap(): {current?: MapRef, [id: string]: MapRef}

The hook returns an object that contains all mounted maps under the closest MapProvider. The keys are each map's id and the values are the MapRef.

If the hook is used inside a decendent of a Map component, the returned object additionally contains a current field that references the containing map.

Source

use-map.tsx