Smart Component 09
Green slope heatmap.
Green slope heatmap defaults to protected putting-surface grade percentage and can instead display angular degrees. Each unit uses a distinct non-white palette. Percentage runs from 0–8%; degrees uses an evenly divided 0–4.4° presentation scale so its quarter labels are 1.1°, 2.2°, and 3.3°. CADDIE.100 performs interpolation, smoothing, unit conversion, and green clipping privately, then returns only final artifact-aligned RGBA display pixels.
type: "green-slope-heatmap"component: caddie-green-slope-heatmapProtected placement
Usage
Add the green slope heatmap 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: "green-slope-heatmap",
// unit is optional; percentage is the default.
colorImpaired: false,
style: { opacity: 0.58 },
legend: { size: 0.6, position: "bottom", thickness: "normal", detail: "full", style: "block", showTitle: true, backgroundColor: "rgba(7, 17, 13, 0.82)" },
}]);
// Opt into the simplified 0–4.4° scale.
await view.setSmartComponents([{
type: "green-slope-heatmap",
unit: "degrees",
colorImpaired: true,
style: { opacity: 0.58 },
legend: { position: "bottom", detail: "full", style: "block" },
}]);
// Opacity, legend, and visibility remain immediate local DOM changes.
view.setSmartComponentStyle({ type: "green-slope-heatmap", style: { opacity: 0.7 }, legend: { detail: "relative" } });
view.setSmartComponentVisible("green-slope-heatmap", false);Defaults
Built-in presentation.
SubjectsHole · Green
Scale0–8% default · 0–4.4° optional
Percent paletteMint · teal · yellow · orange · red · purple
Degree paletteSage · forest · yellow · orange · red · purple
Color-impaired modeOff · mint/teal normal · olive-gold warning · magenta/plum risk when enabled
LegendHidden · block · dark translucent background · title off
DOM outputSeparate canvas layer
Component options
Configure behavior and presentation.
| Option | Type | Default | Description |
|---|---|---|---|
| type | "green-slope-heatmap" | Required | Requests a protected putting-surface slope-severity visualization 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. |
| unit | "percent" | "degrees" | "percent" | Selects grade percentage or angular degrees. Changing it requests a new protected raster. |
| colorImpaired | boolean | false | Uses the alternate graded mint/teal, olive-gold, magenta, and deep-plum semantic severity palette in either unit. Changing it requests a new protected raster and updates the matching legend. |
| style.opacity | number | 0.58 | Local canvas opacity from 0.1 through 0.9. |
| legend.size | number | 0.6 | Fraction from 0.2 through 1 of the selected graphic edge occupied by the color bar. |
| legend.position | "none" | "left" | "right" | "top" | "bottom" | "none" | None hides the legend; an edge value shows it with automatic vertical or horizontal orientation. |
| legend.thickness | "thin" | "normal" | "fat" | "normal" | Color-bar weight without changing its length. |
| legend.detail | "relative" | "full" | "full" | Relative crops to values present; Full keeps the complete 0–8% or 0–4.4° scale. |
| legend.style | "block" | "gradient" | "block" | Block renders discrete color bands; Gradient smoothly blends between scale colors. |
| legend.showTitle | boolean | false | Shows the title for Top or Bottom; ignored for Left, Right, and None. |
| legend.backgroundColor | GraphicColor | "rgba(7, 17, 13, 0.82)" | Borderless legend-panel fill using the shared transparent, hex, alpha-hex, RGB, or RGBA color formats. |
Behavior
Important implementation details.
- Omit unit or set unit to percent for the default 0–8% scale. Set unit to degrees to request a new protected raster using the 0–4.4° scale.
- The server derives true angular slope with atan(grade / 100), then applies the degree palette's evenly spaced 0.55° anchors. This slightly shifts degree-mode color transitions to produce clean 1.1° quarter labels.
- Values at or above 8% or 4.4° use the selected palette's endpoint, keeping each legend stable across every green.
- Set colorImpaired to true to use a continuously graded, monotonically darkening semantic severity scale with a color at every integer from 0% through 8% and the same colors mapped to 0.55° steps through 4.4°. Normal, warning, risky, and severe remain recognizable hue families while lightness preserves ordering. Block legends retain eight bands with 0–1 together in the first band; Gradient legends display the same scale continuously.
- The clean graphic remains unchanged and downloadable without the heatmap.
- The browser receives final RGBA display pixels, the selected unit, and rounded visible endpoints. The slope grid, elevations, derivatives, downhill bearings, polygon boundaries, coordinates, provider samples, and transforms stay private.
- Changing opacity, legend presentation, or visibility is local and makes no overlay request. The heatmap is locked beneath other Smart Component drawings while its compact legend remains readable above them.
Protected course dataThe response contains only the final artifact-aligned RGBA display layer. Putting elevations, slopes, derivatives, downhill bearings, the protected green polygon, longitude, latitude, provider samples, affine transforms, and the internal render sidecar remain server-side.