The ElevationProfile widget is used to generate and display an elevation profile from an input line graphic. The input graphic can be set interactively by ...
ArcGISAPIforJavaScriptAPIReferenceOverviewSampleCodeAPIReferenceShowcaseBlogMenuesriesri/analysisesri/coreesri/formesri/geometryesri/identityesri/layersesri/networksesri/popupesri/portalesri/renderersesri/restesri/smartMappingesri/supportesri/symbolsesri/viewsesri/webdocesri/webmapesri/websceneesri/widgetsAreaMeasurement2DAreaMeasurement3DAttachmentsAttributionBasemapGalleryBasemapLayerListBasemapToggleBookmarksBuildingExplorerCompassCoordinateConversionDaylightDirectionsDirectLineMeasurement3DDistanceMeasurement2DEditorElevationProfileExpandFeatureFeatureFormFeatureTableFeatureTemplatesFloorFilterFullscreenHistogramHistogramRangeSliderHomeLayerListLegendLineOfSightLocateMeasurementNavigationTogglePopupPrintScaleBarScaleRangeSliderSearchShadowCastSketchSliceSliderSwipeTableListTimeSliderTrackUtilityNetworkTraceWeatherWidgetZoomEditorFeatureTableFeatureTable/GridFeatureTable/supportShadowCastSliceUtilityNetworkTraceWeathersmartMappingsupportsupport/SnappingControlsReferenceNavigationMenuElevationProfile
TheElevationProfilewidgetisusedtogenerateanddisplayanelevationprofilefromaninputlinegraphic.
Theinputgraphiccanbesetinteractivelybydrawingasingleormulti-segmentline,orbyselectingalinefeatureintheview.
Alternativelythewidgetallowstosetaninputgraphicprogrammaticallyoncreation,oratruntime,bysettingthe
inputproperty.
ElevationProfilewidgetusedinacityscene,displayinggroundandbuildingprofiles.SeeSample-ElevationProfilewidget
Thewidgetcanvisualizemultipleprofilelines,dependingontheenvironment(2Dversus3D)andelevationsourcedata:
ElevationProfileLineGroundcanbeusedinbothMapView
andSceneView.Inthiscase,theelevationissampleddirectlyfrom
Map.ground.Whetheryourmapisdisplayedin2Dor3D,thegroundpropertyneedstobesetonthemap.
ElevationProfileLineInputsampleselevationdatafromthegeometryof
theinputgraphic.Itistypicallyusedwithinputlinedatawithzvalues.Iftheinputlinedatadoesn'thavezvalues,aprofileline
isalsocomputedifthelineisdisplayedwithanon-drapedelevationmode.Anelevationoffsetcanalsobeapplied.
Currentlyin2Dzvaluesarenotfetchedfromfeaturebasedlayers,soinaMapView
thisprofilelinecanonlybeusedwithclient-sidegraphicswithzvalues.
ElevationProfileLineQuerysampleselevationdatafromtheelevationsourcesetinthe
sourceproperty.Theelevationsourcecanbean
ElevationLayeroranyobjectwithamethodcalledqueryElevation,withthesamesignatureas
queryElevation.
ElevationProfileLineViewisavailableonlyina
SceneViewanditdisplaystheelevationsampleddirectlyfromtheviewalongtheinputgraphic.
AllvolumetricobjectsinaSceneViewcontributetotheresultingprofile.
Youcanchoosetodisplayoneorseveralprofilelinesinthechart,bysettingthemintheprofilesproperty.
Onceallprofilesarerefinedtotheirmaximumresolution,thecorresponding3Dprofilelinesappearinthe
SceneView(currentlynolinesaredisplayedinaMapView),
andprofilestatisticsdisplayinthelegendforeachprofileline.
Hoveringonthechartshowsanoverlayedtooltipwithelevationvaluesofallprofiles,
anddisplayscoloreddotmarkersinthe3Dviewonthematchingpositions.
Checkboxesinthelegendallowtohideindividualprofiles.
Chartunitscanbesetviathesettingsmenutometric,imperialoraspecificunit.
Click-and-dragonthechartzoomsintoaspecificpartoftheprofilechart.Whenzoomedin,clickontheminusbuttontoresetzoom.
Drawingapathtogetagroundprofile.
Profilegeneratedfromalinefeaturewithz-valuesshowsaparaglidetrackaboveground.
KnownLimitations
In3DElevationProfileLineInputisnottakingintoconsideration
thefeatureExpressionsetontheelevationmodeofthelayer.
In2Dzvaluesarenotfetchedfromfeaturebasedlayers.Therefore,
ElevationProfileLineInputcanonlybeusedwithclient-sidegraphicswithzvalues
inaMapView.
Forinformationaboutgainingfullcontrolofwidgetstyles,seetheStylingtopic.
Seealso:
Sample-ElevationProfilewidget
ElevationProfile.scss
ElevationProfileViewModel
ElevationProfileLineGround
ElevationProfileLineInput
ElevationProfileLineQuery
ElevationProfileLineView
Examples:
constelevationProfile=newElevationProfile({
view:view
});
//addstheElevationProfiletothetoprightcorneroftheview
view.ui.add(elevationProfile,"top-right");
//elevationprofilewithallthelineprofiles
constelevationProfile=newElevationProfile({
view:view,
profiles:[{
//displayselevationvaluesfromMap.ground
type:"ground",//autocastsasnewElevationProfileLineGround()
color:"#61d4a4",
title:"Groundelevation"
},{
//displayselevationvaluesfromtheinputlinegraphic
type:"input",//autocastsasnewElevationProfileLineInput()
color:"#f57e42",
title:"Lineelevation"
},{
//displayselevationvaluesfromaSceneView
type:"view",//autocastsasnewElevationProfileLineView()
color:"#8f61d4",
title:"Viewelevation"
//bydefaultgroundandalllayersareusedtocomputeelevation,but
//youcandefinewhichelementsshouldbeincluded/excludedfromthecomputation
exclude:[map.ground]
},{
//displayselevationvaluesfromacustomsource
type:"query",
source:newElevationLayer({
url:"https://elevation3d.arcgis.com/arcgis/rest/../Terrain3D/ImageServer"
}),
color:"#d46189",
title:"Customelevation"
}]
});
view.ui.add(elevationProfile,"bottom-right");
Constructors
newElevationProfile(properties)
Parameter:
properties
Object
optional
Seethepropertiesforalistofalltheproperties
thatmaybepassedintotheconstructor.
PropertyOverview
Anypropertiescanbeset,retrievedorlistenedto.SeetheWorkingwithPropertiestopic.
Showinheritedproperties
Hideinheritedproperties
Name
Type
Summary
Class
containerString|HTMLElementmoredetailsTheIDornoderepresentingtheDOMelementcontainingthewidget.moredetailsWidget
declaredClassStringmoredetailsThenameoftheclass.moredetailsAccessor
geodesicDistanceThresholdNumbermoredetailsWhenthespatialreferenceisprojected(otherthanwebmercator)andthepathisshorterthanthisthreshold,distanceswillbecomputedplanimetrically.moredetailsElevationProfile
iconClassStringmoredetailsThewidget'sdefaultCSSiconclass.moredetailsElevationProfile
idStringmoredetailsTheuniqueIDassignedtothewidgetwhenthewidgetiscreated.moredetailsWidget
inputGraphicmoredetailsTheinputlinegraphicalongwhichelevationwillbequeriedinordertogenerateanelevationprofile.moredetailsElevationProfile
labelStringmoredetailsThewidget'sdefaultlabel.moredetailsElevationProfile
profilesCollectionmoredetailsCollectionofelevationprofilelineswhicharetobegeneratedanddisplayedinthewidget'schart.moredetailsElevationProfile
unitSystemOrLengthUnitmoredetailsUnitsystem(imperial,metric)orspecificunitusedfordisplayingtheelevationanddistancevalues.moredetailsElevationProfile
unitOptionsSystemOrLengthUnit[]moredetailsListofavailableunitsandunitsystems(imperial,metric)fordisplayingtheelevationanddistancevalues.moredetailsElevationProfile
viewSceneView|MapViewmoredetailsAreferencetotheSceneViewortheMapView.moredetailsElevationProfile
viewModelElevationProfileViewModelmoredetailsTheviewmodelforthiswidget.moredetailsElevationProfile
visibleBooleanmoredetailsIndicateswhetherthewidgetisvisible.moredetailsWidget
visibleElementsVisibleElementsmoredetailsThispropertyprovidestheabilitytodisplayorhidetheindividualelementsofthewidget.moredetailsElevationProfile
PropertyDetails
containerString|HTMLElement
inherited
TheIDornoderepresentingtheDOMelementcontainingthewidget.
Thispropertycanonlybesetonce.Thefollowingexamplesareallvalidusecases
whenworkingwithwidgets.
Examples:
//CreatetheHTMLdivelementprogrammaticallyatruntimeandsettothewidget'scontainer
constbasemapGallery=newBasemapGallery({
view:view,
container:document.createElement("div")
});
//Addthewidgettothetop-rightcorneroftheview
view.ui.add(basemapGallery,{
position:"top-right"
});
//Specifyanalready-definedHTMLdivelementinthewidget'scontainer
constbasemapGallery=newBasemapGallery({
view:view,
container:basemapGalleryDiv
});
//Addthewidgettothetop-rightcorneroftheview
view.ui.add(basemapGallery,{
position:"top-right"
});
//HTMLmarkup
//Specifythewidgetwhileaddingtotheview'sUI
constbasemapGallery=newBasemapGallery({
view:view
});
//Addthewidgettothetop-rightcorneroftheview
view.ui.add(basemapGallery,{
position:"top-right"
});
declaredClassStringreadonly
inherited
Thenameoftheclass.Thedeclaredclassnameisformattedasesri.folder.className.
geodesicDistanceThresholdNumber
Whenthespatialreferenceisprojected(otherthanwebmercator)andthe
pathisshorterthanthisthreshold,distanceswillbecomputedplanimetrically.
Otherwisedistanceswillbecomputedgeodetically.
DefaultValue:100000
iconClassString
Thewidget'sdefaultCSSiconclass.
idString
inherited
TheuniqueIDassignedtothewidgetwhenthewidgetiscreated.
Ifnotsetbythedeveloper,itwilldefaulttothecontainerID,
orifthatisnotpresentthenitwillbeautomaticallygenerated.
inputGraphicautocast
Theinputlinegraphicalongwhichelevationwillbequeriedinordertogenerateanelevationprofile.
Typicallynotsetwhencreatingthewidget.Inthiscasethewidgetstartsempty,
andwaitsfortheusertoeitherdrawanewprofileorgenerateaprofilefromselectingalinefeature.
Theresultofthisactionpopulatesinput.
inputcanbesetwhenconstructingthewidget,orsetorchangedatruntime.
TheinputgraphicmustcontainageometryoftypePolyline,
symbolandattributesoftheinputgraphicareignored.
DefaultValue:null
labelString
Thewidget'sdefaultlabel.
profilesCollectionautocast
Collectionofelevationprofilelineswhicharetobegeneratedanddisplayedinthewidget's
chart.Seethedifferentprofilelinetypesfordetailsonusageandbehavior.
Onceanelevationprofileisgenerated,eachlinewillcontaintherawdatausedto
generatethechartandprofilestatistics.
Theorderoftheprofileswithinthecollectiondeterminesthedrawingorderonthechart.
InaMapViewElevationProfileLineView
isnotsupported.
Example:
constelevationProfile=newElevationProfile({
view:view,
profiles:[{
//displayselevationvaluesfromMap.ground
type:"ground",//autocastsasnewElevationProfileLineGround()
},{
//displayselevationvaluesfromtheinputlinegraphic
type:"input",//autocastsasnewElevationProfileLineInput()
},{
//displayselevationvaluesfromanelevationsource
type:"query",//autocastsasnewElevationProfileLineQuery()
source:elevationLayer
},{
//displayselevationvaluesfromaSceneView
type:"view"//autocastsasnewElevationProfileLineView()
}]
});
unitSystemOrLengthUnit
Unitsystem(imperial,metric)orspecificunitusedfordisplayingtheelevationanddistancevalues.
unitOptionsSystemOrLengthUnit[]
Listofavailableunitsandunitsystems(imperial,metric)fordisplayingtheelevationanddistancevalues.
viewSceneView|MapView
AreferencetotheSceneViewortheMapView.
viewModelElevationProfileViewModelautocast
Theviewmodelforthiswidget.Thisisaclassthatcontainsallthelogic(propertiesandmethods)
thatcontrolsthiswidget'sbehavior.SeetheElevationProfileViewModel
classtoaccessallpropertiesandmethodsonthewidget.
visibleBoolean
inherited
Indicateswhetherthewidgetisvisible.
Iffalse,thewidgetwillnolongerberenderedinthewebdocument.Thismayaffectthelayoutofotherelementsorwidgetsinthedocument.Forexample,ifthiswidgetisthefirstofthreewidgetsassociatedtotheupperrighthandcorneroftheviewUI,thentheotherwidgetswillrepositionwhenthiswidgetismadeinvisible.
Formoreinformation,refertotheCSSdisplayvalueof"none".
DefaultValue:true
Example:
//Hidesthewidgetintheview
widget.visible=false;
visibleElementsVisibleElements
Thispropertyprovidestheabilitytodisplayorhidetheindividualelementsofthewidget.
Example:
elevationProfile.visibleElements={
legend:true,
chart:true,
clearButton:true,
settingsButton:true,
sketchButton:true,
selectButton:true,
uniformChartScalingToggle:true
}
MethodOverview
Showinheritedmethods
Hideinheritedmethods
Name
ReturnType
Summary
Class
classes()
StringmoredetailsAutilitymethodusedforbuildingthevalueforawidget'sclassproperty.moredetailsWidget
destroy()
moredetailsDestroysthewidgetinstance.moredetailsWidget
emit()
BooleanmoredetailsEmitsaneventontheinstance.moredetailsWidget
hasEventListener()
BooleanmoredetailsIndicateswhetherthereisaneventlistenerontheinstancethatmatchestheprovidedeventname.moredetailsWidget
isFulfilled()
BooleanmoredetailsisFulfilled()maybeusedtoverifyifcreatinganinstanceoftheclassisfulfilled(eitherresolvedorrejected).moredetailsWidget
isRejected()
BooleanmoredetailsisRejected()maybeusedtoverifyifcreatinganinstanceoftheclassisrejected.moredetailsWidget
isResolved()
BooleanmoredetailsisResolved()maybeusedtoverifyifcreatinganinstanceoftheclassisresolved.moredetailsWidget
on()
ObjectmoredetailsRegistersaneventhandlerontheinstance.moredetailsWidget
own()
moredetailsAddsoneormorehandleswhicharetobetiedtothelifecycleofthewidget.moredetailsWidget
postInitialize()
moredetailsThismethodisprimarilyusedbydeveloperswhenimplementingcustomwidgets.moredetailsWidget
render()
ObjectmoredetailsThismethodisprimarilyusedbydeveloperswhenimplementingcustomwidgets.moredetailsWidget
renderNow()
moredetailsRenderswidgettotheDOMimmediately.moredetailsWidget
scheduleRender()
moredetailsThismethodisprimarilyusedbydeveloperswhenimplementingcustomwidgets.moredetailsWidget
when()
Promisemoredetailswhen()maybeleveragedonceaninstanceoftheclassiscreated.moredetailsWidget
MethodDetails
classes(classNames){String}inherited
Autilitymethodusedforbuildingthevalueforawidget'sclassproperty.
ThisaidsinsimplifyingCSSclasssetup.
Parameter:
classNames
String|String[]|Object
repeatable
Theclassnames.
Returns:
Type
Description
String
Thecomputedclassname.
Seealso:
Guide-Widgetdevelopment(rendering)
Example:
//.tsxsyntaxshowinghowtosetCSSclasseswhilerenderingthewidget
render(){
constdynamicIconClasses={
[CSS.myIcon]:this.showIcon,
[CSS.greyIcon]:!this.showIcon
};
return(
);
}
destroy()inherited
Destroysthewidgetinstance.
emit(type,event){Boolean}inherited
Emitsaneventontheinstance.Thismethodshouldonlybeusedwhencreatingsubclassesofthisclass.
Parameters:
type
String
Thenameoftheevent.
event
Object
optional
Theeventpayload.
Returns:
Type
Description
Boolean
trueifalistenerwasnotified
hasEventListener(type){Boolean}inherited
Indicateswhetherthereisaneventlistenerontheinstancethatmatches
theprovidedeventname.
Parameter:
type
String
Thenameoftheevent.
Returns:
Type
Description
Boolean
Returnstrueiftheclasssupportstheinputevent.
isFulfilled(){Boolean}inherited
Since:ArcGISAPIforJavaScript4.19
isFulfilled()maybeusedtoverifyifcreatinganinstanceoftheclassisfulfilled(eitherresolvedorrejected).
Ifitisfulfilled,truewillbereturned.
Returns:
Type
Description
Boolean
Indicateswhethercreatinganinstanceoftheclasshasbeenfulfilled(eitherresolvedorrejected).
isRejected(){Boolean}inherited
Since:ArcGISAPIforJavaScript4.19
isRejected()maybeusedtoverifyifcreatinganinstanceoftheclassisrejected.
Ifitisrejected,truewillbereturned.
Returns:
Type
Description
Boolean
Indicateswhethercreatinganinstanceoftheclasshasbeenrejected.
isResolved(){Boolean}inherited
Since:ArcGISAPIforJavaScript4.19
isResolved()maybeusedtoverifyifcreatinganinstanceoftheclassisresolved.
Ifitisresolved,truewillbereturned.
Returns:
Type
Description
Boolean
Indicateswhethercreatinganinstanceoftheclasshasbeenresolved.
on(type,listener){Object}inherited
Registersaneventhandlerontheinstance.Callthismethodtohookaneventwithalistener.
Parameters:
type
String|String[]
Aneventoranarrayofeventstolistenfor.
listener
Function
Thefunctiontocallwhentheeventfires.
Returns:
Type
Description
Object
Returnsaneventhandlerwitharemove()methodthatshouldbecalledtostoplisteningfortheevent(s).
Property
Type
Description
remove
Function
Whencalled,removesthelistenerfromtheevent.
Example:
view.on("click",function(event){
//eventistheeventhandlereturnedaftertheeventfires.
console.log(event.mapPoint);
});
own(handleOrHandles)inherited
Since:ArcGISAPIforJavaScript4.24
Addsoneormorehandleswhicharetobetiedtothelifecycleofthewidget.Thehandleswill
beremovedwhenthewidgetisdestroyed.
consthandle=reactiveUtils.when(
()=>!view.updating,
()=>{
wkidSelect.disabled=false;
},
{once:true}
);
this.own(handle);//Handlegetsremovedwhenthewidgetisdestroyed.
Parameter:
handleOrHandles
WatchHandle|WatchHandle[]
Handlesmarkedforremovaloncethewidgetisdestroyed.
postInitialize()inherited
Thismethodisprimarilyusedbydeveloperswhenimplementingcustomwidgets.
Executesafterwidgetisreadyforrendering.
render(){Object}inherited
Thismethodisprimarilyusedbydeveloperswhenimplementingcustomwidgets.
Itmustbeimplementedbysubclassesforrendering.
Returns:
Type
Description
Object
Therenderedvirtualnode.
renderNow()inherited
RenderswidgettotheDOMimmediately.
scheduleRender()inherited
Thismethodisprimarilyusedbydeveloperswhenimplementingcustomwidgets.
Scheduleswidgetrendering.ThismethodisusefulforchangesaffectingtheUI.
when(callback,errback){Promise}inherited
Since:ArcGISAPIforJavaScript4.19
when()maybeleveragedonceaninstanceoftheclassiscreated.Thismethodtakestwoinputparameters:acallbackfunctionandanerrbackfunction.
Thecallbackexecuteswhentheinstanceoftheclassloads.The
errbackexecutesiftheinstanceoftheclassfailstoload.
Parameters:
callback
Function
optional
Thefunctiontocallwhenthepromiseresolves.
errback
Function
optional
Thefunctiontoexecutewhenthepromisefails.
Returns:
Type
Description
Promise
Returnsanewpromisefortheresultofcallbackthatmaybeusedto
chainadditionalfunctions.
Example:
//AlthoughthisexampleusestheBasemapGallerywidget,anyclassinstancethatisapromisemayusewhen()inthesameway
letbmGallery=newBasemapGallery();
bmGallery.when(function(){
//Thisfunctionwillexecuteoncethepromiseisresolved
},function(error){
//Thisfunctionwillexecuteifthepromiseisrejectedduetoanerror
});
TypeDefinitions
VisibleElements
Thevisibleelementsthataredisplayedwithinthewidget.
Thisprovidestheabilitytoturnindividualelementsofthewidget'sdisplayon/off.
Thevisualelementsinthiswidgetarethelegend,chart,settingsButton,sketchButton,andselectButton.
Theseareallsettotruebydefault.
Properties:
legend
Boolean
optional
DefaultValue:true
Whensettofalse,thelegend(whichincludesstatistics)isnotdisplayed.
chart
Boolean
optional
DefaultValue:true
Whensettofalse,thechartisnotdisplayed.
clearButton
Boolean
optional
DefaultValue:true
Whensettofalsethebuttonusedtoclearthecurrentelevationprofileisnotdisplayed.
settingsButton
Boolean
optional
DefaultValue:true
Whensettofalse,thebuttonusedtoopenthesettingspopupisnotdisplayed.
sketchButton
Boolean
optional
DefaultValue:true
Whensettofalse,thebuttonusedtostartdrawing/sketchinngisnotdisplayed.
selectButton
Boolean
optional
DefaultValue:true
Whensettofalse,thebuttonusedtoselectapathisnotdisplayed.
unitSelector
Boolean
optional
DefaultValue:true
Whensettofalse,thedropdownusedtoselecttheunitsisnotdisplayed.
uniformChartScalingToggle
Boolean
optional
DefaultValue:true
Whensettofalse,theelementusedtotoggleuniformchartscalingonoroffisnotdisplayed.
ConstructorsPropertiesMethodsTypedefinitionsShowtableofcontentsConstructorsPropertiesMethodsTypedefinitionsWasthispagehelpful?YesNoWasthispagehelpful?YesNoYourbrowserisnolongersupported.Pleaseupgradeyourbrowserforthebestexperience.Seeourbrowserdeprecationpostformoredetails.
