Interface: MarkerConfig

Represents the configuration for the creation of a marker in a map. Provides all necessary properties to create and customize a map marker.

Example

const markerConfig: MarkerConfig = {
  id: "coffee-shop-1",
  coordinate: { lat: 40.7128, lng: -74.006 },
  icon: "https://example.com/coffee-icon.png",
  text: "Coffee Shop",
  onClick: () => console.log("Marker clicked!"),
}

Properties

allFloors?

optional allFloors?: boolean;

Show the marker on every floor and outdoors, instead of only while floorId is displayed.

For positions that do not belong to one floor — a raw GPS fix, an entrance shared by all levels, a point being edited while the user browses floors. The marker still goes through the SDK’s floor handling (it is re-shown in step with every floor change and cleaned up with the map), which a marker added to MapVXMap.map directly would not.

Default Value

false

anchor?

optional anchor?: PositionAnchor;

A string indicating the part of the Marker that should be positioned closest to the coordinate set via coordinate. Options are 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', and 'bottom-right'.

Default Value

"center"

color?

optional color?: string;

Color of the SDK’s default icon (the dot shown when neither icon nor element is given), in any CSS color format.

coordinate

coordinate: LatLng

The geographic coordinates of the pointed position.

See

LatLng for coordinate structure

draggable?

optional draggable?: boolean;

Lets the user drag the marker. While it moves, the marker’s own coordinate follows it and automatic label collision avoidance re-runs; the drag callbacks below receive the position. Can be switched later with updateMarker.

Default Value

false

element?

optional element?: HTMLElement;

The HTML element associated with the marker. If provided, this element will be used instead of the icon and text properties.

Pair it with iconProperties when the element’s footprint is known: that pins the marker’s own box (and therefore its anchor point) instead of letting the element size it, and gives automatic label collision avoidance an exact rect to work with.

floorId?

optional floorId?: string;

Identifier for the floor on which the marker is located. Used for indoor navigation and floor-specific marker management.

icon?

optional icon?: string | HTMLElement;

The icon element to be displayed within the marker. Can be either a URL string or an HTML element.

iconProperties?

optional iconProperties?: IconProperties;

Additional properties for customizing the marker icon.

See

IconProperties for available customization options

id?

optional id?: string;

Unique identifier for the marker. If not provided, a hexadecimal key will be generated automatically.

labelPriority?

optional labelPriority?: number;

Priority used to resolve label collisions: when two markers’ labels would overlap, the one with the higher labelPriority keeps its preferred position (or any non-colliding position) first, and the other is displaced or hidden. Ties are broken by the order markers were added.

Default Value

0

maxLabelWidthPx?

optional maxLabelWidthPx?: number;

Maximum width, in pixels, of the marker’s text label before it is truncated with an ellipsis. Also used as the label’s footprint when computing automatic collision avoidance, so the visual cap and the layout math always agree.

Defaults to the map-level markerLayout.maxLabelWidthPx, which itself defaults to DEFAULT_MAX_LABEL_WIDTH_PX.

onClick?

optional onClick?: () => void;

The function to be executed when the marker is clicked.

Returns

void

onDrag?

optional onDrag?: (coordinate) => void;

Called on every move while the marker is being dragged.

Parameters

coordinate

LatLng

The marker’s current position

Returns

void

onDragEnd?

optional onDragEnd?: (coordinate) => void;

Called when the user drops the marker, with its final position.

Parameters

coordinate

LatLng

The marker’s final position

Returns

void

onDragStart?

optional onDragStart?: (coordinate) => void;

Called when the user starts dragging the marker, with its position at that moment.

Parameters

coordinate

LatLng

The marker’s position

Returns

void

popup?

optional popup?: string | HTMLElement | MarkerPopupConfig;

A popup attached to the marker: it opens when the marker is clicked and closes when it is clicked again or the map is clicked elsewhere, and it closes with the marker when the marker’s floor is hidden. A string is shown as plain text — never parsed as HTML — so user or API data can be passed safely; pass an element for rich content, or a MarkerPopupConfig for options.

refId?

optional refId?: string;

Reference identifier of the marker related place. Used to associate the marker with a specific place in the system.

rotation?

optional rotation?: number;

Rotation angle of the marker in degrees clockwise from north. Useful for directional markers (e.g. compass arrows). Combine with rotationAlignment: "map" to keep the marker pointing the same compass direction as the user rotates the map.

Default Value

0

rotationAlignment?

optional rotationAlignment?: Alignment;

Sets the rotationAlignment property of the marker. Controls how the marker rotates with the map.

See

Alignment for available alignment options

text?

optional text?: string | HTMLElement;

The text content to be displayed with the marker. Can be either a string or an HTML element.

textPosition?

optional textPosition?: TextPosition;

The preferred position of the marker’s text relative to its icon.

This is a starting preference, not a guaranteed final placement: when automatic label collision avoidance is enabled (see markerLayout on MapConfig), the SDK may move the label to a different side (or hide it) to avoid overlapping a neighboring marker’s icon or label.

See

TextPosition for available positioning options

textProperties?

optional textProperties?: TextProperties;

Additional properties for customizing the marker text. If text content is an instance of HTMLElement, this value will not be considered.

See

TextProperties for available customization options