Elevation Profile Widget Version 2.17 - 9/19/2020

03-02-2015 06:56 PM
Labels (1)

Elevation Profile Widget Version 2.17 - 9/19/2020

Live Preview Site   

Web AppBuilder for ArcGIS | Help - Elevation Profile Widget

List of the latest enhancements and changes:

  1. Updated to WAB 2.17
  2. Fixed issue with using this widget in Tab Theme. Profile hiding the close button on the sidebar controller.
  3. Now when used in the Jewlerybox and tab theme it will open those controllers automatically.

Older enhancements or changes

  1. Added ability to select existing line features to profile.
  2. Added ability to choose which segment of the selected polyline to profile.
  3. Added setting to control elevation decimal precision.
  4. Fixed Issue with resizing widget and profile getting cut off.
  5. Moved all widget links to a widget menu instead.
  6. Added the ability to export Profile data to CSV file.
  7. Added the ability to flip the profiles direction of travel.
  8. Added support for doing profiles when basemap is not Web Mercator
  9. Added the ability to export the profile chart as an image (if you are not using Internet Explorer and your browser supports HTML5 Canvas).
  10. Added fix for Launchpad Theme UI issues


  • This is a port over of the Elevation Profile Template.
  • Some modifications have been done to prevent chart indicator text clipping
  • The chart display features like color, font size, etc are all configurable in the widget settings UI
  • Some validation is done on the profile task service url.
  • Full help documentation is provided for configuring and using the widget.



Labels (1)


The widget works perfectly, but how do I resize the Profile widget window?  I added the widget to the Header Controller of the foldable theme, and the profile window is a long, thin window along the right side, and I can't find a way to resize it.


Perhaps I must add the widget not to the header controller but to the other group of widgets at upper left?

Best regards,


Edit:  Yes, that does it.  If added to other group of widgets, the window is resizable. 


The widget is more designed to be one of the 123 on screen widgets (the ones under the geocoder, that you have filled already). I will have to add some code in the next version to handle having it in a panel like that.

Sounds great, Robert.  None of the windows of the widgets I add to header controller at upper right are resizable, which has to do with the foldable theme, I assume.



   Another temporary solution is to make a widget group. When you add widgets to the header controller you can drag and drop the widgets on top of each other in the "Set widgets managed by Header Controller" dialog. this will stack two or more widget in a panel. Let me know if I did not explain this well enough.


I know exactly what you mean.  I didn't have to do that, I just rearranged my widgets.  I think I have a good, intuitive result:

ArcGIS Web Application

It is using the LocalLayer, Elevation Profile, Street View, and ID widgets, without which the app would be useless.  Please let me know if you have any comments or suggestions.

Best regards,



Thank you for your work on this widget!

I was wondering if you were planning to make it like the original elevationprofile in which a person could select an existing line?

Thank you!


   I had not planned to unless people asked for this (like you are right now). I will add this to the enhancement request list.


you did a great job on this. Thanks. I guess it does not work with the ElevationsSOE interface for AGS 10.1? Because the DEM data from AGOL is to imprecise in europe for our purposes.

What do you think of a print button in the widget?




I am getting a "create widget error" when I start the Elevation Profile (1.1) widget in an app created in WAB Dev 1.0 which was imported into WAB Dev 1.1.  As I wrote in the post in the LocalLayer widget thread, I did not manually import the widget, as it was auto-imported when I imported the zipped app.  Any ideas?





   Yep it looks like 1.1 broke my widget you will have to wait for me to put out a 1.1.1 version of the widget.

Ok, thanks, Robert!




Good job on 1.1.1!!!! 

Cheers, and thanks,


Nice update, Robert!

I had noticed the "problem" of the measuring tool still being active when widget is closed.  Workaround was to reopen widget and unclick the measure tool.  But the workaround was not obvious to new users, who became confused.  Your new version works perfectly, and is more user friendly! 




thanks for your updates. I published my own profile service with AGS 10.1. It's available here: Geoprocessing/ElevationProfile (GPServer)​. Parameter are identical to the original esri elevation service, but when I change Profile Task URL to my own profile service, it says "Invalid Task Url". Though I can hit the OK-Button afterwards, but when I open the setting page the old Profile Task Url is in the textbox.

So could you give me hint, where the service URL is checked in Settings.js or maybe why my service isn't valid?




   It seems I have a bug in the UI. You can manually add the url to the config. Find the config file here:

\server\apps\###\configs\ElevationProfile\config_Elevation Profile.json

