Smart Component 02
Flag marker.
The Flag marker uses an alpha-cropped transparent PNG whose cup is centered on the image bottom edge. CADDIE.100 resolves its protected center-green placement for the exact render artifact; the SDK then lets the client control presentation and interaction without receiving coordinates or sidecar data.
Usage
Add the flag marker 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: "flag",
movable: false,
origin: "bottom-center",
style: {
size: 48,
label: "Flag",
showLabels: true,
labelPosition: "top-right",
labelSize: 16,
labelColor: "#F7FBF6",
labelBackgroundColor: "#07110D",
labelXPadding: 8,
labelYPadding: 6,
labelGap: 8,
},
},
]);
view.setSmartComponentStyle({ type: "flag", style: { size: 56 } });
view.setSmartComponentImage("flag", null);Defaults
Built-in presentation.
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "flag" | Required | Requests the center-green placement and selects the flag marker component. |
| 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. |
| movable | boolean | false | Allows pointer dragging and arrow-key movement. Shift + Arrow moves the marker by 10 image pixels. |
| imageUrl | string | null | null | Uses a client-hosted HTTPS PNG instead of the built-in transparent PNG. Pass null to restore the built-in PNG. |
| origin | GraphicOverlayOrigin | Component default | Selects which point on the marker is aligned with the protected placement pixel. |
| style.size | number | Component default | Marker size in CSS pixels. Accepts whole numbers from 20 through 96. |
| style.label | string | boolean | null | Component default | Sets a label up to 40 printable characters. False or null removes it; true restores the default label. |
| style.showLabels | boolean | true | Shows or hides the label without changing its saved text or appearance. |
| style.labelPosition | GraphicOverlayLabelPosition | "bottom" | Places the label at one of eight positions around the marker. |
| style.labelGap | number | 6 | Space between the marker and label in CSS pixels. Accepts whole numbers from 0 through 40. |
| style.labelSize | number | 16 | Positive whole-number label text size in CSS pixels with no upper limit. |
| style.labelColor | #RRGGBB | "#F7FBF6" | Label text color. |
| style.labelBackgroundColor | #RRGGBB | "#07110D" | Label pill background color. |
| style.labelXPadding | number | 8 | Horizontal label padding from 0 through 32 CSS pixels. |
| style.labelYPadding | number | 6 | Vertical label padding from 0 through 20 CSS pixels. |
Behavior
Important implementation details.
- The PNG has no transparent padding below the cup. Its bottommost cup pixels are horizontally centered, so bottom-center aligns the cup with the measured green pixel.
- Clients can enable movement later with setSmartComponentMovable("flag", true) without another placement request.
- The clean WebP, PNG, or JPEG never contains the flag. Downloaded image artifacts remain free of interactive overlays.