Smart Component 08
Green elevation heatmap.
Green elevation heatmap recreates the renderer's calibrated blue-low, red-high putting visualization as a separate canvas layer. CADDIE.100 privately samples and smooths the putting surface, clips it to the green, and returns only final artifact-aligned RGBA display pixels—not reusable course or terrain measurements.
type: "green-elevation-heatmap"component: caddie-green-elevation-heatmapProtected placement
Usage
Add the green elevation 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-elevation-heatmap",
colorImpaired: false,
style: { opacity: 0.42 },
legend: { size: 0.6, position: "top", thickness: "normal", detail: "full", style: "block", showTitle: true, backgroundColor: "rgba(7, 17, 13, 0.82)" },
}]);
// Opacity, legend, and visibility remain immediate local DOM changes.
view.setSmartComponentStyle({ type: "green-elevation-heatmap", style: { opacity: 0.6 }, legend: { detail: "relative" } });
view.setSmartComponentVisible("green-elevation-heatmap", false);Defaults
Built-in presentation.
SubjectsHole · Green
Low terrainTransparent blue
High terrainTransparent red
Neutral terrainTransparent
Color-impaired modeOff · blue / opaque neutral / orange-brown 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-elevation-heatmap" | Required | Requests a protected putting-surface elevation 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. |
| colorImpaired | boolean | false | Uses the alternate five-stop blue / opaque neutral / orange-brown diverging palette. Changing it requests a new protected raster and updates the matching legend. |
| style.opacity | number | 0.42 | Local canvas opacity from 0.1 through 0.8. |
| 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 colors present; Full keeps the complete Low–High 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.
- The server uses the same putting-scale smoothing and terrain-salience calibration as the image renderer; this is an elevation visualization, not a putt predictor.
- The clean graphic remains unchanged and downloadable without the heatmap.
- The browser receives final RGBA display pixels and rounded relative display-signal bounds aligned to that render. Elevations, slopes, polygon boundaries, longitude/latitude, provider samples, and projection transforms stay private.
- Changing opacity, legend presentation, or visibility is local and makes no overlay request. Enabling the component for a render requests the protected pixel layer once.
- Set colorImpaired to true to use a balanced five-stop diverging scale. Blue remains low, an opaque warm neutral marks typical elevation, and orange-brown remains high under common red-, green-, and blue-vision deficiencies; Low/High legend labels remain the non-color cue.
- Low and High sit inside horizontal bar ends and rotate with vertical bars so side legends stay narrow.
- The legend panel has no border and defaults to a dark translucent RGBA background; backgroundColor can replace it locally.
- The heatmap is locked and sits beneath other Smart Component drawings.
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.