ElevationProfile Widget | ArcGIS API for JavaScript 4.18

The ElevationProfile widget is used to generate and display an elevation profile from an input path. In this sample the input path is interactively created ... Youareusingabrowserthatisnolongersupported.PleaseusethelatestversionofGoogleChrome,MozillaFirefox,AppleSafari,orMicrosoftEdge.FormoreinformationpleaseseetheSystemRequirements.JavaScriptAPI4.18SampleCodeJavaScriptAPISampleCodeHomeGuideSampleCodeAPIReferenceShowcaseSupportMenuGetStartedFeaturedsamplesIntrotoMapView(2D)IntrotoSceneView(3D)IntrotolayersIntrotopopupsIntrotowidgetsLatestSamplesElevationProfilewidgetVisualizedataonMarsSceneLayerattributeediting(Editorwidget)Pointclustering-queryclustersHighlightfeaturewithdrop-shadowFeatureEffect-multipleeffectsFeatureEffect-drop-shadowSizevisualvariablethemesVectorTileLayer-updatestylelayersMappingandViewsLoadabasicwebmapSaveawebmapLoadabasicwebsceneSaveawebsceneWebscene-slidesCreatealocalsceneSceneView-goTo()ViewpaddingUsePortalBasemapsCreateacustombasemapSwapwebmapsinthesameviewSwitchviewfrom2Dto3DCompositeviewsCustombackgroundforSceneViewUndergroundnavigationinglobalmodeTakeascreenshotofaSceneViewLayersCreatelayerfromportalitemVectorTileLayerVectorTileLayerfromJSONVectorTileLayer-updatestylelayersIntegratedMeshLayerIntegratedMeshLayermodificationStreamLayerKMLLayerOGCFeatureLayerOpenStreetMapLayerWebTileLayerWMSLayerWMTSLayerSelectWMTSsublayerGeoJSONLayerGeoRSSLayerBuildingSceneLayerwithSlicewidgetFilterBuildingSceneLayerwithBuildingExplorerFeatureLayerIntrotoFeatureLayerCreatedfromarrayofgraphicsAddorremovegraphicsfromaFeatureLayerHighlightpointfeaturesLabelfeaturesusingArcadeexpressionsAddlabelstoaFeatureLayerMulti-linelabelsAddmultiplelabelclassestoalayerFilterfeaturesbyattributesApplyeffectstofeaturesBasicQueryingonFeatureLayerCreatedfromashapefileSceneLayerIntrotoSceneLayerFilterfeaturesbygeometrywithSceneLayerRealisticbuildingsColoringoptionsfortexturedbuildingsAddedgestoaSceneLayerPointgeometriesFilterandqueryQueryclient-side3DextentsSceneLayerView-querystatisticsbygeometryHighlightSceneLayerMapImageLayerIntrotoMapImageLayerTogglesublayervisibilitySetdefinitionexpressionsonsublayersSetrenderersonsublayersLabelsublayerfeaturesCreatedynamicmaplayersDynamicdatalayerwithtablejoinDynamicdatalayerwithquerytableMapImageLayer-ExploredatafromadynamicworkspaceDynamicdatalayerwithrasterdataCSVLayerIntrotoCSVLayerCSVLayer-ProjectpointsontheflyImageryLayerIntrotoImageryLayerIntrotoImageryTileLayerIntrotoWCSLayerClientsidepixelfilterServersiderasterfunctionClientsiderenderingrulesImageryTileLayer-shadedreliefrendererVisualizingwinddatawithVectorFieldRendererRasterattributetableClient-sidechartforImageryLayerImagecoordinatesystemPointCloudLayerIntrotoPointCloudLayerTogglevisualizationsChangepointsizeanddensityIntensitycolormodulationFilterpointsinaPointCloudLayerCustomLayersCustomTileLayerCustomDynamicLayerCustomLERCLayerCustomBlendLayerCustomElevationLayer-ExaggeratingelevationCustomElevationLayer-ThematicdataaselevationCustomWebGLlayerviewsAnimatedlineswithWebGLTessellationhelpersforcustomWebGLlayerviewsTilingsupportforcustomWebGLlayerviewsMaskingeffectusingacustomlayerviewBuildacustomlayerviewusingdeck.glQueryFeatureLayerView-queryQueryattachmentsQueryrelatedfeaturesQuerystatisticsclient-sidebydistanceQuerystatisticsclient-sideHighlightfeaturesbygeometryQueryfeaturesfromaFeatureLayerFeatureLayerView-querystatisticsbygeometrySceneLayerView-querystatisticsbygeometryEditingEditfeatureswiththeEditorwidgetEditfeaturesin3DwiththeEditorwidgetSceneLayerattributeediting(Editorwidget)EditorwidgetwithconfigurationsFeatureTablewitheditingenabledFeatureLayerapplyEditsUpdateFeatureAttributesAdvancedattributeeditingPopupwitheditactionDrawSketchwidgetSketchupdatevalidationDrawnon-intersectinglineImportglTF3DmodelsSketchin3DVisualeffectsIntrotolayerblendingMultiplyblendModeCompositeblendingHighlightfeaturewitheffectsandblendingHighlightfeaturewithdrop-shadowFeatureLayerView-querystatisticsbygeometryHighlightfeaturesbygeometryApplyeffectstofeaturesFeatureEffect-multipleeffectsFeatureEffect-drop-shadowAnimatecolorvisualvariableAnimatelayervieweffectVisualizationSymbolPlaygroundVarypointsizesbyscaleVisualizefeaturesbyuniquetypesVisualizedatawithclassbreaksVisualizedatawithdictionaryrendererSizevisualvariablethemesGeneratedata-drivencontinuouscolorvisualizationGeneratedata-drivenvisualizationofuniquevaluesGeneratecontinuouscolorvisualizationfor3DbuildingsGenerateaclassbreaksvisualizationGeneratearelationshipvisualizationGenerateapredominancevisualizationGenerateadotdensityvisualizationData-drivencontinuouscolorData-drivencontinuoussizeDotdensityVisualizepointswithaheatmapCreateascale-dependentvisualizationWurmandotsData-drivenextrusionMultivariatevisualizations(3D)MultivariatedataexplorationExtrudebuildingsfootprintsbasedonrealworldheightsCreateacustomvisualizationusingArcadeCIMSymbolCIMSymbollinesandpolygonsArrowsalongalineWebStyleSymbol(2D)Visualizefeaturelayerwithproportionally-sizedWebStyleSymbols(2D)VisualizefeatureswithrealisticWebStyleSymbolsRealisticwatervisualizationin3DPathvisualizationin3DPointstylesforcitiesUsingcalloutlineswithlabelsUrbanvisualizationswithpolygonpatternsAnimatecolorvisualvariableUpdatelegendtextUpdatearenderer'sattributeCustomizeColorSliderHistogramClient-sideprojectionClusteringPointclustering-basicconfigurationPointclustering-generatesuggestedconfigurationPointclustering-queryclustersPointclustering-advancedconfigurationPointclusteringwithvisualvariablesPopupsIntrotoPopupTemplateDockpopuppositionsMultiplepopupelementsCustompopupcontentReferenceArcadeexpressionsinPopupTemplateSummarizeintersectingpointsinapopupPopupTemplatewithfunctionsPopupTemplatewithpromisePopupwithDOMnodePopupactionsCustompopupactionsperfeaturePopupwitheditactionFeatureTablewidgetwithpopupinteractionGraphicsIntrotographicsAddgraphicstoaSceneViewWorkingwith3DmeshprimitivesLowpolyterrainusingmeshgeometrySearchingSearchwidgetSearchwidgetwithmultiplesourcesSearchwidgetwithcustomsourceQueryTaskFindTaskIdentifyTaskTimeTimeSliderwidgetFilterfeatureswithTimeSliderTimeSliderwithtimeOffsetTime-basedlayerAnalysisGeometryEngine-geodesicbuffersGeoprocessing-viewshedanalysisGeoprocessing-hotspotanalysisRouteTaskQueryElevation(points)QueryElevation(lines)WidgetsBasemapGallerywidgetBookmarkswidgetCoordinateConversionwidgetCoordinateConversionwidget-customformatsDaylightwidgetDirectionswidgetElevationProfilewidgetFeatureTablewidgetFeatureTablewidgetwithamapFeatureTablewitheditingenabledFeatureTablewidgetwithpopupinteractionIntrotoHistogramwidgetHistogramRangeSliderLayerListwidgetLayerListwidgetwithactionsLegendwidgetAddaLegendtoLayerListLegendwidgetcardstyleLineofsightwidgetLocatebuttonMeasurementwidgetMeasurementin2DMeasurementin3DBuildingSceneLayerwithSlicewidgetPrintwidgetSwipewidgetSwipewidgetwithscrollTableListwidgetTrackcurrentlocationTrackwidgetsimulationTimeSliderwidgetTimeSliderwithtimeOffsetExpandwidgetFeaturewidgetFeaturewidgetinasidepanelFeaturewidget-QuerygraphicsfrommultiplelayerViewsUsingtheview'sUIResponsivewidgetsResponsiveappsusingCSSWidgets(Advanced)CreateacustomwidgetCustomRecenterwidgetUsingwidgetswithReactCustomwidgetswithVueMore3DTogglegroundelevationSceneView-shadowandlightingSceneView-hitTestElevationoptionsElevationLayerVisualizedataonMarsSatellitesin3DviewSceneViewmemoryresourcesOtherAnimatelayervisibilityRequestdatafromaremoteserverAccessArcGISOnlineitemsviaOAuthChainingpromisesAccessfeatureswithpointereventsSynchronizeMapViewandSceneViewUsingEsriIconFontsWatchforchangesEventexplorer/watchpropertiesZoomtoextentoffeaturesDraganddropportalitemsDisableviewnavigationDisablerotationontheviewDisablemouse-wheelBacktoTopFeaturedsamplesIntrotoMapView(2D)IntrotoSceneView(3D)IntrotolayersIntrotopopupsIntrotowidgetsElevationProfilewidgetVisualizedataonMarsSceneLayerattributeediting(Editorwidget)Pointclustering-queryclustersHighlightfeaturewithdrop-shadowFeatureEffect-multipleeffectsFeatureEffect-drop-shadowSizevisualvariablethemesVectorTileLayer-updatestylelayersLoadabasicwebmapSaveawebmapLoadabasicwebsceneSaveawebsceneWebscene-slidesCreatealocalsceneSceneView-goTo()ViewpaddingUsePortalBasemapsCreateacustombasemapSwapwebmapsinthesameviewSwitchviewfrom2Dto3DCompositeviewsCustombackgroundforSceneViewUndergroundnavigationinglobalmodeTakeascreenshotofaSceneViewCreatelayerfromportalitemVectorTileLayerVectorTileLayerfromJSONVectorTileLayer-updatestylelayersIntegratedMeshLayerIntegratedMeshLayermodificationStreamLayerKMLLayerOGCFeatureLayerOpenStreetMapLayerWebTileLayerWMSLayerWMTSLayerSelectWMTSsublayerGeoJSONLayerGeoRSSLayerBuildingSceneLayerwithSlicewidgetFilterBuildingSceneLayerwithBuildingExplorerIntrotoFeatureLayerCreatedfromarrayofgraphicsAddorremovegraphicsfromaFeatureLayerHighlightpointfeaturesLabelfeaturesusingArcadeexpressionsAddlabelstoaFeatureLayerMulti-linelabelsAddmultiplelabelclassestoalayerFilterfeaturesbyattributesApplyeffectstofeaturesBasicQueryingonFeatureLayerCreatedfromashapefileIntrotoSceneLayerFilterfeaturesbygeometrywithSceneLayerRealisticbuildingsColoringoptionsfortexturedbuildingsAddedgestoaSceneLayerPointgeometriesFilterandqueryQueryclient-side3DextentsSceneLayerView-querystatisticsbygeometryHighlightSceneLayerIntrotoMapImageLayerTogglesublayervisibilitySetdefinitionexpressionsonsublayersSetrenderersonsublayersLabelsublayerfeaturesCreatedynamicmaplayersDynamicdatalayerwithtablejoinDynamicdatalayerwithquerytableMapImageLayer-ExploredatafromadynamicworkspaceDynamicdatalayerwithrasterdataIntrotoCSVLayerCSVLayer-ProjectpointsontheflyIntrotoImageryLayerIntrotoImageryTileLayerIntrotoWCSLayerClientsidepixelfilterServersiderasterfunctionClientsiderenderingrulesImageryTileLayer-shadedreliefrendererVisualizingwinddatawithVectorFieldRendererRasterattributetableClient-sidechartforImageryLayerImagecoordinatesystemIntrotoPointCloudLayerTogglevisualizationsChangepointsizeanddensityIntensitycolormodulationFilterpointsinaPointCloudLayerCustomTileLayerCustomDynamicLayerCustomLERCLayerCustomBlendLayerCustomElevationLayer-ExaggeratingelevationCustomElevationLayer-ThematicdataaselevationCustomWebGLlayerviewsAnimatedlineswithWebGLTessellationhelpersforcustomWebGLlayerviewsTilingsupportforcustomWebGLlayerviewsMaskingeffectusingacustomlayerviewBuildacustomlayerviewusingdeck.glFeatureLayerView-queryQueryattachmentsQueryrelatedfeaturesQuerystatisticsclient-sidebydistanceQuerystatisticsclient-sideHighlightfeaturesbygeometryQueryfeaturesfromaFeatureLayerFeatureLayerView-querystatisticsbygeometrySceneLayerView-querystatisticsbygeometryEditfeatureswiththeEditorwidgetEditfeaturesin3DwiththeEditorwidgetSceneLayerattributeediting(Editorwidget)EditorwidgetwithconfigurationsFeatureTablewitheditingenabledFeatureLayerapplyEditsUpdateFeatureAttributesAdvancedattributeeditingPopupwitheditactionSketchwidgetSketchupdatevalidationDrawnon-intersectinglineImportglTF3DmodelsSketchin3DIntrotolayerblendingMultiplyblendModeCompositeblendingHighlightfeaturewitheffectsandblendingHighlightfeaturewithdrop-shadowFeatureLayerView-querystatisticsbygeometryHighlightfeaturesbygeometryApplyeffectstofeaturesFeatureEffect-multipleeffectsFeatureEffect-drop-shadowAnimatecolorvisualvariableAnimatelayervieweffectSymbolPlaygroundVarypointsizesbyscaleVisualizefeaturesbyuniquetypesVisualizedatawithclassbreaksVisualizedatawithdictionaryrendererSizevisualvariablethemesGeneratedata-drivencontinuouscolorvisualizationGeneratedata-drivenvisualizationofuniquevaluesGeneratecontinuouscolorvisualizationfor3DbuildingsGenerateaclassbreaksvisualizationGeneratearelationshipvisualizationGenerateapredominancevisualizationGenerateadotdensityvisualizationData-drivencontinuouscolorData-drivencontinuoussizeDotdensityVisualizepointswithaheatmapCreateascale-dependentvisualizationWurmandotsData-drivenextrusionMultivariatevisualizations(3D)MultivariatedataexplorationExtrudebuildingsfootprintsbasedonrealworldheightsCreateacustomvisualizationusingArcadeCIMSymbolCIMSymbollinesandpolygonsArrowsalongalineWebStyleSymbol(2D)Visualizefeaturelayerwithproportionally-sizedWebStyleSymbols(2D)VisualizefeatureswithrealisticWebStyleSymbolsRealisticwatervisualizationin3DPathvisualizationin3DPointstylesforcitiesUsingcalloutlineswithlabelsUrbanvisualizationswithpolygonpatternsAnimatecolorvisualvariableUpdatelegendtextUpdatearenderer'sattributeCustomizeColorSliderHistogramClient-sideprojectionPointclustering-basicconfigurationPointclustering-generatesuggestedconfigurationPointclustering-queryclustersPointclustering-advancedconfigurationPointclusteringwithvisualvariablesIntrotoPopupTemplateDockpopuppositionsMultiplepopupelementsCustompopupcontentReferenceArcadeexpressionsinPopupTemplateSummarizeintersectingpointsinapopupPopupTemplatewithfunctionsPopupTemplatewithpromisePopupwithDOMnodePopupactionsCustompopupactionsperfeaturePopupwitheditactionFeatureTablewidgetwithpopupinteractionIntrotographicsAddgraphicstoaSceneViewWorkingwith3DmeshprimitivesLowpolyterrainusingmeshgeometrySearchwidgetSearchwidgetwithmultiplesourcesSearchwidgetwithcustomsourceQueryTaskFindTaskIdentifyTaskTimeSliderwidgetFilterfeatureswithTimeSliderTimeSliderwithtimeOffsetTime-basedlayerGeometryEngine-geodesicbuffersGeoprocessing-viewshedanalysisGeoprocessing-hotspotanalysisRouteTaskQueryElevation(points)QueryElevation(lines)BasemapGallerywidgetBookmarkswidgetCoordinateConversionwidgetCoordinateConversionwidget-customformatsDaylightwidgetDirectionswidgetElevationProfilewidgetFeatureTablewidgetFeatureTablewidgetwithamapFeatureTablewitheditingenabledFeatureTablewidgetwithpopupinteractionIntrotoHistogramwidgetHistogramRangeSliderLayerListwidgetLayerListwidgetwithactionsLegendwidgetAddaLegendtoLayerListLegendwidgetcardstyleLineofsightwidgetLocatebuttonMeasurementwidgetMeasurementin2DMeasurementin3DBuildingSceneLayerwithSlicewidgetPrintwidgetSwipewidgetSwipewidgetwithscrollTableListwidgetTrackcurrentlocationTrackwidgetsimulationTimeSliderwidgetTimeSliderwithtimeOffsetExpandwidgetFeaturewidgetFeaturewidgetinasidepanelFeaturewidget-QuerygraphicsfrommultiplelayerViewsUsingtheview'sUIResponsivewidgetsResponsiveappsusingCSSCreateacustomwidgetCustomRecenterwidgetUsingwidgetswithReactCustomwidgetswithVueTogglegroundelevationSceneView-shadowandlightingSceneView-hitTestElevationoptionsElevationLayerVisualizedataonMarsSatellitesin3DviewSceneViewmemoryresourcesAnimatelayervisibilityRequestdatafromaremoteserverAccessArcGISOnlineitemsviaOAuthChainingpromisesAccessfeatureswithpointereventsSynchronizeMapViewandSceneViewUsingEsriIconFontsWatchforchangesEventexplorer/watchpropertiesZoomtoextentoffeaturesDraganddropportalitemsDisableviewnavigationDisablerotationontheviewDisablemouse-wheelUnsupportedbrowserYouareusingabrowserthatisnotsupported.JavaScriptAPIworksonthelatestversionsofGoogleChrome,MozillaFirefox,AppleSafari,orMicrosoftEdge.UseoneofthesebrowsersandprovideyourfeedbackthroughGeoNet,theEsriCommunity.Loading...Note:Supportfor3Donmobiledevicesmayvary,viewthesystemrequirementsformoreinformation.DownloadExploreinthesandboxOpeninCodePenViewliveTheElevationProfilewidgetisusedtogenerateanddisplayanelevationprofilefromaninputpath.Inthissampletheinputpathisinteractivelycreatedbydrawingasingle-ormulti-segmentline.Thewidgethasitsprofilesconfiguredsuchthatitdisplaytwoelevationprofilelines,oneforground,oneforthebuildings.letelevationProfile=newElevationProfile({ view:view, profiles:[{ type:"ground"//firstprofilelinesamplesthegroundelevation },{ type:"view"//secondprofilelinesamplestheviewandshowsbuildingprofiles }] }); FormoreusageandconfigurationoptionsseeElevationProfileintheAPIReference.Tags3DelevationprofileSceneView4.18SamplesearchresultsTitleSampleLoading...Feedbackonthistopic?KeyboardshortcutsSitewideshortcuts?BringupthishelpdialogescDismissthishelpdialogghGotoHomeggGotoGuidegaGotoAPIReferencegsGotoSampleCodegtScrolltotopofpagespacebarScrollpagedownshiftspacebarScrollpageupgbScrolltobottomofpageSampleCode/FocussearchescRemovesearchfocusenterFocusfirstsearchresultesExploreintheSandboxsShareinonlinecodeeditorvlViewliveexample