Photo Sphere Viewer
    Preparing search index...

    Type Alias MarkerConfig

    Configuration of a marker

    type 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;
        path?: string;
        polygon?:
            | [number, number][]
            | [number, number][][]
            | [string, string][]
            | [string, string][][]
            | SphericalPosition[]
            | SphericalPosition[][];
        polygonPixels?:
            | [number, number][]
            | [number, number][][]
            | PanoramaPosition[]
            | PanoramaPosition[][];
        polyline?: [number, number][] | [string, string][] | SphericalPosition[];
        polylinePixels?: [number, number][] | PanoramaPosition[];
        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;
    }
    Index

    Properties

    anchor? autoplay? chromaKey? circle? className? content? data? element? elementLayer? ellipse? hideList? hoverScale? html? id image? imageLayer? listContent? opacity? path? polygon? polygonPixels? polyline? polylinePixels? position? rect? rotation? scale? size? square? style? svgStyle? tooltip? videoLayer? visible? zIndex? zoomLvl?

    Properties

    anchor?: string

    Defines where the marker is placed toward its defined position

    'center center'
    autoplay?: boolean

    Autoplay of videoLayer markers

    true
    chromaKey?: {
        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)

    Type declaration

    • Optionalcolor?: ColorRepresentation | { b: number; g: number; r: number }
      0x00ff00
    • enabled: boolean
      false
    • Optionalsimilarity?: number
      0.2
    • Optionalsmoothness?: number
      0.2
    circle?: number

    Radius of the circle

    className?: string

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

    Optionalcontent

    content?: string

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

    data?: any

    Any custom data you want to attach to the marker

    element?: MarkerElement

    Exiting DOM element

    elementLayer?: MarkerElement

    Exiting DOM element

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

    Radiuses of the ellipse

    hideList?: boolean

    Hide the marker in the markers list

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

    Overrides the global defaultHoverScale

    null
    html?: string

    HTML content of the marker

    id: string

    Unique identifier of the marker

    image?: string

    Path to an image

    imageLayer?: string

    Path to an image

    listContent?: string

    The name that appears in the list of markers

    tooltip.content

    opacity?: number

    Opacity of the marker

    1
    path?: string

    Definition of the path

    polygon?:
        | [number, number][]
        | [number, number][][]
        | [string, string][]
        | [string, string][][]
        | SphericalPosition[]
        | SphericalPosition[][]

    Array of points defining the polygon in spherical coordinates Nested arrays are used to define holes

    polygonPixels?:
        | [number, number][]
        | [number, number][][]
        | PanoramaPosition[]
        | PanoramaPosition[][]

    Array of points defining the polygon in pixel coordinates on the panorama image Nested arrays are used to define holes

    polyline?: [number, number][] | [string, string][] | SphericalPosition[]

    Array of points defining the polyline in spherical coordinates

    polylinePixels?: [number, number][] | PanoramaPosition[]

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

    position?:
        | ExtendedPosition
        | [ExtendedPosition, ExtendedPosition, ExtendedPosition, ExtendedPosition]

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

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

    Size of the rectangle

    rotation?:
        | 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

    scale?:
        | [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)

    size?: Size

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

    square?: number

    Size of the square

    style?: Record<string, string>

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

    svgStyle?: Record<string, string>

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

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

    Configuration of the marker tooltip

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

    videoLayer?: string

    Path to a video

    visible?: boolean

    Initial visibility of the marker

    true
    zIndex?: number

    Drawing order

    1
    zoomLvl?: number

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

    current zoom level

    Settings

    Member Visibility

    On This Page

    Properties