PanelDefinition

Defines a panel that can be rendered in the UI at various breakpoints.

Properties

`id`

Type:: string (required)

Unique panel identifier. Use this ID to associate a button with the panel via the panelId property.

`label`

Type:: string (required)

Accessible label. Used as the panel heading.

`mobile`

Type:: PanelBreakpointConfig (required)

Mobile breakpoint configuration. See Breakpoint Configuration below.

`tablet`

Type:: PanelBreakpointConfig (required)

Tablet breakpoint configuration. See Breakpoint Configuration below.

`desktop`

Type:: PanelBreakpointConfig (required)

Desktop breakpoint configuration. See Breakpoint Configuration below.

`focus`

Type:: boolean
Default:: true

Whether to move focus to the panel when it is added. Set to false when adding a panel on page load to avoid disrupting the user's current focus position.

// Page load — no focus
map.addPanel('info', { focus: false, desktop: { slot: 'left-top' } })

// User-triggered — focus the panel (default)
map.addPanel('info', { desktop: { slot: 'left-top' } })

`render`

Type:: ComponentType

A React/Preact component to render as the panel content. Receives Context as props (or PluginContext when used in a plugin manifest).

const MyPanelContent = ({ context }) => {
  const { pluginState } = context
  return <div>Panel content here</div>
}

NOTE

Use render when defining panels in a plugin manifest. For API methods like addPanel(), use html instead.

`html`

Type:: string

HTML content to render in the panel.

NOTE

Use html when adding panels via API methods like addPanel(). For plugin manifests with dynamic content, use render instead.

Breakpoint Configuration

Each breakpoint (mobile, tablet, desktop) accepts the following properties:

`slot`

Type:: string (required)

The slot where the panel should appear at this breakpoint. Slots are named regions in the UI layout.

`dismissible`

Type:: boolean

Whether the panel can be dismissed (closed) by the user. When false and open is true, the panel is always visible at this breakpoint and any associated panel-toggle button is automatically suppressed.

`exclusive`

Type:: boolean

Whether the panel is exclusive. An exclusive panel will hide other panels when it becomes visible.

`open`

Type:: boolean

Whether the panel is open. When true and combined with dismissible: false, the panel is always visible at this breakpoint and will be restored automatically when the breakpoint is entered.

`showLabel`

Type:: boolean
Default:: true

Whether to show the panel heading. If false, the heading is visually hidden but remains accessible to screen readers.

`modal`

Type:: boolean

Whether the panel is modal. A modal panel overlays the map and requires user interaction to dismiss.

`width`

Type:: string

Panel width. Accepts any valid CSS width value (e.g., '300px', '50%').