Class MapboxContextMenu

A context menu for Mapbox GL JS and Maplibre GL JS.

Example

const menu = new MapboxContextMenu({ theme: "dark" });

menu.addItem(new ContextMenuItem({ label: "Center here" })
  .on("click", (e) => map.flyTo({ center: e.lngLat })));

menu.addTo(map);

Hierarchy

default
- MapboxContextMenu

Index

Constructors

constructor

new MapboxContextMenu(options?: MapboxContextMenuOptions): MapboxContextMenu
Creates a new context menu for Mapbox GL JS or Maplibre GL JS.
Parameters
- Optionaloptions: MapboxContextMenuOptions
  Configuration options for the context menu.
  
  Configuration options for creating a Mapbox context menu. Extends ContextMenuOptions.
  - OptionalclassName?: string
    Custom CSS class name for the menu element.
  - Optionaltheme?: ContextMenuTheme
    The color theme: "light", "dark", or "auto" (follows system preference). Defaults to "auto".
  - Optionalwidth?: string | number
    The menu width as a CSS value (e.g., "200px") or number in pixels.
Returns MapboxContextMenu
Overrides ContextMenu.constructor
- Defined in components/MapboxContextMenu/MapboxContextMenu.ts:43

Accessors

className

set className(value: string): void
Sets the CSS class name for the menu element.
Parameters
- value: string
  The class name to apply. Will be combined with the base menu class.
Returns void
Inherited from ContextMenu.className
- Defined in components/ContextMenu/ContextMenu.ts:89

items

get items(): readonly MenuItem[]
Gets the context menu items.

Returns readonly MenuItem[]
The context menu items.
Inherited from ContextMenu.items
- Defined in components/ContextMenu/ContextMenu.ts:98

menuElement

get menuElement(): HTMLElement | null
Returns HTMLElement | null
Inherited from ContextMenu.menuElement
- Defined in components/ContextMenu/ContextMenu.ts:111

theme

get theme(): ContextMenuTheme
Gets the theme of the context menu.

Returns ContextMenuTheme
The current theme setting: "light", "dark", or "auto".
Inherited from ContextMenu.theme
- Defined in components/ContextMenu/ContextMenu.ts:72
set theme(value: ContextMenuTheme): void
Sets the theme of the context menu.
Parameters
- value: ContextMenuTheme
  The theme to use: "light" for light mode, "dark" for dark mode, or "auto" to follow the system preference.
Returns void
Inherited from ContextMenu.theme
- Defined in components/ContextMenu/ContextMenu.ts:80

width

get width(): string | number | undefined
Gets the width of the context menu.

Returns string | number | undefined
The width as a string (e.g., "200px") or number (in pixels), or undefined if not set.
Inherited from ContextMenu.width
- Defined in components/ContextMenu/ContextMenu.ts:55
set width(value: string | number | undefined): void
Sets the width of the context menu.
Parameters
- value: string | number | undefined
  The width as a string (e.g., "200px") or number (in pixels), or undefined to use the default width.
Returns void
Inherited from ContextMenu.width
- Defined in components/ContextMenu/ContextMenu.ts:63

Methods

addItem

addItem(item: MenuItem): this
Adds a menu item to the end of the context menu.
Parameters
- item: MenuItem
  The menu item to add. Can be a ContextMenuItem, ContextMenuSeparator, or ContextMenuSub.
Returns this
The context menu instance for method chaining.
Inherited from ContextMenu.addItem
- Defined in components/ContextMenu/ContextMenu.ts:132

addTo

addTo(map: Map$1, target?: LayerTarget): this
Adds the context menu to a Mapbox GL JS or Maplibre GL JS map.
Parameters
- map: Map$1
  The map instance.
- Optionaltarget: LayerTarget
  Optional target to restrict the menu to. Can be:
  
  A layer ID string (e.g., "building")
  
  An array of layer IDs (e.g., ["building", "poi"])
  
  A TargetDescriptor for Mapbox GL JS v3.9.0+ (e.g., { featuresetId: "buildings", importId: "basemap" })
Returns this
Overrides ContextMenu.addTo
- Defined in components/MapboxContextMenu/MapboxContextMenu.ts:57

