Type alias MarkerConfig

Type declaration

• Optional anchor?: string

  Defines where the marker is placed toward its defined position

  Default

  'center center'
  Copy

• Optional autoplay?: boolean

  Autoplay of videoLayer markers

  Default

  true
  Copy

• Optional 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)

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

    Default

    0x00ff00
    Copy

  • enabled: boolean

    Default

    false
    Copy

  • Optional similarity?: number

    Default

    0.2
    Copy

  • Optional smoothness?: number

    Default

    0.2
    Copy

• Optional circle?: number

  Radius of the circle

• Optional className?: string

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

• Optional content?: string

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

• Optional data?: any

  Any custom data you want to attach to the marker

• Optional element?: MarkerElement

  Exiting DOM element

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

  Radiuses of the ellipse

• Optional hideList?: boolean

  Hide the marker in the markers list

  Default

  false
  Copy

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

  Overrides the global defaultHoverScale

  Default

  null
  Copy

• Optional html?: string

  HTML content of the marker

• id: string

  Unique identifier of the marker

• Optional image?: string

  Path to an image

• Optional imageLayer?: string

  Path to an image

• Optional listContent?: string

  The name that appears in the list of markers

  Default

  tooltip.content

• Optional opacity?: number

  Opacity of the marker

  Default

  1
  Copy

• Optional orientation?: "front" | "horizontal" | "vertical-left" | "vertical-right"

  Applies a perspective on the image to make it look like placed on the floor or on a wall (only for imageLayer)

• Optional path?: string

  Definition of the path

• Optional polygon?: [number, number][] | [string, string][] | number[] | string[]

  Array of points defining the polygon in spherical coordinates

• Optional polygonPixels?: [number, number][] | number[]

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

• Optional polyline?: [number, number][] | [string, string][] | number[] | string[]

  Array of points defining the polyline in spherical coordinates

• Optional polylinePixels?: [number, number][] | number[]

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

• Optional 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

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

  Size of the rectangle

• Optional rotation?: string | number

  Rotation applied to the marker (ignored for polygon and polyline)

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

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

• Optional size?: Size

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

• Optional square?: number

  Size of the square

• Optional style?: Record<string, string>

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

• Optional svgStyle?: Record<string, string>

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

• Optional tooltip?: 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'}

• Optional videoLayer?: string

  Path to a video

• Optional visible?: boolean

  Initial visibility of the marker

  Default

  true
  Copy

• Optional zIndex?: number

  Drawing order

  Default

  1
  Copy

• Optional zoomLvl?: 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