Approach markers.

Available on Hole and Green graphics, Approach markers find actual points on the hole's protected tee-to-green centerline whose straight-line distance to center green matches each selected yardage. CADDIE.100 chooses automatic yardages from the protected tee-to-flag distance unless valid custom values are supplied. Marker centers outside the rendered image are omitted without rejecting the component. Only resolved visible marker pixels, labels, and final pointer rotations reach the browser.

type: "approach-markers"component: caddie-approach-markersProtected placement

Usage

Add the approach markers 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, [
  {
    id: "approach-100",
    type: "approach-markers",
    yardages: [100],
    style: { color: "#FF0000", outlineColor: "#07110D" },
  },
  {
    id: "approach-150",
    type: "approach-markers",
    yardages: [150],
    style: { color: "#FFFFFF", outlineColor: "#07110D" },
  },
  {
    id: "approach-200",
    type: "approach-markers",
    yardages: [200],
    style: { color: "#0000FF", outlineColor: "#07110D" },
  },
]);

view.setSmartComponentStyle({
  id: "approach-150",
  type: "approach-markers",
  style: { color: "#A3FF12" },
});

Defaults

Built-in presentation.

SubjectsHole · Green

DistancesAutomatic by hole length

MeasurementStraight line to center green

PositionActual protected centerline point

PointerHidden · points toward center green

DOM outputSVG circles, optional pointer polygons, and labels

Component options

Configure behavior and presentation.

Option	Type	Default	Description
type	"approach-markers"	Required	Requests fairway-center approach markers for a Hole or Green 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.
yardages	number[]	Automatic	One to twelve unique whole-yard values from 10 through 400. Omitted or invalid data uses the same measured-distance bands as Approach rings.
style.color	#RRGGBB	"#FFFFFF"	Marker fill color. When labelBackgroundColor is omitted, the circular label background follows this color.
style.showLabels	boolean	true	Shows or hides the centered yardage text. Hidden labels use one uniform circle diameter.
style.labelSize	number	16	Positive whole-number centered text size in image pixels with no upper limit, or the fixed circle diameter when labels are hidden.
style.labelPadding	number	5	Padding around visible yardage text from 0 through 32 image pixels. Ignored when labels are hidden.
style.labelBackgroundColor	#RRGGBB	"#FFFFFF"	Circular yardage-label background color.
style.labelColor	#RRGGBB	"#07110D"	Yardage-label text color.
style.outlineColor	#RRGGBB	"#07110D"	Marker outline color.
style.showPointer	boolean	false	Shows a triangular wedge beneath each circle aimed toward center green.
style.pointerSize	number	10	Controls pointer scale from 4 through 32 image pixels; its tip protrudes by that amount.
style.pointerColor	#RRGGBB	outlineColor	Pointer fill color. It follows the marker outline color when omitted.

Behavior

Important implementation details.

Repeat approach-markers in one Smart Component array to give individual yardages independent native styles. Explicit IDs keep later visibility, movement, reset, and style calls instance-specific.
The resolver intersects the protected centerline with a distance circle around center green; it does not accumulate distance along centerline curves.
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.
With labels shown, every marker uses the same text-measurement-plus-padding formula; there is no separate three-digit size override.
When labels are hidden, every marker uses labelSize as its fixed diameter and ignores labelPadding.
The optional pointer is a broad triangle painted beneath the circle. It uses the marker outline color by default. The response exposes only its final display rotation, while visibility, size, and color update locally.
Marker centers outside the rendered image are omitted individually; an all-off-image request succeeds with an empty marker set instead of producing an unavailable-component error.
The centerline and green coordinates are retained only in the internal cached sidecar and are never serialized into the component response.
If a hole has no protected centerline, the request fails explicitly instead of inventing a fairway position.

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.