Smart Component 18
Tee key yardages.
Tee key yardages intersects start-centered rings with course-wide bunker, water, and tree edges plus the active hole's fairway and green edges. Candidates outside a 25-yard corridor around the protected hole centerline are discarded first. Priority is bunker, water, fairway, green, then tree; equal-tier candidates are ranked by metric distance to the centerline.
type: "tee-key-yardages"component: caddie-tee-key-yardagesProtected placement
Usage
Add the tee key yardages 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.
await view.setSmartComponents([{
type: "tee-key-yardages",
from: "Blue",
yardages: [160, 180, 200, 220, 240, 260, 280, 300],
minimumSpacingYards: 20,
eligibleFeatures: ["bunker", "water"],
style: {
pointSize: 16,
showLabels: true,
labelSize: 16,
labelColor: "#FFFFFF",
labelBackgroundColor: "#07110D",
labelXPadding: 8,
labelYPadding: 6,
labelGap: 8,
labelPosition: "outside",
},
}]);Defaults
Built-in presentation.
SubjectHole
Rings160, 180, 200, 220, 240, 260, 280, 300 yards
PriorityBunker → water → fairway → green → tree
Eligible featuresAll five
Tie-breakNearest protected centerline
Safety corridor25 yards from centerline
Minimum spacing20 yards
LabelsOutside fairway · 16px
MovementLocked
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "tee-key-yardages" | Required | Requests ranked feature-edge targets for a Hole graphic. |
| 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 mapped tee | Optional case-insensitive tee id, name, or color, or a WGS 84 longitude,latitude starting point. An unmatched tee selector uses the furthest mapped tee (the tips). |
| yardages | number[] | null | [160, 180, 200, 220, 240, 260, 280, 300] | Null or omitted uses the defaults. Otherwise provide one through twelve explicit, unique whole-yard direct radii from 10 through 400. Ranges are not supported. |
| minimumSpacingYards | number | null | 20 | Minimum ground distance from the previous visible point. Candidates are tried in rank order before a ring is omitted. Null or omitted uses 20; zero disables spacing-based omission. |
| eligibleFeatures | ("bunker" | "water" | "fairway" | "green" | "tree")[] | null | ["bunker", "water", "fairway", "green", "tree"] | One through five unique feature classes eligible to produce targets. Fairway and green are active-hole scoped; the other classes are course-wide. Null or omitted enables all five. Array order does not change priority. |
| style.pointSize | number | 16 | Feature-edge point diameter from 6 through 40 image pixels. |
| style.fairwayColor | GraphicColor | "#FFFFFF" | Fairway target fill. |
| style.greenColor | GraphicColor | "#A3FF12" | Active-hole green target fill. |
| style.bunkerColor | GraphicColor | "#E8CF78" | Bunker target fill. |
| style.waterColor | GraphicColor | "#00AEEF" | Water target fill. |
| style.treeColor | GraphicColor | "#5F9A66" | Tree-polygon target fill. |
| style.showLabels | boolean | true | Shows or hides yardage pills locally. |
| style.labelSize | number | 16 | Positive whole-number label text size in image pixels with no upper limit. |
| style.labelColor | GraphicColor | "#FFFFFF" | Yardage label text color. |
| style.labelBackgroundColor | GraphicColor | "#07110D" | Yardage label pill background 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 | 8 | Space between each feature point and its label pill from 0 through 40 image pixels. |
| style.labelPosition | "left" | "right" | "alternative" | "outside" | "outside" | Places every label on one side, alternates sides by ascending yardage, or places each label away from the protected fairway centerline. |
Behavior
Important implementation details.
- A ring can intersect several feature classes or cross the same polygon twice; only one winning point is returned.
- eligibleFeatures limits which polygon classes can produce candidates. Fairway and green are resolved from the active hole; bunker, water, and trees remain course-wide.
- The eligibleFeatures array does not reorder the fixed bunker, water, fairway, green, then tree priority.
- Any candidate more than 25 ground yards from its nearest point on the protected hole centerline is discarded before feature ranking and spacing.
- Every ring keeps its ranked candidate list. If the top intersection is too close to the previous visible point, lower-ranked intersections are tried before the ring is omitted.
- Rings with no mapped polygon-edge intersection are omitted.
- The response contains only yardage, feature class, final image pixel, and a safe left/right outside-label direction. Source polygons, coordinates, centerline, and transforms remain server-side.
- Changing presentation is local; changing from, yardages, eligibleFeatures, or minimumSpacingYards requests new protected targets without rebuilding the clean image.
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.