useMapManager

Hook to get mapManager instance inside or outside RMap.

This hook is used a lot internally to control the map instance. You probably won't need to use it.

Usage inside RMap

import { RMap, useMapManager, type MapManager } from "maplibre-react-components";
 
function ChildComponent() {
  // This component is inside RMap.
  // your mapManager instance is always defined and cannot be null.
  const mapManager: MapManager = useMapManager();
 
  return null;
}
 
export default function App() {
  return (
    <RMap>
      <ChildComponent />
    </RMap>
  );
}

If you use useMapManager inside <RMap /> and you're using TypeScript it is better not to specify an id for your useMapManager hook because you will not have to handle the null case. But keep in mind that this is just for TypeScript because useMapManager is always available when you are in <RMap />.

Usage outside RMap

If you want to access your map instance outside of RMap you must wrap your application in a <RMapContextProvider /> component. Moreover you must give an id to <RMap /> and provide this same id to useMapManager.

This might seem useless to provide an id if your application contains only one map instance but this precaution help TypeScript to return the correct type.

import { RMapContextProvider, RMap, useMapManager, type MapManager } from "maplibre-react-components";
 
function ChildComponent() {
  // If you use `useMapManager` outside <RMap /> you need to set the <RMap> `id` prop
  // and specify this id in your hook.
  // your mapManager instance can be null.
  const mapManager: MapManager | null = useMapManager("my-map");
 
  return (
    <div>
      <div>mapManager is {mapManager !== null ? "available": "not available"}</div>
      <RMap id="my-map"></RMap>
    </div>
  );}
 
export default function App() {
  return (
    <RMapContextProvider>
      <ChildComponent />
    </RMapContextProvider>
  );
}

Reference

import { type MapManager } from "maplibre-react-components";
 
// when used inside <RMap />
export function useMapManager(): MapManager;
 
// when used outside <RMap />
export function useMapManager(id: string): MapManager | null;