Image annotation.

Image annotations provide the same movement, origin, size, label, reset, visibility, and event behavior as Smart Components without requesting protected placement. The client owns both the PNG and its starting image pixel.

type: "annotation"component: annotation:imageClient placement

Usage

Add the image annotation to a graphic.

Add the primitive with view.setAnnotations. Its image-pixel position, content, and presentation are entirely client-authored and do not invoke the protected overlay service.

view.setAnnotations([
  {
    type: "annotation",
    id: "my-marker",
    position: { x: 420, y: 610 },
    movable: true,
    origin: "bottom-center",
    content: {
      type: "image",
      url: "https://client.example/marker.png",
      alt: "Custom strategy marker",
    },
    style: { size: 48, label: "My target" },
  },
]);

Defaults

Built-in presentation.

Placement sourceClient image pixel

Origincenter

Size44px

NetworkPNG host only; no sidecar request

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"annotation"	Required	Identifies a client-authored Annotation primitive.
id	string	Required	Stable 1–64 character local identity using letters, numbers, underscores, or hyphens.
position	{ x: number; y: number }	Required	Starting position in pixels within the rendered image. This value is supplied by the client, not the sidecar.
movable	boolean	false	Enables the same pointer and keyboard movement behavior used by Smart Components.
origin	GraphicOverlayOrigin	"center"	Selects which of nine component origins is aligned to the client-provided pixel.
style.size	number	44 or 48	Component box size in CSS pixels, from 20 through 96.
style.label	string \| boolean \| null	null	Optional label using the shared label renderer.
style.labelPosition	GraphicOverlayLabelPosition	"bottom"	One of eight label positions around the component.
style.labelGap	number	6	Whole CSS pixels from 0 through 32 between the component and label.
content.type	"image"	Required	Selects the image primitive renderer.
content.url	string	Required	HTTPS URL whose path ends in .png.
content.alt	string	""	Optional accessible text up to 120 characters.

Behavior

Important implementation details.

Graphics JS validates HTTPS and the .png path before creating the image element.
caddie100:componentimagestatus reports loaded or error without exposing any course data.
Use removeAnnotation or replace the setAnnotations array to remove the image.

Local annotation boundaryAnnotations accept client-provided image pixels only. They do not accept longitude, latitude, geometry, transforms, or sidecar data.