Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: ElevationProfile

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

NameSummary
new ElevationProfile(options, srcNode)Create a new ElevationProfile widget using the given DOM node.

CSS

esri/dijit/ElevationProfile | Download source

Properties

NameTypeSummary
measureUnitsStringThe measurement unit of the polyline geometry.
profileGeometryGeometryThe polyline input geometry used to create the elevation profile.
titleStringThe title of the resulting elevation profile.

Methods

NameReturn typeSummary
clearProfile()NoneClears the elevation profile chart.
destroy()NoneDestroy the widget.
startup()NoneFinalizes 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

NameEvent ObjectSummary
clear-profileFires when the elevation profile is cleared.
elevation-values
{
  data: <Object>
}
Fires after the profile is generated.
loadFires when the widget has fully loaded.
title-changedFires when the title of the elevation profile is changed.
update-profile
{
  profileResults: <Object>
}
Fires when the elevation profile is updated.
Constructor Details

new ElevationProfile(options, srcNode)

Create a new ElevationProfile widget using the given DOM node.
Parameters:
<Object> options Required See options table below for the full descriptions of the properties needed for this object.
<Node | String> srcNode Required Reference or id of the HTML element where the widget should be rendered.
options properties:
<Object> chartOptions Optional This object contains properties used to render the chart. See the object specifications table below for the structure of the chartOptions object.
<Map> map Required Reference to the map. If no map is specified, the value is null.
<String> profileTaskUrl Required The URL to the elevation profile service.
<String> scalebarUnits Optional The measurement unit of the scalebar units. For a listing, please refer to esri/units for additional help.
Object Specifications:
<chartOptions>
<String> axisFontColor Required The Hexadecimal font color of the chart axis.
<Number> axisLabelFontSize Required Font size of the labels along the chart axis.
<String> axisMajorTickColor Required The Hexadecimal font color of the chart's tick marks.
<Number> axisTitleFontSize Required Font size of the title along the chart axis.
<String> busyIndicatorBackgroundColor Required The background color used for the busy indicator.
<Number> busyIndicatorBackgroundOpacity Required The transparency value of the busy indicator.
<Number> busyIndicatorFadeDuration Required The fade duration value of the busy indicator.
<String> busyIndicatorImageUrl Required Url of the image used to display a busy indicator.
<Number> chartTitleFontSize Required Font size of the title.
<String> elevationBottomColor Required The Hexadecimal font color of the bottom elevation line.
<String> elevationLineColor Required The Hexadecimal font color of the elevation profile line.
<String> elevationMarkerStrokeColor 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"
<String> elevationMarkerSymbol 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.
<String> elevationTopColor Required The Hexadecimal font color of the top elevation line.
<String> indicatorFillColorSize Required The Hexadecimal font color used for the chart indicator fill.
<String> indicatorFontColor Required The Hexadecimal font color of the chart indicator.
<SimpleMarkerSymbol | PictureMarkerSymbol> mapIndicatorSymbol 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"));

<String> skyBottomColor Required The Hexadecimal font color of the bottom background sky of the chart.
<String> skyTopColor Required The Hexadecimal font color of the top background sky of the chart.
<String> title Required The title of the profile chart.
<String> titleFontColor Required The Hexadecimal font color of the chart title.
<String> waterBottomColor Required The Hexadecimal font color of the bottom water line.
<String> waterLineColor Required The Hexadecimal font color of the water line.
<String> waterTopColor 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> measureUnits

The measurement unit of the polyline geometry. Supported values include esriMiles, esriKilometers, esriMeters, esriNauticalMiles, esriYards and esriFeet.

<Geometry> profileGeometry

The polyline input geometry used to create the elevation profile.

<String> title

The 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

clearProfile()

Clears the elevation profile chart.

destroy()

Destroy the widget. Call this method when the widget is no longer needed by the application.

startup()

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 ]

clear-profile

Fires when the elevation profile is cleared.
Sample:
require([
...
], function( ... )
   on(elevationprofile,'clear-profile', function() {
      console.log ('cleared profile');
      });
   ...
});

elevation-values

Fires after the profile is generated. It is the aggregation of elevation gained and lost. (Added at v3.18)
Event Object Properties:
<Object> data 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
    );
});
...
});

load

Fires when the widget has fully loaded.
Sample:
on(widget, 'load', function(evt){})

title-changed

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');
  });
 ...
});

update-profile

Fires when the elevation profile is updated.
Event Object Properties:
<Object> profileResults 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);
      });
   ...
});
Show Modal