Skip to content

Methods

The 270 Annotations plugin adds the following methods to the Viewer. These are available after the Viewer is done initialising, ie on onLoadComplete().

Annotation methods are accessible via the Annotations namespace, for example: el.Annotations.getPins().

addPin

Adds a pin at the passed point in 3D space. x (horizontal), y (vertical) and z (depth) coordinates are in meters from the center of the model.
The pin's label contents will be wrapped in div.TSD-pin-label.

el.Annotations.addPin({name:'pin', id: 'pin1', content: 'A point' , x: 1.2, y: 0.4, z: -0.3, debug: false, render: true});

Parameters:

  • name:
    • Type: string
    • Default: pin
      The name of the Pin. This is also used as an additional classname on div.TSD-pin-container.
  • id:
    • Type: string
    • Default: pin_${timestamp}
      The id of the Pin. This must be a unique id. In case of a duplicate, the id will be suffixed with a unique number.
  • content:
    • Type: string|HTMLElement
    • Default: options.name
      The content of the Pin label. This can be a a text string, inline html or a HTMLElement.
  • x:
    • Type: Float
    • Default: centerPoint.x | 0
      The x (horizontal) position of the pin in the 3d worldspace, in meters from the center.
  • y:
    • Type: Float
    • Default: centerPoint.y | 0
      The y (vertical) position of the pin in the 3d worldspace, in meters from the center
  • z:
    • Type: Float
    • Default: centerPoint.z | 0
      The z (depth) position of the pin in the 3d worldspace, in meters from the center.
  • debug:
    • Type: Boolean
    • Default: false Adds a visible point in the space at the passed x,y,z.
  • render:
    • Type: Boolean
    • Default: true
      Immediately renders a new frame when true. If you are adding multiple Annotations to the Viewer, consider setting this to false and call el.Annotations.requestRender() manually to prevent unneeded frames.

Returns:

  • Object: The created pin
{ content: "A point",id: "pin_1", name: "pin", visible: true, x: 1.2, y: 0.4, z: -0.3, debug: false }

getPin

Returns a single pin by name or ID.
When both name and id are passed, id gets priority. 

el.Annotations.getPin({ id: 'pin_1' });

Parameters:

  • name: Type: string
    Optional name of the pin.

  • id: Type: string O ptional ID of the pin.

Returns:

  • Object | undefined: The pin object or undefined if not found.
{ content: 'First pin', id: 'pin_1', name: 'pin', visible: true, x: -0.007013648137886747, y: -0.00016835335983691677, z: 0.005849377919588963, debug: false},

getPins

Returns all pins, or filters by name or ID.
When both name and id are passed, id gets priority. 

el.Annotations.getPins({ name: 'pin' });

Parameters:

  • name: Type: string Optional name filter.

  • id: Type: string Optional ID filter.

Returns:

  • Array<Object>: Array of pin objects, or a single pin.
[  
  { content: 'First pin', id: 'pin_1', name: 'pin', visible: true, x: -0.007013648137886747, y: -0.00016835335983691677, z: 0.005849377919588963, debug: false},
  { content: 'Second pin', id: 'pin_2', name: 'pin', visible: true, x: 0.00921308896370392, y: 0.0016515359896780157, z: 0.0006273469956638439, debug: false}
]

removePin

Removes a pin by name or ID.
When both name and id are passed, id gets priority. 

el.Annotations.removePin({ name: 'pin' });

Parameters:

  • name: Type: string The name of the pin to remove. If multiple pins of the same name exist, it will remove the first one it finds.
    If you need to remove multiple pins, consider using removePins().

  • id: Type: string The id of the pin to remove.

removePins

Removes all pins, or pins matching a filter.
When both name and id are passed, id gets priority.
When nothing is passed, all pins will be removed. 

el.Annotations.removePins({name: 'pin'});

Parameters:

  • name: Type: string
    The name of the pins to remove.

  • id: Type: string The id of the pin to remove.

showPin

Shows or hides a or multiple pins by name or ID.
When both name and id are passed, id gets priority.
Identical to hidePin({ name: 'pin_1', visible: false }). 

el.Annotations.showPin({ id: 'pin_1' });

Parameters:

  • name: Type: string The name of all the pins to show.

  • id: Type: string The id of the pin to show.

  • visible:

    • Type: Boolean
    • Default: true

  • render:

    • Type: Boolean
    • Default: true Immediately renders a new frame when true. If you are changing multiple Annotations in the Viewer, consider setting this to false and call el.Annotations.requestRender() manually to prevent unneeded frames.

hidePin

Hides or shows a or multiple pins by name or ID.
When both name and id are passed, id gets priority.
Identical to showPin({ name: 'pin_1', visible: true }). 

el.Annotations.showPin({ id: 'pin_1' });

Parameters:

  • name: Type: string The name of all the pins to hide.

  • id: Type: string The id of the pin to hide.

  • visible:

    • Type: Boolean
    • Default: true

  • render:

    • Type: Boolean
    • Default: true Immediately renders a new frame when true. If you are changing multiple Annotations in the Viewer, consider setting this to false and call el.Annotations.requestRender() manually to prevent unneeded frames.

requestRender

Requests a re-render of the annotation layer.

el.Annotations.requestRender();
💬 Ask AI