Skip to Content
APIMarkersInterface: MarkerConfig

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

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"

coordinate

coordinate: LatLng

The geographic coordinates of the pointed position.

See

LatLng for coordinate structure


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


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

Last updated on