Map

"use client";import { Map } from "@notion-kit/map";export default function MapDefault() {  return (    <div className="h-[420px] w-full overflow-hidden rounded-md border">      <Map center={[121.5654, 25.033]} zoom={12} />    </div>  );}

Installation

pnpm add @notion-kit/map

Setup

Import the map stylesheet once at your app entry point. This includes the MapLibre base styles and the Notion Kit map component styles.

/* app/global.css */
@import "@notion-kit/map/style.css";

Usage

The Map component creates the underlying MapLibre instance and provides it to child components through context.

import { Map } from "@notion-kit/map";

export function Example() {
  return (
    <div className="h-[420px] w-full">
      <Map center={[121.5654, 25.033]} zoom={12} />
    </div>
  );
}

API Reference

Map

Creates the MapLibre map instance, resolves the light/dark style, exposes the map through context, and renders map children once the instance exists.

Map extends MapLibre MapOptions, except container and style.