Type Alias MarkerConfig

MarkerConfig: {
    anchor?: string;
    autoplay?: boolean;
    chromaKey?: {
        color?: ColorRepresentation | { b: number; g: number; r: number };
        enabled: boolean;
        similarity?: number;
        smoothness?: number;
    };
    circle?: number;
    className?: string;
    content?: string;
    data?: any;
    element?: MarkerElement;
    elementLayer?: MarkerElement;
    ellipse?: [number, number]
    | { rx: number; ry: number };
    hideList?: boolean;
    hoverScale?:
        | boolean
        | number
        | { amount?: number; duration?: number; easing?: string };
    html?: string;
    id: string;
    image?: string;
    imageLayer?: string;
    listContent?: string;
    opacity?: number;
    orientation?: "front" | "horizontal" | "vertical-left" | "vertical-right";
    path?: string;
    polygon?:
        | [number, number][]
        | [number, number][][]
        | [string, string][]
        | [string, string][][];
    polygonPixels?: [number, number][] | [number, number][][];
    polyline?: [number, number][] | [string, string][] | number[] | string[];
    polylinePixels?: [number, number][] | number[];
    position?:
        | ExtendedPosition
        | [ExtendedPosition, ExtendedPosition, ExtendedPosition, ExtendedPosition];
    rect?: [number, number] | { height: number; width: number };
    rotation?:
        | string
        | number
        | {
            pitch?: number
            | string;
            roll?: number | string;
            yaw?: number | string;
        };
    scale?: | [number, number]
    | { yaw?: [number, number]; zoom?: [number, number] }
    | (zoomLevel: number, position: Position) => number;
    size?: Size;
    square?: number;
    style?: Record<string, string>;
    svgStyle?: Record<string, string>;
    tooltip?:
        | string
        | {
            className?: string;
            content: string;
            position?: string;
            trigger?: "hover"
            | "click";
        };
    videoLayer?: string;
    visible?: boolean;
    zIndex?: number;
    zoomLvl?: number;
}

Configuration of a marker

Type declaration

  • Optionalanchor?: string

    Defines where the marker is placed toward its defined position

    Default

    'center center'
  • Optionalautoplay?: boolean

    Autoplay of videoLayer markers

    Default

    true
  • OptionalchromaKey?: {
        color?: ColorRepresentation | { b: number; g: number; r: number };
        enabled: boolean;
        similarity?: number;
        smoothness?: number;
    }

    Will make a color of the image/video transparent (only for imagerLayer, videoLayer)

    • Optionalcolor?: ColorRepresentation | { b: number; g: number; r: number }

      Default

      0x00ff00
    • enabled: boolean

      Default

      false
    • Optionalsimilarity?: number

      Default

      0.2
    • Optionalsmoothness?: number

      Default

      0.2
  • Optionalcircle?: number

    Radius of the circle

  • OptionalclassName?: string

    CSS class(es) added to the marker element (ignored for imageLayer, videoLayer)

  • Optionalcontent?: string

    HTML content that will be displayed on the side panel when the marker is clicked

  • Optionaldata?: any

    Any custom data you want to attach to the marker

  • Optionalelement?: MarkerElement

    Exiting DOM element

  • OptionalelementLayer?: MarkerElement

    Exiting DOM element

  • Optionalellipse?: [number, number] | { rx: number; ry: number }

    Radiuses of the ellipse

  • OptionalhideList?: boolean

    Hide the marker in the markers list

    Default

    false
  • OptionalhoverScale?: boolean | number | { amount?: number; duration?: number; easing?: string }

    Overrides the global defaultHoverScale

    Default

    null
  • Optionalhtml?: string

    HTML content of the marker

  • id: string

    Unique identifier of the marker

  • Optionalimage?: string

    Path to an image

  • OptionalimageLayer?: string

    Path to an image

  • OptionallistContent?: string

    The name that appears in the list of markers

    Default

    tooltip.content

  • Optionalopacity?: number

    Opacity of the marker

    Default

    1
  • Optionalorientation?: "front" | "horizontal" | "vertical-left" | "vertical-right"

    Deprecated

    Use rotation as an object

  • Optionalpath?: string

    Definition of the path

  • Optionalpolygon?:
        | [number, number][]
        | [number, number][][]
        | [string, string][]
        | [string, string][][]

    Array of points defining the polygon in spherical coordinates

  • OptionalpolygonPixels?: [number, number][] | [number, number][][]

    Array of points defining the polygon in pixel coordinates on the panorama image

  • Optionalpolyline?: [number, number][] | [string, string][] | number[] | string[]

    Array of points defining the polyline in spherical coordinates

  • OptionalpolylinePixels?: [number, number][] | number[]

    Array of points defining the polyline in pixel coordinates on the panorama image

  • Optionalposition?:
        | ExtendedPosition
        | [ExtendedPosition, ExtendedPosition, ExtendedPosition, ExtendedPosition]

    Position of the marker (required but for polygon and polyline) The array form is used for imageLayer and videoLayer

  • Optionalrect?: [number, number] | { height: number; width: number }

    Size of the rectangle

  • Optionalrotation?:
        | string
        | number
        | {
            pitch?: number
            | string;
            roll?: number | string;
            yaw?: number | string;
        }

    Rotation applied to the marker (ignored for polygon and polyline) If defined as a scalar, it applies to the roll (Z axis) Only 3D markers (imageLayer, videoLayer, elementLayer) support yaw and pitch

  • Optionalscale?:
        | [number, number]
        | { yaw?: [number, number]; zoom?: [number, number] }
        | (zoomLevel: number, position: Position) => number

    Configures the scale of the marker depending on the zoom level and/or the horizontal offset (ignored for polygon, polyline, imageLayer, videoLayer)

  • Optionalsize?: Size

    Size of the marker (required for image, recommended for html, ignored for others)

  • Optionalsquare?: number

    Size of the square

  • Optionalstyle?: Record<string, string>

    CSS properties to set on the marker (background, border, etc.) (ignored for imagerLayer, videoLayer)

  • OptionalsvgStyle?: Record<string, string>

    SVG properties to set on the marker (fill, stroke, etc.) (only for SVG markers)

  • Optionaltooltip?:
        | string
        | {
            className?: string;
            content: string;
            position?: string;
            trigger?: "hover"
            | "click";
        }

    Configuration of the marker tooltip

    Default

    {content: null, position: 'top center', className: null, trigger: 'hover'}

  • OptionalvideoLayer?: string

    Path to a video

  • Optionalvisible?: boolean

    Initial visibility of the marker

    Default

    true
  • OptionalzIndex?: number

    Drawing order

    Default

    1
  • OptionalzoomLvl?: number

    The zoom level which will be applied when calling gotoMarker() method or when clicking on the marker in the list

    Default

    current zoom level

Settings

Member Visibility