Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: ElevationProfile
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/ElevationProfile"], function(ElevationProfile) { /* code goes here */ });
Description
(Added at v3.14)
(Currently in beta)
The Elevation Profile widget allows a user to create an elevation profile based on a polyline geometry input parameter or existing features.NOTE: Currently there is a known issue when creating an elevation profile that crosses the international dateline multiple times. This may cause inaccurate results. Also, it is only supported using AMD-style coding syntax.Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new ElevationProfile(options, srcNode) | Create a new ElevationProfile widget using the given DOM node. |
CSS
esri/dijit/ElevationProfile | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| measureUnits | String | The measurement unit of the polyline geometry. |
| profileGeometry | Geometry | The polyline input geometry used to create the elevation profile. |
| title | String | The title of the resulting elevation profile. |
Methods
| Name | Return type | Summary |
|---|---|---|
| clearProfile() | None | Clears the elevation profile chart. |
| destroy() | None | Destroy the widget. |
| startup() | None | Finalizes the creation of the ElevationProfile widget. |
Events
[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.
Events
| Name | Event Object | Summary |
|---|---|---|
| clear-profile | Fires when the elevation profile is cleared. | |
| elevation-values | {
data: < | Fires after the profile is generated. |
| load | Fires when the widget has fully loaded. | |
| title-changed | Fires when the title of the elevation profile is changed. | |
| update-profile | {
profileResults: < | Fires when the elevation profile is updated. |
Constructor Details
Create a new ElevationProfile widget using the given DOM node.
Parameters:
< |
Required | See options table below for the full descriptions of the properties needed for this object. |
< |
Required | Reference or id of the HTML element where the widget should be rendered. |
options properties: < |
Optional | This object contains properties used to render the chart. See the object specifications table below for the structure of the chartOptions object. |
< |
Required | Reference to the map. If no map is specified, the value is null. |
< |
Required | The URL to the elevation profile service. |
< |
Optional | The measurement unit of the scalebar units. For a listing, please refer to esri/units for additional help. |
Object Specifications:
<
chartOptions>< |
Required | The Hexadecimal font color of the chart axis. |
< |
Required | Font size of the labels along the chart axis. |
< |
Required | The Hexadecimal font color of the chart's tick marks. |
< |
Required | Font size of the title along the chart axis. |
< |
Required | The background color used for the busy indicator. |
< |
Required | The transparency value of the busy indicator. |
< |
Required | The fade duration value of the busy indicator. |
< |
Required | Url of the image used to display a busy indicator. |
< |
Required | Font size of the title. |
< |
Required | The Hexadecimal font color of the bottom elevation line. |
< |
Required | The Hexadecimal font color of the elevation profile line. |
< |
Required | The Hexadecimal font color of the indicator that appears on the chart showing the elevation peak for that location. Default color is red.
//this changes the elevationMarkerStrokeColor to cyan elevationMarkerStrokeColor: "#00FFFF" |
< |
Required | A string value representing the scalable vector graphic used for the symbol that displays on the chart showing the elevation peak for that location. Default is X. These are outlined below.
elevationMarkerSymbol: "m -6 -6, l 12 12, m 0 -12, l -12 12" /* CIRCLE: "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0", SQUARE: "m-3,-3 l0,6 6,0 0,-6 z", DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z", CROSS: "m0,-3 l0,6 m-3,-3 l6,0", X: "m-3,-3 l6,6 m0,-6 l-6,6", TRIANGLE: "m-3,3 l3,-6 3,6 z", TRIANGLE_INVERTED: "m-3,-3 l3,6 3,-6 z */To change the color use the elevationStrokeMarkerColor constructor option. |
< |
Required | The Hexadecimal font color of the top elevation line. |
< |
Required | The Hexadecimal font color used for the chart indicator fill. |
< |
Required | The Hexadecimal font color of the chart indicator. |
< |
Required | Either a SimpleMarkerSymbol or PictureMarkerSymbol indicating what displays on the polyline and shows the location of that point on the profile. Either type of symbol can be defined as an object or via JSON.
//The following snippet displays a semi-transparent green square with a red border using the SimpleMarkerSymbol object
var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 1),
new Color([0, 255, 0, 0.25]));
var profileParams = {
map: map,
chartOptions:{
mapIndicatorSymbol: sms
}
//The following snippet displays a blue circle with a white border using JSON
var profileParams = {
map: map,
chartOptions:{
mapIndicatorSymbol: {
type: "esriSMS",
style: "esriSMSCircle",
color:[0,183,235],
size:12,
outline:{
type: "esriSLS",
style: "esriSLSolid",
color:[255,255,255],
width:1
}
}
},
profileTaskUrl: "https://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer",
scalebarUnits: Units.MILES
};
epWidget = new ElevationsProfileWidget(profileParams, dom.byId("profileChartNode"));
|
< |
Required | The Hexadecimal font color of the bottom background sky of the chart. |
< |
Required | The Hexadecimal font color of the top background sky of the chart. |
< |
Required | The title of the profile chart. |
< |
Required | The Hexadecimal font color of the chart title. |
< |
Required | The Hexadecimal font color of the bottom water line. |
< |
Required | The Hexadecimal font color of the water line. |
< |
Required | The Hexadecimal font color of the top water line. |
Sample:
require([
"esri/map", "esri/dijit/ElevationProfile", ...
], function(Map, ElevationProfile, ...) {
var map = new Map(...);
//Chart options
var chartOptions = {
title: "My Elevation Profile Chart",
chartTitleFontSize: 14,
axisTitleFontSize: 11,
axisLabelFontSize: 9,
indicatorFontColor: '#eee',
indicatorFillColor: '#666',
busyIndicatorBackgroundColor: "#666",
titleFontColor: '#eee',
axisFontColor: '#ccc',
axisMajorTickColor: '#333',
skyTopColor: "#B0E0E6",
skyBottomColor: "#4682B4",
waterLineColor: "#eee",
waterTopColor: "#ADD8E6",
waterBottomColor: "#0000FF",
elevationLineColor: "#D2B48C",
elevationTopColor: "#8B4513",
elevationBottomColor: "#CD853F",
elevationMarkerStrokeColor: "#FF0000",
elevationMarkerSymbol: "m -6 -6, l 12 12, m 0 -12, l -12 12"
};
var elevationProfile = new ElevationProfile({
map: map,
profileTaskUrl: "http://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer",
scalebarUnits: Units.MILES,
chartOptions: chartOptions
},"elevationProfileDOM");
});
The following
Property Details
<String
StringThe measurement unit of the polyline geometry. Supported values include
esriMiles, esriKilometers, esriMeters, esriNauticalMiles, esriYards and esriFeet.<String
StringThe title of the resulting elevation profile. (Added at v3.15)
Default value:
"Elevation Profile"Sample:
//This changes the title of the elevation profile
epWidget.set("title","New title");
Method Details
Destroy the widget. Call this method when the widget is no longer needed by the application.
Finalizes the creation of the ElevationProfile widget. Call startup() after creating the widget when you are ready for user interaction.
Sample:
var elevationProfile = new ElevationProfile({
map: map,
profileTaskUrl: "http://elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer",
scalebarUnits: Units.MILES,
chartOptions: chartOptions
});
elevationProfile.startup();
Event Details
[ On Style Events | Connect Style Event ]
Fires when the elevation profile is cleared.
Sample:
require([
...
], function( ... )
on(elevationprofile,'clear-profile', function() {
console.log ('cleared profile');
});
...
});
Fires after the profile is generated. It is the aggregation of elevation gained and lost. (Added at v3.18)
Event Object Properties:
< |
An object containing the results of the aggregated and lost elevation data.
{
aggregateElevationGainForward: <Number> Aggregate elevation gained moving forward,
aggregateElevationLossForward: <Number> Aggregate elevation loss moving forward,
aggregateElevationGainReverse: <Number> Aggregate elevation gained in reverse,
aggregateElevationLossReverse: <Number> Aggregate elevation loss in reverse
}
|
Sample:
require([
...
], function( ... )
on(epWidget, "elevation-values", function(data) {
console.log(
"Forward Gained: " + data.aggregateElevationGainForward +
" Forward Loss: " + data.aggregateElevationLossForward +
" Reverse Gained: " + data.aggregateElevationGainReverse +
" Reverse Loss: " + data.aggregateElevationLossReverse
);
});
...
});Fires when the title of the elevation profile is changed (Added at v3.15)
Sample:
require([
...
], function( ... )
on(elevationprofile,'title-changed', function() {
console.log ('title changed');
});
...
});
Fires when the elevation profile is updated.
Event Object Properties:
< |
An object containing the results of the updated elevation profile.
{
geometry: <Object>,
elevations: <Number[]>,
distances: <Number[]>,
samplingDistance: <Number[]>
}
|
Sample:
require([
...
], function( ... )
on(elevationprofile,'update-profile', function(e) {
console.log ('update profile', e);
});
...
});