StaticAttributes: {
    backgroundColor: string;
    borderColor: string;
    classList: string | string[];
    collisionBehavior: CollisionBehavior;
    color: string;
    content: HTMLElement;
    draggable: boolean;
    glyph: string | Element | URL;
    glyphColor: string;
    icon: string;
    position: Position;
    scale: number;
    title: string;
    zIndex: number;
}

StaticAttributes contains the base definition for all attribute-values.

Type declaration

  • backgroundColor: string

    The background-color for the marker pin. Can be specified in any format supported by CSS.

  • borderColor: string

    The border-color for the marker pin. Can be specified in any format supported by CSS.

  • classList: string | string[]

    A single classname or list of class names to be added to the content element.

  • collisionBehavior: CollisionBehavior

    The collision behavior controls how the marker interacts with other markers and labels on the map. See CollisionBehavior for more information.

  • color: string

    The color of the marker. Can be specified in any format supported by CSS.

    This is a shorthand property to set a default value for the three color-values (backgroundColor, borderColor and glyphColor) to matching colors.

    The backgroundColor will be set to the specified color, the border-color will be a darkened vertsion of the color and the glyph-color is set based on the brightness of the specified color to either a darkened or lightened version.

  • content: HTMLElement

    The content to replace the default pin. The specified html-element will be rendered instead of the default pin.

    The content element you provide here will have access to the style-properties of the marker (colors and scale) via css custom properties (e.g. color: var(--marker-glyph-color, white)).

  • draggable: boolean

    Flag to enable draggable markers. When using draggable markers, the position-attribute of the marker will not be automatically updated. You have to listen to the dragstart, drag and dragend events and update the position accordingly.

  • glyph: string | Element | URL

    The glyph to be shown inside the marker-pin. This can be a single letter or number, a dom-element or a URL-object pointing to an image file.

  • glyphColor: string

    The color of the glyph within the marker pin. Can be specified in any format supported by CSS.

  • icon: string

    The id of an icon to be fetched via the icons.IconProvider. The resulting icon will be shown

  • position: Position

    The position of the marker on the map.

  • scale: number

    The scale of the marker as a multiple of the original scale.

  • title: string

    The title of the marker element. Will be shown in the browsers default tooltip and should be provided for accessibility reasons.

  • zIndex: number

    Defines the z-ordering for the marker and is used to compute the priority for collision handling. See the official documentation for more information.