When you open the json file in a text editor just replace the profileTaskUrl property.

Hi barnaby

I have portal for arcgis and have made an webmap application on which a shapefile is published, I just went through the geonet forum and went through the Post, Elevation Profile. I have downloaded the Elevation Profile.zip folder but not getting how to Use it.

Can u Provide me the Steps for doing the same. As me new to this.

that will be an great help for me.


esri inc,

  What part of the widgets operation are you not sure about? Have you looks at the widgets help documentation that has a section about how to use the widget? Web AppBuilder for ArcGIS | Help - Elevation Profile Widget

thanks for the reply , mine question is when I downloaded the elevation profile zip. Where to paste it so the I can see the profile icon on mibe web map. What is the exact location where it is needed to be placed in portal. As me new to this that's y asking you.

I need the steps from download ,where to place that downloaded zip folder .

Thanks in advance

esri inc,

   Custom widgets are not supported in Portals version of Web AppBuilder. But if you really meant Web AppBuilder Developer version then her are the instructions for installing a custom widget.

unzip the widget contents and copy the widgets folder over to your \client\stemapp\widgets folder then when you create a new app the new custom widget will be available in the widget list.

If you are experienced in editing json files then you can add it to an existing app by following these steps:

  1. Copy the widgets folder to the \server\apps\###\widgets folder
  2. Copy the config.json file from the widgets folder.
  3. Add a new folder under \server\apps\###\configs called "Widets Name" and paste the config.json there.
  4. Open the config.json file in the \server\apps\###\ and add to the widgetPool > panel > widgets array


        "name": "CUstomWidget",

        "label": "Custom Widgets",

        "version": "1.1.2",

        "uri": "widgets/CustomWidget/Widget",

        "config": "configs/CustomWidget/config_CustomWidget.json",

        "index": 5,

        "id": "widgets/CustomWidget/Widget_19"


Note: the index and the number at the end of the id both need to be a unique number that is not already used in the other widgets.

Thanks for the reply.

There are only few widgets in web app builder for portal for arcgis are there any more widgets which we can download and use in our application .such as elevation etc.

check out Web AppBuilder Developer Edition – Customization Resource List    for a list of custom widgets and resources from the GeoNet community.  Lots of links, but you will have to go thru the list of links to determine what you want to use.  Instructions to download and install are on the various pages, not in the list, so follow up questions should be directed to each, not the list or on this thread.

Thx for your reply. I altered the URL in config.json, but it didn't work. The default URL is still used instead.

But I solved the problem by hardcoding the profileTaskUrl property in Widget.js and now the widget is able to use other terrain data, than provided by ESRI!


Hi Robert , Thanks for your excellent Widget.

Want to check with you do we have any option to customize the units in the elevation profile widget?

Like below.

Can we hide the Nautical miles from this list ?

Hi Robert ,

We see an issue with the Re-sizing options in the elevation widget when you draw on the map and get the chart in another tab , Please navigate to you tab 1 and try to resize the Panel and this will disappear the chart once you navigate to Tab 2 and if you resize in the Tab 2 , you will get the chart back in place,

Can you please look into this issue and probably help us in understanding the re-sizing code used in the elevation Profiles to implement in the other widgets too.


   I use the JS API Measurement Dijit for that part and I don't see anything that allows you to remove units.

The resizing issue is addressed in v1.2 hopefully available today.

Thanks for getting all the widgets updated to 1.2! Your work is greatly appreciated!

Hi Robert,

New widget version works perfectly with WD 1.2.  Many thanks!

Three down, one (big one) to go for fully working apps in 1.2.  Waiting for the new version of the LocalLayer widget...   Hopefully Adam (and yourself) can get it to go in 1.2, as the Layer List widget shows the service directory name rather than the layer (service) names.

Robert Scheitlin, GISP​ amazing. The information and visualization this gives is just fun to look at. but also highly useful for local planning. This is why we like geography.

Suggestion:  As you move along the profile, it displays the elevation. It would also be handy to display the lat/long under it. So casual users could easily locate the peaks or valleys.  Now, since it moves as soon as you move the mouse, it may also be useful to freeze the cursor if you click profile graphic or another area. In other words, a click handler that pauses whatever function is updating the profile. That way a user can find a peak, then copy and paste out its elevation and coordinates. What do you think?

On one of my next sites, I am going to create our own elevation profile service from our lidar DEM and then reference this widget to it. Looking forward to seeing this work with our hi-res elevation data!

