Skip to main content
Documentation

Add panorama tags

Load a typed text hotspot, respond to clicks, and remove it during cleanup.

On this page

Use a text hotspot when the visitor should discover a named point in a captured space. This example uses PanoTagPlugin from the quickstart.

Supply a position in the current scene

A tag's position is a three-number spatial coordinate, not a screen pixel. Obtain it from the current Work or your scene authoring workflow. Do not copy arbitrary coordinates from another scene and interpret an invisible result as a load failure.

The Tag<'Text', '2DPoint'> type fixes both the content schema and the attachment shape. Text content uses title and description; the older text property is deprecated.

import type { PanoTagPlugin, Tag } from '@realsee/dnalogel'

type TagsController = ReturnType<typeof PanoTagPlugin>

export async function addTextHotspot(tags: TagsController, position: [number, number, number]) {
  const tag: Tag<'Text', '2DPoint'> = {
    id: 'welcome', contentType: 'Text', stickType: '2DPoint', position,
    data: { title: 'Welcome', description: 'Explore this captured space.' }
  }
  await tags.load({ tagList: [tag] })
  tags.enable()
  await tags.show()
  const stop = tags.hooks.on('click', ({ tag: clicked }) => {
    if (clicked.id === 'welcome') tags.changeUnfoldedById('welcome', true)
  })
  return () => { stop(); tags.destroyTagById('welcome') }
}

Call the function with the ready controller and position, then retain the returned cleanup function. load({ tagList }) replaces the controller's tag data. Use addTag() if you intend to append without replacing existing tags.

Change or remove a hotspot

The controller exposes changeDataById, changePositionById, changeEnabledById, changeUnfoldedById, and destroyTagById. Retain stable IDs so updates target the intended tag. Tag clicks are subscribed through tags.hooks.on('click', ...), not tags.on(...).

The task's cleanup unsubscribes the click listener and removes its tag. The owner of the Five instance still calls the quickstart factory's dispose() on unmount.

Verify

Confirm that the tag is visible from a suitable viewpoint, opens on click, and disappears after cleanup. Rotate away and back to check visibility. A successful load promise does not prove that your supplied coordinate lies inside the visible scene.

Published controller · Tag schema