Teeboxes.

Teeboxes privately match rendered tee pixels to the canonical scorecard's tee sets, colors, and per-hole yardages. The server sorts the matches by hole yardage and returns only the requested pixel-and-color drawing instructions. Tee names, yardages, coordinates, geometry, and projection data stay inside CADDIE.100.

type: "teeboxes"component: caddie-teeboxesProtected placement

Usage

Add the teeboxes 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: "teeboxes",
    name: "Blue",
    limit: "all",
    style: {
      size: 72,
      fillColor: "#FFFFFF",
      outlineWidth: 0,
      markerText: "T",
      markerTextColor: "#171717",
      markerTextSize: 52,
      markerTextWeight: 500,
    },
  },
]);

view.setSmartComponentVisible("teeboxes", false);
view.setSmartComponentStyle({
  type: "teeboxes",
  style: { size: 22 },
});

Defaults

Built-in presentation.

LocationsAll scorecard-matched teeboxes

OrderLongest to shortest for selected hole

ColorCanonical tee color or local override

DOM outputLocked SVG marker groups

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"teeboxes"	Required	Requests the hole's scorecard-matched teebox locations.
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.
name	string	Undefined	Optionally selects one tee by exact normalized scorecard name. Matching is case-insensitive and ignores spaces and punctuation.
limit	"all" \| 5 \| 4 \| 3	"all"	Shows all matched locations or only the selected number of longest tee sets for this hole.
style.size	number	18	Marker diameter from 8 through 128 image pixels.
style.fillColor	GraphicColor	Canonical tee color	Optionally overrides the scorecard tee color used to fill every selected marker. Set null through a local style update to restore the canonical color.
style.outlineColor	GraphicColor	"#07110D"	Outline color, which keeps light scorecard colors visible on the map.
style.outlineWidth	number	2	Non-scaling outline width from 0 through 8 image pixels.
style.markerText	string	Undefined	Adds up to three printable characters centered inside each selected marker.
style.markerTextColor	GraphicColor	"#07110D"	Color of the optional centered marker text.
style.markerTextSize	number	62.5% of marker size	Marker-text size from 6 through 128 image pixels.
style.markerTextWeight	number	500	Marker-text font weight from 100 through 900.

Behavior

Important implementation details.

Changing marker size, fill, outline, or centered text is a local SVG update. Changing the name or location limit requests a new protected selection against the cached sidecar. A supplied name takes precedence over limit and returns one match.
Teeboxes are deliberately locked: setSmartComponentMovable("teeboxes", true) returns false.
The component response contains only image pixels and hex colors. It does not echo the requested name and excludes tee names, per-hole yardages, longitude, latitude, course geometry, and transforms.
A hole with no scorecard-matched locations fails explicitly rather than guessing colors or positions.

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.