This is an awesome widget but I have a couple questions and I'm wondering if anyone can help.

Is there a way that I can reference 3 different DEM's in the python code that all have the same resolution, for example 3 DEM's at 5 meters for 3 different sites, for example A, B and C? I'm finding that the first layer will load correctly, but the next two have some loading of display issues. I tried to key the dictionary to something like "5m":["5A, 5B, 5C"] to differentiate between the 3 different area's but it doesn't seem to work and I'm wondering if its even theoretically possible to do so. I know in the word doc write up for how to setup a service using your own data it says that each resolution needs to be it's own DEM dataset, so I'm interpreting that to mean that all the 5 m layers need to be merged into one larger raster?

The other thing I was curious about is if it was possible to use both my organization's elevation data/service and the esri elevation service? Like depending on where the line is drawn and what data is available, it will flip between the 2 services.

Hi Robert

I am experimenting with your widget and I have noticed that the measurement distance unit select box is out of alignment with the measure icon. This is the same in IE and FireFox

Great widget, Got it working straight away with my own elevation service created using the help from this blog:





   What theme are you using? That image seems off on many levels.

I am using the Launchpad theme, with the widget being opened from an on screen widget. Not sure if you can replicate the issue.

I am also noticing errors for a missing common.css within the configuration of the widget, there is a import statement in the style.css but no corresponding file:

@import url("../../common.css");


  OK, I do see the issue when using the Launhpad Theme. It seems that they (esri) has done some css work in the launchpad theme to change the APIs measurement dijit look. I will have to add my own css rules to fix the look for my widget only using the Distance tool of the Measure Dijit. Thanks for the heads up.


   I am not seeing that import in the 1.3 version...

Here the additions to make to the widgets style.css to fix the display issue for the Launhpad theme

.LaunchpadTheme .esriMeasurement .esriButton + .esriButton .dijitButtonNode {

  border: 1px solid #DDD  !important;


.LaunchpadTheme .esriMeasurement:first-child .dijitButtonNode {

  border-radius: 2px  !important;


.LaunchpadTheme .esriMeasurement .esriMeasurementSeparator {

  display: inline-block !important;


.LaunchpadTheme .esriMeasurement .esriToggleButton {

  display: inline-block !important;


.LaunchpadTheme .esriMeasurement {

  top: 36px !important;


Hi Robert,

Thanks for the quick response I have added the styles above to the widgets style.css and it has not made any difference.

The @import url("../../common.css"); statement is in the download at the top of this page which I presume is the latest version

Ok I have tried your amendments against the raw download of V1.3 and they have worked, I must have something else going on.

Still missing the text though:

"Use the Measure tool to draw a line on the map that you want to see the elevation profile for."


Hmm.. I see that import line in the Settings\css\style.css file (which needs to be deleted). The style.css file that you need to be adding the new css rules to is in the css folder that is under the root of the widgets folder.


  OK, I edited my reply with the css rules to fix the obscured text too.

Yep got that Robert, I wasn't trying to edit the css in the setting folder, we where just fixing two different issues at the same time

Hi Robert!

Thanks for this great widget!

Are you planing to implement an option for selecting a feature instead of using the measure tool?

Or could you give me a hint to do it myself? I'm a beginner but have some knowledge

Thanks again!!


   No I have no plans to support selecting a feature. The best advice I can give is to look as the JS API sample for the profile widget where this code originated from as it allows for selecting existing features in the map.

Hi Robert,
Awesome widget
Is there a way to set the default units to Metric?
I'm happy to go in through the code to set the default, but can't seem to find where to adjust what the default units are.



   In the Widgets configuration UI click on the Edit Chart Display Properties Link at the botom of the dialog and switch the measure units to metric.

Hi Robert, thanks for getting in touch. This is all I have showing in the Widget Configuration


   Look like you need to download and install the latest version then.


Does the elevation profile sample data from a published DEM service, or only Esri's elevation service?



Adam, it will use a published any published service. There is a blog you can use on ESRIs website to learn how to publish your own elevation data as a service.

Hi Robert,

Any I am looking for said blog and have only come across the following​. We have a DEM image service published but draw the image cache dynamically from the service and this does not seem to work in the widget. Could you post the blog you referred to.

Much appreciated.


This is the blog I was referring to Setting up your own Profile Service | ArcGIS Blog

Version history
Revision #:
1 of 1
Last update:
‎03-02-2015 06:56 PM
Updated by: