Smart Component 04
Approach rings.
Available on Hole and Green graphics, Approach rings are server-resolved Smart Component drawings centered on either the measured green center or protected maximum-clearance point. CADDIE.100 chooses sensible defaults from the protected tee-to-flag distance or converts valid custom yardages into closed SVG paths for the exact rendered artifact. Bottom labels remain below the resolved origin. Explicit image-left/right labels rotate −90/+90 degrees at the image-horizontal ring intersection and are omitted per ring when they cannot fit. Bearing labels sit 45 degrees left or right of the protected tee-to-origin bearing 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. That custom edge-arc placement belongs only to bearing labels; the cropped ring keeps its visible portion. The browser does not receive projection transforms, coordinates, or course geometry.
Usage
Add the approach 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: "approach-rings",
origin: "maximum-clearance",
style: {
strokeColor: "#FFFFFF",
strokeWidth: 2,
strokeStyle: "dashed",
showLabels: true,
labelPosition: "bearing-right",
labelSize: 16,
labelColor: "#FFFFFF",
labelBackgroundColor: "#07110D",
labelXPadding: 10,
labelYPadding: 8,
labelGap: 0,
},
},
]);
view.setSmartComponentVisible("approach-rings", false);
view.setSmartComponentStyle({
type: "approach-rings",
style: { strokeColor: "#00D5FF" },
});Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "approach-rings" | Required | Requests measured radial distance rings. |
| 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. |
| origin | "green-center" | "maximum-clearance" | "green-center" | Centers every ring on the measured green center or the protected center of the largest ground-space circle contained by the mapped green. If maximum-clearance geometry is unavailable, green-center is used and reported through resolvedOrigin. |
| yardages | number[] | null | Automatic | One to twelve unique whole-yard values from 10 through 400. Omitted, null, or invalid data selects rings from the measured tee-to-flag distance. |
| 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 | "bottom" | "left" | "right" | "bearing-left" | "bearing-right" | "bottom" | Bottom always preserves the upright image-vertical placement below the resolved origin. 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 tee-to-origin 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.
- maximum-clearance is a concrete point suitable for radial measurement. It is distinct from maximum-dimensions, which describes width/depth axes rather than one center point.
- resolvedOrigin reports maximum-clearance when the mapped polygon resolves successfully, or green-center after fallback. Only final ring and label pixels reach the browser.
- Changing stroke or label presentation is a local DOM update. Changing origin or yardages requests new protected drawing instructions against the cached sidecar.
- Automatic yardages use 25/50 through 150 yards; 25/50/75 over 150–200; 50/100 over 200–250; 50/100/150 over 250–300; and 50/100/150/200 over 300.
- Bottom always uses the image-vertical line below the resolved origin and remains upright. Bearing left/right follows the protected tee-to-origin direction at 45 degrees while the ring stays inside that side of the photo, then moves per ring to the selected ring/photo-edge intersection and follows that local arc. This custom edge placement is bearing-only. An unavailable bearing still falls back to the upright bottom presentation.
- Left/right uses the image-horizontal line through the resolved origin and rotates −90/+90 degrees to follow the side arc. Side labels that cannot fit are omitted per ring without suppressing the ring path.
- A ring that crosses a graphic edge remains valid. The SVG contains the complete sampled path and the graphic viewport clips only the off-image portion.
- The response contains sampled image-pixel paths only; it excludes longitude, latitude, affine transforms, and source geometry.
- Rings are measurement graphics and intentionally remain locked rather than movable.