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