Tee marker.

The tee marker is positioned from CADDIE.100's protected render sidecar and delivered to the browser only as an image pixel. Its visibility, presentation, movement, and reset state are managed locally by the mounted graphic view.

type: "tee"component: caddie-tee-markerProtected placement

Usage

Add the tee marker to a graphic.

Include the component in the initial mount call, reconcile it through view.setSmartComponents, or append it with view.addSmartComponent. Types may repeat. Give repeated instances stable id values to style, show, hide, move, reset, or remove one instance independently. The selected Smart Component type, instance ID, render receipt, and protected selection options such as yardages, grid spacing, coverage, measured origin, buffer distance, detail, limits, or targets are sent to the overlay service. Marker-image origins, images, presentation styles, supported labels, and movement remain local.

const view = await caddie.mount(container, graphicRequest, [
  {
    type: "tee",
    movable: true,
    origin: "center",
    style: {
      size: 42,
      label: "Championship tee",
      showLabels: true,
      labelPosition: "left",
      labelSize: 16,
      labelColor: "#F7FBF6",
      labelBackgroundColor: "#07110D",
      labelXPadding: 8,
      labelYPadding: 6,
      labelGap: 8,
    },
  },
]);

view.setSmartComponentVisible("tee", false);
view.setSmartComponentMovable("tee", true);
view.resetSmartComponentPosition("tee");

Defaults

Built-in presentation.

Protected placementMeasured tee-side image pixel

Origincenter

Size42px

LabelTee · bottom · 6px gap

Built-in visualAlpha-trimmed transparent PNG

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"tee"	Required	Requests the tee placement and selects the tee marker component.
id	string	Automatic	Optional stable 1–64 character instance ID using letters, numbers, underscores, or hyphens. Use IDs to independently control repeated Smart Components of the same type.
movable	boolean	false	Allows pointer dragging and arrow-key movement. Shift + Arrow moves the marker by 10 image pixels.
imageUrl	string \| null	null	Uses a client-hosted HTTPS PNG instead of the built-in transparent PNG. Pass null to restore the built-in PNG.
origin	GraphicOverlayOrigin	Component default	Selects which point on the marker is aligned with the protected placement pixel.
style.size	number	Component default	Marker size in CSS pixels. Accepts whole numbers from 20 through 96.
style.label	string \| boolean \| null	Component default	Sets a label up to 40 printable characters. False or null removes it; true restores the default label.
style.showLabels	boolean	true	Shows or hides the label without changing its saved text or appearance.
style.labelPosition	GraphicOverlayLabelPosition	"bottom"	Places the label at one of eight positions around the marker.
style.labelGap	number	6	Space between the marker and label in CSS pixels. Accepts whole numbers from 0 through 40.
style.labelSize	number	16	Positive whole-number label text size in CSS pixels with no upper limit.
style.labelColor	#RRGGBB	"#F7FBF6"	Label text color.
style.labelBackgroundColor	#RRGGBB	"#07110D"	Label pill background color.
style.labelXPadding	number	8	Horizontal label padding from 0 through 32 CSS pixels.
style.labelYPadding	number	6	Vertical label padding from 0 through 20 CSS pixels.

Behavior

Important implementation details.

The original server placement remains separate from the current local position, so reset never requires the sidecar to be downloaded.
Changing visibility, movability, styles, labels, images, or origin is an immediate DOM operation and does not rerender the clean graphic.
A custom image must use HTTPS and have a URL path ending in .png. The built-in PNG remains available if loading fails.

Protected course dataComponent responses contain only artifact-bound image pixels and safe presentation values. They do not include longitude, latitude, course geometry, affine transforms, control points, or the internal render sidecar.