Smart Component 05
Tee rings.
Available on Hole and Green graphics, Tee rings use the same measured SVG ring and label system as Approach rings but center every radius on a selected starting tee. Top labels always form a straight image-vertical line above the tee regardless of hole rotation. Explicit left/right labels use the image-horizontal line through the tee, rotate −90/+90 degrees, and are omitted per ring when they cannot fit. Bearing labels keep their 45-degree tangent while the ring stays inside the selected photo edge. When a bearing ring crosses that edge, its label moves to the ring/photo-edge intersection and follows the local visible arc there. This custom edge-arc mode belongs only to bearing labels. The `from` option accepts a WGS 84 longitude,latitude pair or a case-insensitive tee id, name, or color. Omitting it or supplying an unmatched tee selector selects the furthest mapped tee (the tips). Defaults are 200, 250, and 300 yards.
Usage
Add the tee rings 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-rings",
from: "Blue",
yardages: [200, 250, 300],
style: {
strokeColor: "#F28C28",
strokeWidth: 2,
strokeStyle: "dashed",
showLabels: true,
labelPosition: "bearing-left",
labelSize: 16,
labelColor: "#FFFFFF",
labelBackgroundColor: "#07110D",
labelXPadding: 8,
labelYPadding: 6,
labelGap: 0,
},
},
]);
view.setSmartComponentStyle({
type: "tee-rings",
style: { labelPosition: "bearing-right" },
});Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "tee-rings" | Required | Requests measured distance rings centered on a selected tee. |
| 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. |
| from | string | Furthest tee | WGS 84 longitude,latitude pair or case-insensitive tee id, name, or color. Omitted or unmatched tee selectors use the furthest mapped tee (the tips). |
| yardages | number[] | [200, 250, 300] | One to twelve unique whole-yard radii from 10 through 400. |
| style.strokeColor | GraphicColor | "#FFFFFF" | Ring stroke color applied locally by the SVG renderer. |
| style.strokeWidth | number | 2 | Non-scaling SVG stroke width from 1 through 12. |
| style.strokeStyle | "solid" | "dashed" | "dotted" | "dash-dot" | "solid" | Controls the SVG stroke pattern while preserving the measured ring path. |
| style.showLabels | boolean | true | Shows or hides every ring yardage label locally. |
| style.labelPosition | "top" | "left" | "right" | "bearing-left" | "bearing-right" | "top" | Top always remains upright on a straight image-vertical line above the tee. Explicit left/right uses the image-horizontal ring intersection and rotates the pill −90/+90 degrees; when it cannot fit, only its label is omitted and the ring remains visible. Bearing left/right uses the 45-degree ring tangent while the ring stays inside the selected photo edge. When the ring crosses that edge, the bearing-only custom placement moves the label to the ring/photo-edge intersection and follows the local arc there. |
| style.labelSize | number | 16 | Positive whole-number label text size in image pixels with no upper limit; 16 is the readability-first default. |
| style.labelColor | GraphicColor | "#FFFFFF" | Yardage label text color. |
| style.labelBackgroundColor | GraphicColor | "#07110D" | Yardage label pill color. |
| style.labelXPadding | number | 8 | Horizontal label padding from 0 through 32 image pixels. |
| style.labelYPadding | number | 6 | Vertical label padding from 0 through 20 image pixels. |
| style.labelGap | number | 0 | Moves labels outward from the selected ring intersections by 0 through 40 image pixels. |
Behavior
Important implementation details.
- Changing stroke or label presentation is a local DOM update. Changing `from` or `yardages` requests new protected drawing instructions against the cached sidecar.
- Tee-name matching is case-insensitive. A WGS 84 longitude,latitude pair can select an explicit custom start.
- The furthest-tee default uses the same starting-point resolver as Fairway widths and Tee key yardages.
- Top labels always use the image-vertical line above the tee; rotating the hole does not rotate or move that line to a bearing side.
- Left/right labels use the image-horizontal line through the tee and rotate −90/+90 degrees to follow the side arc. A side label that cannot fit is omitted per ring without suppressing the ring path.
- Bearing left/right measures each ring's selected-side extent against the tee-to-edge distance. Rings inside the edge keep their 45-degree tangent; rings that cross it move independently to the selected ring/photo-edge intersection and follow that local arc. This custom placement is not used by explicit left/right.
- A ring that crosses a graphic edge remains valid; the graphic viewport clips only the off-image portion.
- The response contains sampled image-pixel paths only and never exposes the selected tee identity, longitude, latitude, affine transforms, or source geometry.