Smart Component 12
Hole number.
Hole number is a locked SVG Smart Component whose default 48px badge is larger than an Approach marker. On a Hole graphic it resolves one target; on a Course graphic it resolves the same target independently for every available hole. CADDIE.100 returns only visible hole numbers and final image pixels. Doglegs and walked centerlines remain protected.
Usage
Add the hole number 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: "hole-number",
target: "dogleg",
numbers: null, // Course: all holes; use "1, 4, 9" to select
style: {
shape: "circle",
size: 48,
backgroundColor: "#FFFFFF",
strokeColor: "#07110D",
strokeWidth: 2,
textColor: "#07110D",
},
},
]);
view.setSmartComponentStyle({
type: "hole-number",
style: { shape: "square", backgroundColor: "#A3FF12" },
});Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "hole-number" | Required | Requests the visible hole number and selected protected placement pixel. |
| 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. |
| target | "dogleg" | "tee" | "flag" | "middle" | "dogleg" | Places the badge at the dogleg, measured tee, center green, or halfway point along walked centerline distance. Course graphics apply the target to every hole. |
| numbers | null | number[] | string | null | Course only. Null or omitted selects every resolvable hole; use an integer array or comma-delimited list such as "1, 4, 9" to select specific badges. |
| style.shape | "circle" | "square" | "circle" | Selects the badge shape. |
| style.size | number | 48 | Badge diameter or side length from 32 through 96 image pixels. |
| style.backgroundColor | #RRGGBB | "#FFFFFF" | Badge fill color. |
| style.strokeColor | #RRGGBB | "#07110D" | Badge outline color. |
| style.strokeWidth | number | 2 | Non-scaling outline width from 0 through 12 image pixels. |
| style.textColor | #RRGGBB | "#07110D" | Hole-number text color. |
Behavior
Important implementation details.
- Middle is measured at 50% of cumulative centerline distance, not as a straight coordinate or bounding-box midpoint.
- Straight holes without a dogleg use the protected path midpoint so the default component remains usable.
- A Course graphic returns one badge instruction for every resolvable hole, using the same target and styles across the complete map.
- For a Course graphic, numbers: null means all holes. A list such as numbers: "1, 4, 9" returns only those visible badges.
- Shape and color changes are immediate local SVG updates. Changing target requests one new final pixel against the cached artifact.
- The SDK assigns this component the highest overlay z-index, so it covers markers, drawings, legends, and client annotations at an overlap.
- The response contains only visible hole numbers and final x/y image pixels. It excludes dogleg data, centerline points, longitude, latitude, transforms, and the sidecar.