Approach rings.

Available on Hole and Green graphics, Approach rings are server-resolved Smart Component drawings. 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. A ring may extend beyond a cropped graphic; Graphics JS renders its visible portion instead of rejecting it. The browser does not receive projection transforms, coordinates, or course geometry.

type: "approach-rings"component: caddie-approach-ringsProtected placement

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",
    style: {
      strokeColor: "#FFFFFF",
      strokeWidth: 2,
      strokeStyle: "dashed",
      showLabels: true,
      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.

SubjectsHole · Green

DistancesAutomatic by hole length

MeasurementRadial distance from center green

Label alignmentVertical below green center

DOM outputSVG paths and text labels

ImageNever modified

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"approach-rings"	Required	Requests measured center-green 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.
yardages	number[]	Automatic	One to twelve unique whole-yard values from 10 through 400. Omitted or invalid data selects rings from the measured tee-to-flag distance.
style.strokeColor	#RRGGBB	"#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.labelSize	number	16	Positive whole-number label text size in image pixels with no upper limit; 16 is the readability-first default.
style.labelColor	#RRGGBB	"#FFFFFF"	Yardage label text color.
style.labelBackgroundColor	#RRGGBB	"#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 down from their fixed ring intersections by 0 through 40 image pixels.

Behavior

Important implementation details.

Changing stroke or label presentation is a local DOM update. Changing 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.
Every label is placed where its ring meets the image-vertical line directly below green center, regardless of the tee or playing-direction angle.
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.

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.