Developers/Graphics JS/Components/Green elevation heatmap

Smart Component 07

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",
  style: { opacity: 0.42 },
}]);

// Opacity and visibility remain immediate local canvas changes.
view.setSmartComponentStyle({ type: "green-elevation-heatmap", style: { opacity: 0.6 } });
view.setSmartComponentVisible("green-elevation-heatmap", false);

Defaults

Built-in presentation.

SubjectsHole · Green
Low terrainTransparent blue
High terrainTransparent red
Neutral terrainTransparent
DOM outputSeparate canvas layer

Component options

Configure behavior and presentation.

OptionTypeDefaultDescription
type"green-elevation-heatmap"RequiredRequests a protected putting-surface elevation visualization for a Hole or Green graphic.
idstringAutomaticOptional stable 1–64 character instance ID using letters, numbers, underscores, or hyphens. Use IDs to independently control repeated Smart Components of the same type.
style.opacitynumber0.42Local canvas opacity from 0.1 through 0.8.

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 only final RGBA display pixels aligned to that render. Elevations, slopes, polygon boundaries, longitude/latitude, provider samples, and projection transforms stay private.
  • Changing opacity or visibility is local and makes no overlay request. Enabling the component for a render requests the protected pixel layer once.
  • 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, the protected green polygon, longitude, latitude, provider samples, affine transforms, and the internal render sidecar remain server-side.