--- title: "ElevationProfileOptions | Elevation profile | JavaScript maps SDK" description: "Documentation for Elevation Profile Control" --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Type Alias ElevationProfileOptions type ElevationProfileOptions \= {     [backgroundColor](#backgroundcolor)?: string | null;     [crosshairColor](#crosshaircolor)?: string;     [displayCrosshair](#displaycrosshair)?: boolean;     [displayDistanceGrid](#displaydistancegrid)?: boolean;     [displayDistanceLabels](#displaydistancelabels)?: boolean;     [displayElevationGrid](#displayelevationgrid)?: boolean;     [displayElevationLabels](#displayelevationlabels)?: boolean;     [displayTooltip](#displaytooltip)?: boolean;     [displayUnits](#displayunits)?: boolean;     [distanceGridColor](#distancegridcolor)?: string;     [elevationGridColor](#elevationgridcolor)?: string;     [fontSize](#fontsize)?: number;     [forceComputeElevation](#forcecomputeelevation)?: boolean;     [labelColor](#labelcolor)?: string;     [onChangeView](#onchangeview)?: ((windowedLineString: LineString) \=> void) | null;     [onClick](#onclick)?: ((data: [CallbackData](https://docs.maptiler.com/sdk-js/modules/elevation-profile/api/types/CallbackData/)) \=> void) | null;     [onMove](#onmove)?: ((data: [CallbackData](https://docs.maptiler.com/sdk-js/modules/elevation-profile/api/types/CallbackData/)) \=> void) | null;     [paddingBottom](#paddingbottom)?: number;     [paddingLeft](#paddingleft)?: number;     [paddingRight](#paddingright)?: number;     [paddingTop](#paddingtop)?: number;     [profileBackgroundColor](#profilebackgroundcolor)?: string | null;     [profileLineColor](#profilelinecolor)?: string | null;     [profileLineWidth](#profilelinewidth)?: number;     [tooltipBackgroundColor](#tooltipbackgroundcolor)?: string;     [tooltipDisplayDistance](#tooltipdisplaydistance)?: boolean;     [tooltipDisplayDPlus](#tooltipdisplaydplus)?: boolean;     [tooltipDisplayElevation](#tooltipdisplayelevation)?: boolean;     [tooltipDisplayGrade](#tooltipdisplaygrade)?: boolean;     [tooltipTextColor](#tooltiptextcolor)?: string;     [unit](#unit)?: "metric" | "imperial"; } - Defined in [elevationprofile.ts:104](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L104) ##### Index ### Properties [backgroundColor?](#backgroundcolor) [crosshairColor?](#crosshaircolor) [displayCrosshair?](#displaycrosshair) [displayDistanceGrid?](#displaydistancegrid) [displayDistanceLabels?](#displaydistancelabels) [displayElevationGrid?](#displayelevationgrid) [displayElevationLabels?](#displayelevationlabels) [displayTooltip?](#displaytooltip) [displayUnits?](#displayunits) [distanceGridColor?](#distancegridcolor) [elevationGridColor?](#elevationgridcolor) [fontSize?](#fontsize) [forceComputeElevation?](#forcecomputeelevation) [labelColor?](#labelcolor) [onChangeView?](#onchangeview) [onClick?](#onclick) [onMove?](#onmove) [paddingBottom?](#paddingbottom) [paddingLeft?](#paddingleft) [paddingRight?](#paddingright) [paddingTop?](#paddingtop) [profileBackgroundColor?](#profilebackgroundcolor) [profileLineColor?](#profilelinecolor) [profileLineWidth?](#profilelinewidth) [tooltipBackgroundColor?](#tooltipbackgroundcolor) [tooltipDisplayDistance?](#tooltipdisplaydistance) [tooltipDisplayDPlus?](#tooltipdisplaydplus) [tooltipDisplayElevation?](#tooltipdisplayelevation) [tooltipDisplayGrade?](#tooltipdisplaygrade) [tooltipTextColor?](#tooltiptextcolor) [unit?](#unit) ## Properties ### `Optional`backgroundColor[](#backgroundcolor) backgroundColor?: string | null Color of the background of the chart - Defined in [elevationprofile.ts:108](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L108) ### `Optional`crosshairColor[](#crosshaircolor) crosshairColor?: string Color of the crosshair. Default: `"#0005"` (partially transparent black) - Defined in [elevationprofile.ts:276](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L276) ### `Optional`displayCrosshair[](#displaycrosshair) displayCrosshair?: boolean Display the crosshair, a vertical line that follows the pointer, if `true`. Default: `true` - Defined in [elevationprofile.ts:270](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L270) ### `Optional`displayDistanceGrid[](#displaydistancegrid) displayDistanceGrid?: boolean Display the distance grid lines (vertical lines matching the distance labels) if `true`. Default: `false` - Defined in [elevationprofile.ts:222](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L222) ### `Optional`displayDistanceLabels[](#displaydistancelabels) displayDistanceLabels?: boolean Display the distance labels alon the horizontal axis. Default: `true` - Defined in [elevationprofile.ts:142](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L142) ### `Optional`displayElevationGrid[](#displayelevationgrid) displayElevationGrid?: boolean Display the elevation grid lines (horizontal lines matching the elevation labels) if `true`. Default: `true` - Defined in [elevationprofile.ts:228](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L228) ### `Optional`displayElevationLabels[](#displayelevationlabels) displayElevationLabels?: boolean Display the elevation label along the vertical axis. Default: `true` - Defined in [elevationprofile.ts:136](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L136) ### `Optional`displayTooltip[](#displaytooltip) displayTooltip?: boolean Display the tooltip folowing the pointer. Default: `true` - Defined in [elevationprofile.ts:180](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L180) ### `Optional`displayUnits[](#displayunits) displayUnits?: boolean Display the distance and elevation units alongside the labels. Default: `true` - Defined in [elevationprofile.ts:148](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L148) ### `Optional`distanceGridColor[](#distancegridcolor) distanceGridColor?: string Color of the distance grid lines. Default: `"#0001"` (partially transparent black) - Defined in [elevationprofile.ts:234](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L234) ### `Optional`elevationGridColor[](#elevationgridcolor) elevationGridColor?: string Color of the elevation drig lines. Default: `"#0001"` (partially transparent black) - Defined in [elevationprofile.ts:240](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L240) ### `Optional`fontSize[](#fontsize) fontSize?: number Font size applied to axes labels and tooltip. Default: `12` - Defined in [elevationprofile.ts:122](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L122) ### `Optional`forceComputeElevation[](#forcecomputeelevation) forceComputeElevation?: boolean If `true`, will force the computation of the elevation of the GeoJSON data provided to the `.setData()` method, even if they already contain elevation (possibly from GPS while recording). If `false`, the elevation will only be computed if missing from the positions. Default: `false` - Defined in [elevationprofile.ts:130](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L130) ### `Optional`labelColor[](#labelcolor) labelColor?: string Color of the elevation and distance labels. Default: `"#0009"` (partially transparent black) - Defined in [elevationprofile.ts:154](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L154) ### `Optional`onChangeView[](#onchangeview) onChangeView?: ((windowedLineString: LineString) \=> void) | null Callback function to call when the chart is zoomed or panned. The argument `windowedLineString` is the GeoJSON LineString corresponding to the portion of the route visible in the elevation chart. Default: `null` - Defined in [elevationprofile.ts:284](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L284) ### `Optional`onClick[](#onclick) onClick?: ((data: [CallbackData](https://docs.maptiler.com/sdk-js/modules/elevation-profile/api/types/CallbackData/)) \=> void) | null Callback function to call when the the elevation chart is clicked. Default: `null` - Defined in [elevationprofile.ts:290](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L290) ### `Optional`onMove[](#onmove) onMove?: ((data: [CallbackData](https://docs.maptiler.com/sdk-js/modules/elevation-profile/api/types/CallbackData/)) \=> void) | null Callback function to call when the pointer is moving on the elevation chart. Default: `null` - Defined in [elevationprofile.ts:296](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L296) ### `Optional`paddingBottom[](#paddingbottom) paddingBottom?: number Padding at the bottom of the chart, in number of pixels. Default: `10` - Defined in [elevationprofile.ts:252](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L252) ### `Optional`paddingLeft[](#paddingleft) paddingLeft?: number Padding at the left of the chart, in number of pixels. Default: `10` - Defined in [elevationprofile.ts:258](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L258) ### `Optional`paddingRight[](#paddingright) paddingRight?: number Padding at the right of the chart, in number of pixels. Default: `10` - Defined in [elevationprofile.ts:264](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L264) ### `Optional`paddingTop[](#paddingtop) paddingTop?: number Padding at the top of the chart, in number of pixels. Default: `30` - Defined in [elevationprofile.ts:246](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L246) ### `Optional`profileBackgroundColor[](#profilebackgroundcolor) profileBackgroundColor?: string | null Color of the elevation profile background (below the profile line) Can be `null` to not display any backgound color. Default: `"#66ccff22"` - Defined in [elevationprofile.ts:174](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L174) ### `Optional`profileLineColor[](#profilelinecolor) profileLineColor?: string | null Color of the elevation profile line. Can be `null` to not display the line and rely on the background color only. Default: `"#66ccff"` - Defined in [elevationprofile.ts:161](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L161) ### `Optional`profileLineWidth[](#profilelinewidth) profileLineWidth?: number Width of the elevation profile line. Default: `1.5` - Defined in [elevationprofile.ts:167](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L167) ### `Optional`tooltipBackgroundColor[](#tooltipbackgroundcolor) tooltipBackgroundColor?: string Color of the tooltip background. Default: `"#000A"` (partially transparent black) - Defined in [elevationprofile.ts:192](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L192) ### `Optional`tooltipDisplayDistance[](#tooltipdisplaydistance) tooltipDisplayDistance?: boolean Display the distance information inside the tooltip if `true`. Default: `true` - Defined in [elevationprofile.ts:198](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L198) ### `Optional`tooltipDisplayDPlus[](#tooltipdisplaydplus) tooltipDisplayDPlus?: boolean Display the D+ (cumulated positive ascent) inside the tooltip if `true`. Default: `true` - Defined in [elevationprofile.ts:210](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L210) ### `Optional`tooltipDisplayElevation[](#tooltipdisplayelevation) tooltipDisplayElevation?: boolean Display the elevation information inside the tooltip if `true`. Default: `true` - Defined in [elevationprofile.ts:204](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L204) ### `Optional`tooltipDisplayGrade[](#tooltipdisplaygrade) tooltipDisplayGrade?: boolean Display the slope grade in percentage inside the tooltip if `true`. Default: `true` - Defined in [elevationprofile.ts:216](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L216) ### `Optional`tooltipTextColor[](#tooltiptextcolor) tooltipTextColor?: string Color of the text inside the tooltip. Default: `"#fff"` - Defined in [elevationprofile.ts:186](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L186) ### `Optional`unit[](#unit) unit?: "metric" | "imperial" Unit system to use. If "metric", elevation and D+ will be in meters, distances will be in km. If "imperial", elevation and D+ will be in feet, distances will be in miles. Default: "metric" - Defined in [elevationprofile.ts:116](https://github.com/maptiler/maptiler-elevation-profile-control/blob/d743345a80a057304068c68d525af7f308519fb1/src/elevationprofile.ts#L116)