fire

fire<K extends keyof ContextMenuEvents>(
type: K,
event: ContextMenuEvents[K],
): this
Fires an event, calling all registered handlers for the event type.
Type Parameters
- K extends keyof ContextMenuEvents
Parameters
- type: K
  The event type to fire.
- event: ContextMenuEvents[K]
  The event data to pass to the handlers.
Returns this
The instance for method chaining.
Inherited from ContextMenu.fire
- Defined in util/evented.ts:45

focusFirstItem

focusFirstItem(): void
Focus the first focusable item in the menu.

Returns void
Inherited from ContextMenu.focusFirstItem
- Defined in components/ContextMenu/ContextMenu.ts:118

insertItem

insertItem(index: number, item: MenuItem): this
Inserts a menu item at the specified index.
Parameters
- index: number
  The index at which to insert the item. If the index is out of bounds, the item will be added at the end.
- item: MenuItem
  The menu item to insert. Can be a ContextMenuItem, ContextMenuSeparator, or ContextMenuSub.
Returns this
The context menu instance for method chaining.
Inherited from ContextMenu.insertItem
- Defined in components/ContextMenu/ContextMenu.ts:143

listens

listens<K extends keyof ContextMenuEvents>(type: K): boolean
Checks whether there are any registered handlers for the specified event type.
Type Parameters
- K extends keyof ContextMenuEvents
Parameters
- type: K
  The event type to check.
Returns boolean
true if there are registered handlers for the event type, false otherwise.
Inherited from ContextMenu.listens
- Defined in util/evented.ts:60

off

off<K extends keyof ContextMenuEvents>(
type: K,
handler: EventHandler<ContextMenuEvents[K]>,
): this
Unregisters an event handler for the specified event type.
Type Parameters
- K extends keyof ContextMenuEvents
Parameters
- type: K
  The event type to stop listening for.
- handler: EventHandler<ContextMenuEvents[K]>
  The function to remove from the event handlers.
Returns this
The instance for method chaining.
Inherited from ContextMenu.off
- Defined in util/evented.ts:28

on

on<K extends keyof ContextMenuEvents>(
type: K,
handler: EventHandler<ContextMenuEvents[K]>,
): this
Registers an event handler for the specified event type.
Type Parameters
- K extends keyof ContextMenuEvents
Parameters
- type: K
  The event type to listen for.
- handler: EventHandler<ContextMenuEvents[K]>
  The function to call when the event is fired.
Returns this
The instance for method chaining.
Inherited from ContextMenu.on
- Defined in util/evented.ts:14

remove

remove(): this
Removes the context menu from the map and cleans up event listeners.

Returns this
Overrides ContextMenu.remove
- Defined in components/MapboxContextMenu/MapboxContextMenu.ts:71

removeItem

removeItem(item: MenuItem): this
Removes a menu item from the context menu, doing any clean up necessary.
Parameters
- item: MenuItem
  The menu item to remove.
Returns this
The context menu instance for method chaining.
Inherited from ContextMenu.removeItem
- Defined in components/ContextMenu/ContextMenu.ts:153

Class MapboxContextMenu

Example

Hierarchy

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

OptionalclassName?: string

Optionaltheme?: ContextMenuTheme

Optionalwidth?: string | number

Returns MapboxContextMenu

Accessors

className

Parameters

Returns void

items

Returns readonly MenuItem[]

menuElement

Returns HTMLElement | null

theme

Returns ContextMenuTheme

Parameters

Returns void

width

Returns string | number | undefined

Parameters

Returns void

Methods

addItem

Parameters

Returns this

addTo

Parameters

Returns this

fire

Type Parameters

Parameters

Returns this

focusFirstItem

Returns void

insertItem

Parameters

Returns this

listens

Type Parameters

Parameters

Returns boolean

off

Type Parameters

Parameters

Returns this

on

Type Parameters

Parameters

Returns this

remove

Returns this

removeItem

Parameters

Returns this

Settings

On This Page

`Optional`className?: string

`Optional`theme?: ContextMenuTheme

`Optional`width?: string | number