Controls

<MapControls><MapControlGroup>  <MapZoomIn />  <MapZoomOut />  <MapViewModeToggle />  <MapCompass /></MapControlGroup></MapControls>

Installation

pnpm add @notion-kit/map

Usage

Controls are regular map children, so they can be composed into one or more groups.

import {
  Map,
  MapCompass,
  MapControlGroup,
  MapControls,
  MapViewModeToggle,
  MapZoomIn,
  MapZoomOut,
} from "@notion-kit/map";

export function Example() {
  return (
    <Map center={[121.5654, 25.033]} zoom={12}>
      <MapControls>
        <MapControlGroup>
          <MapZoomIn />
          <MapZoomOut />
          <MapViewModeToggle />
          <MapCompass />
        </MapControlGroup>
      </MapControls>
    </Map>
  );
}

API Reference

MapControls

Positions one or more control groups over the map. It renders an absolutely positioned container and accepts children.

MapControlGroup

Groups individual controls into a compact vertical toolbar with shared borders and background.

MapZoomIn

Zooms the map in by one zoom level with a short animation.

MapZoomOut

Zooms the map out by one zoom level with a short animation.

MapLocate

Uses the browser geolocation API, flies the map to the current location, and optionally reports the resolved coordinates.

MapCompass

Shows the current bearing and pitch, then resets the map to north-up with zero pitch when clicked.

MapFullScreen

Toggles fullscreen mode for the current map container.

MapViewModeToggle

Switches between a flat 2D view and a pitched 3D view using MapLibre easeTo.