Interface MarkerOptions

Objects that implement this interface will create or interact with a marker control.

See

Mapbox Marker Parameters

interface MarkerOptions {
    lnglat: LngLatLike;
    anchor?: Anchor;
    clickTolerance?: number;
    color?: string;
    draggable?: boolean;
    offset?: PointLike;
    on?: {
        click?: ((evt) => void) | ((evt) => any);
        drag?: ((evt) => void) | ((evt) => any);
        dragend?: ((evt) => void) | ((evt) => any);
        dragstart?: ((evt) => void) | ((evt) => any);
    };
    pitchAlignment?: Alignment;
    rotation?: number;
    rotationAlignment?: Alignment;
    scale?: number;
}

Hierarchy (view full)

  • Omit<MarkerOptionsGL, "element">
  • OnEvents<MarkerEventTypes>
    • MarkerOptions

Properties

lnglat anchor? clickTolerance? color? draggable? offset? on? pitchAlignment? rotation? rotationAlignment? scale?

Properties

lnglat

lnglat: LngLatLike

The location of the marker on the map.

Optional anchor

anchor?: Anchor

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'. The default value os 'center'

Optional clickTolerance

clickTolerance?: number

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 (0) is to inherit map's clickTolerance.

Optional color

color?: string

The color to use for the default marker if options.element is not provided. The default is light blue (#3FB1CE).

Optional draggable

draggable?: boolean

A boolean indicating whether or not a marker is able to be dragged to a new position on the map. The default value is false

Optional offset

offset?: PointLike

The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.

Optional on

on?: {
    click?: ((evt) => void) | ((evt) => any);
    drag?: ((evt) => void) | ((evt) => any);
    dragend?: ((evt) => void) | ((evt) => any);
    dragstart?: ((evt) => void) | ((evt) => any);
}

A collection of handlers for events with names defined by the EventTypes generic.

Type declaration

Example

on: {
  click: evt => console.log(evt),
  drag: evt => console.log(evt)
};

Optional pitchAlignment

pitchAlignment?: Alignment

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. The default value is auto.

Optional rotation

rotation?: number

The rotation angle of the marker in degrees, relative to its rotationAlignment setting. A positive value will rotate the marker clockwise. The default value is 0.

Optional rotationAlignment

rotationAlignment?: Alignment

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. The default value is auto

Optional scale

scale?: number

The scale to use for the default marker if options.element is not provided. The default scale (1) corresponds to a height of 41px and a width of 27px.

Settings

Member Visibility

Theme

On This Page

lnglatanchorclickTolerancecolordraggableoffsetonpitchAlignmentrotationrotationAlignmentscale