Smart Component 25
Green distance arcs.
Green distance arcs resolves a selected tee, draws an infinite metric axis through the mapped green center, and uses the outermost green-boundary crossings as front and back. The middle station is halfway between those two radii. Each station becomes an equal-width circular slice centered on the tee, with yardages and optional FRONT, MIDDLE, and BACK labels.
Usage
Add the green distance arcs 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: "green-distance-arcs",
from: "Green",
arcSpanYards: 40,
precision: "exact",
showPositionLabels: true,
style: {
strokeStyle: "alternating",
strokeOpacity: [0.5, 1, 0.5],
labelPosition: "right",
showLegend: true,
},
},
]);Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "green-distance-arcs" | Required | Requests protected front, middle, and back green-distance slices 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. |
| from | string | Furthest tee | WGS 84 longitude,latitude or a case-insensitive tee id, name, or color. Missing and unmatched tee names fall back to the furthest mapped tee. |
| arcSpanYards | number | 40 | Straight endpoint-to-endpoint chord width shared by all three radial slices, from 5 through 100 yards. |
| precision | "exact" | "rounded" | "exact" | Exact uses the nearest whole yard. Rounded snaps the three labels to the nearest 5 yards. |
| showPositionLabels | boolean | true | Shows FRONT, MIDDLE, and BACK on the side opposite the yardage labels. |
| style.strokeOpacity | number | [number, number, number] | [0.5, 1, 0.5] | Controls the complete left leader, complete radial slice, and complete right leader independently. No opacity gradient is applied within the slice. |
| style.strokeStyle | "alternating" | "solid" | "dashed" | "dotted" | "dash-dot" | "alternating" | Uses the shared distance-arc renderer; alternating colors occupy complementary dash segments with no continuous under-stroke. |
| style.showMiddleMarker | boolean | false | Shows a marker at the measured midpoint of each front, middle, and back slice. |
| style.middleMarkerShape | "circle" | "triangle" | "square" | "diamond" | "circle" | Changes the midpoint symbol. Polygon markers point from the selected tee toward the green, with diamonds rotated an additional 45 degrees. |
| style.labelPosition | "auto" | "left" | "right" | "auto" | Chooses or pins the yardage side; position labels use the opposite edge. |
| style.labelOutlineWidth | number | 4 | Label contrast-stroke width from 0 through 16 image pixels. |
| style.showLegend | boolean | true | Shows a rotated yardage-column descriptor. |
| style.legendText | string | null | "YARDS FROM TEE" | Custom printable primary legend up to 80 characters. An empty string reserves the legend lane without drawing text; null or omission uses YARDS FROM TEE. |
| style.showSecondaryLegend | boolean | false | Shows a rotated descriptor beside the FRONT, MIDDLE, and BACK label column. |
| style.secondaryLegendText | string | null | "GREEN POSITION" | Custom printable secondary legend up to 80 characters. An empty string reserves the legend lane without drawing text; null or omission uses GREEN POSITION. |
Behavior
Important implementation details.
- The resolver uses an infinite line rather than a fixed 300-yard segment, so unusually long tee-to-green distances do not truncate the geometry.
- When concavities or interior rings add crossings, the two outermost positive intersections define the complete green depth.
- The midpoint is halfway between the measured front and back radii along the approach axis; it is intentionally not a second interpretation of the authored green-center coordinate.
- Only final image pixels, measured radii, and safe display labels reach the client. The green polygon, tee identity, coordinates, and transforms remain server-side.