Markers and popups

Elements that can be added to the map. The items in this section exist outside of the map's canvas element.

Marker

Creates a marker component

Extends Evented.

Example

Parameters

options(Object?)
options.element DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker.
options.anchor
default: 'center'
A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' .
options.offset The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.
options.color
default: '#3FB1CE'
The color to use for the default marker if options.element is not provided. The default is light blue.
options.scale
default: 1
The scale to use for the default marker if options.element is not provided. The default scale corresponds to a height of 41px and a width of 27px .
options.draggable
default: false
A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
options.clickTolerance
default: 0
The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). The default is to inherit map's clickTolerance.
options.rotation
default: 0
The rotation angle of the marker in degrees, relative to its respective rotationAlignment setting. A positive value will rotate the marker clockwise.
options.pitchAlignment
default: 'auto'
map aligns the Marker to the plane of the map. viewport aligns the Marker to the plane of the viewport. auto automatically matches the value of rotationAlignment .
options.rotationAlignment
default: 'auto'
map aligns the Marker 's rotation relative to the map, maintaining a bearing as the map rotates. viewport aligns the Marker 's rotation relative to the viewport, agnostic to map rotations. auto is equivalent to viewport .
legacyOptions(MarkerOptions?)

Methods

Events

A popup component.

Extends Evented.
options(Object?)
options.closeButton
default: true
If true , a close button will appear in the top right corner of the popup.
options.closeOnClick
default: true
If true , the popup will closed when the map is clicked.
options.closeOnMove
default: false
If true , the popup will closed when the map moves.
options.focusAfterOpen
default: true
If true , the popup will try to focus the first focusable element inside the popup.
options.anchor A string indicating the part of the Popup that should be positioned closest to the coordinate set via Popup#setLngLat . Options are 'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom' .
options.offset A pixel offset applied to the popup's location specified as:
  • a single number specifying a distance from the popup's location
  • a PointLike specifying a constant offset
  • an object of Points specifing an offset for each anchor position Negative offsets indicate left and up.
options.className Space-separated CSS class names to add to popup container
options.maxWidth
default: '240px'
A string that sets the CSS property of the popup's maximum width, eg '300px' . To ensure the popup resizes to fit its content, set this property to 'none' . Available values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
An extension of MapLibre GL JS