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)

Pretty cool widget! Would there by chance be a configuration option to simultaneously show profiles (on the same chart) from multiple profile tasks?


   It is possible but not in the scope of this widget.

Good to know, and thank you so much for the response. I did post a question regarding this here. Do you have any recommendations for the approach to take to achieve this?

Thanks again, 


Sorry I do not. I have never looked into having multiple profiles in one chart.


I can not find help related about how implement this widget to my app. I need implementing this widget to app configured in WebApp Builder. I could install and register the app on AGO:

But I downloaded the widget and tried add this widget to my app but without sucess. The manner of add this widget, was copying to widget "elevation_profile" to "Widgets" folder of the application that was downloaded.

Then, I uploaded this app and cannot see the widget elevation profile:

Something I am doing wrong or one step I need to add the widget and be able to configure it. Could you help me?

Thank you in advance



  Did you add the ElevationProfile folder to your client\stemapp\widgets folder?

Thank you Robert. Great! I could add the widget to my app:

But if I want use this app on ArcGIS online or my Portal, I can't because the system don't consume the widget:

Bet regards!


Apps with custom widget can not be used on AGOL. If you are using on Premise Portal then yes you can use custom widgets.

Add custom widgets—Portal for ArcGIS | ArcGIS Enterprise 

This looks like a great widget. Unfortunately, the chart isn't visible after drawing a line. What could this be?


  Does the live preview site work for you?

It works in Chrome. Doesn't work with Edge.

This is great. I just won't use Edge.

Frank you could try the new Edge, it's based on Chrome (Chromium to be exact) so that may resolve that.  https://www.microsoftedgeinsider.com/en-us/download/

I'll try it next week. It's time to go home.

Can you add the option to select an existing feature and have it generate the profile instead of trying to duplicate or draw a line?

It is on my list for a future release. Just don't have time right now.

Michael WaldenRickey FiteAdam GuoFilipe EstevesNicole UeberschärJulian Inskip

All of you at some point in time have asked for the ability to select a existing line and profile it. Well Version 2.12.1 now has this ability. FYI

Awesome! Thanks Robert!

Hi, Robert!

first of all, thank you for sharing the release. And I wonder if you would mind sharing a few details or samples about these itens:

  • Added ability to select existing line features to profile.
  • Added ability to choose which segment of the selected polyline to profile.

Best regards!

Sure if your line feature has a pop up the in the pop up menu you will find a option to profile selected line.

Once you click profile selected line if the feature has more then one segment then a dialog will appear allowing you to select which segment to profile.

Outstanding work Robert! I'll add your widget to our state Coastal Hazard Viewer in the next update.

Again thank you! I have been used WAB 2.7 and I don't know know if that feature would work here. Let's check it out!


Robert, thank you for the quick turnaround on the profile widget.  We have implemented it on a few of our applications but noticed that the x-axis is not labeling the corresponding distance, only the y-axis or elevation is labeling.


   Thanks for letting me know. The fix is a simple css rule update. In the widgets css\style.css update this rule (line 4 added):

.widget-elevation-profileChartNode > svg {
  width: inherit !important;
  height: inherit !important;
  overflow: visible;

I added the 

overflow: visible;

and all is well.  Thanks again for the quick turnaround.

Another recommendation or request...

When you add the profile or pop-up panel widgets to the on screen widget section the widget windows are resize-able and move-able,  however when those widgets are added to the header controller they are pinned to the header controller and cannot be resized or moved.  Is there a configuration setting that can be added so that the application creator (me) can choose whether they want the widget to stay pinned to the header controller or open as a free floating window that can move and be resized no matter where I choose to put the widget within the application?  By default we are limited to 5 on screen widgets and therefore may be forced to add those widgets to the header controller which makes them less desirable by some.


  What you are talking about has nothing to do with my widget, it is a theme limitation. All widgets in the Header Controller widget are displayed in the panel that is not movable or sizable. There are several threads out there about how to add more on screen widget place holders to your app that you can search for though.

Perfect, thanks again Robert.

Hello and thank you for the elevation profile widget.  I've been experiencing a weird issue with it since upgrading to the latest edition of WAB.  I placed the widget folder in client\stemapp\widgets.  It appears in the widgets location in WAB and I can select and configure it.  When I attempt to save it however, the "save" selection does not appear; it remains in the "saved" condition.  If I back-arrow to the widgets home and return, the elevation profiler is gone.  

I'm stumped - Any guidance?

--TIA / Chris


  Do you see any errors in your browsers web console?

Hi Robert - 

I do, in fact:



   I am looking into this.

Robert - 

Very much appreciated... Thank you.


Hi Robert,

I have successfully added the Elevation Profile widget to the widget folder and the widget appears within webapp developer however I cannot insert it into my webapp. Upon selecting the widget I am able to view the configure screen but the ok button does not work. I am able to add it to the header controller however after saving it disappears. Any suggestions or help would be very much appreciated.



I have the same problem. I was thinking it might be because of versions used. The WebApp Builder is version 2.10 and the widget I downloaded from here is 2.13. 

Robert, if that is indeed the issue, is it possible to get the widget for version 2.10?

Thank you, Ana


  1. Are you using Portal WAB or WAB Developer edition?
  2. What version of WAB are you on?
  3. Do you see any errors in the browsers web console?


I don't think I have any thing in 2.13.1 version that is specific to WAB Version 2.13. I will have to do some testing. Do you see any errors in the browsers web console?


No errors displayed. The widget simply does not appear where it should. See the two screenshot attached (list of widgets set in the WAB and how displayed in the webmap). 

 Widget list in WABdisplay in the webmap

That blank space before the elevation Profile widget is a bit concerning. Can you start a brand new app and try and add the profile widget there?

In the brand new app I have the same issue as Andy, I can not even click OK to confirm the Widget. Any ideas what else I could try?


So in the brand new app when you click OK and it does nothing what error is shown in your browsers web developer tools (F12) web console?

This is what is shows in the console.

I've been having the same issue too. The widget shows up and I'm able to configure it, but the OK button is not working. I was having this issue with WAB Developer Edition 2.12, and it's still persisting now that I've upgraded to 2.13.

The following error appears in Chrome Developer Tools.


  OK I see the issue is that it can not find the label for the new feature action "Profile Selected Line..." I have yet to determine why this is working in my development app and not when adding the widget to a new app. I am looking into the issue though.

Thank you for replying so quickly.

I seem to have fixed the issue unintentionally. I simply changed themes and it started to work perfectly. 

I am in developer edition 2.13




What geoprocessors or tools are you running to produce the profile information pop-up?

Profile Information
Elevation Min: 313 Feet
Elevation Max: 321 Feet
Elevation Start: 316 Feet
Elevation End: 314 Feet
Elevation Change: -2 Feet
DEM Resolution: 10m


   All that info comes for the esri elevation service.

Hi There!

About of the implementation... is necessary that the engine of WAB 2.14 it permanent active (run) on the server where is installed? For example, this window:

As, if I close this, the app doesn't run. This question is just for validate and I be sure.

Thank in advance!



   That command window is need to run WAB Developer on your workstation (it is running NodeJS web server). Once you have your app configured how you want it you can download the app from WAB Developer and then deploy to your web server and then the command window that is running NodeJS is no longer needed. 


Have you had any luck figuring out the disabled OK button issue? Reading through the posts on this page, I'm looking at your Aug 12 post that mentioned it may because a new feature action label can't be found. I'm experiencing the error too and am on Dev Edition 2.12, using Chrome.

Also, in case it may be helpful, I have noticed the same thing sometimes happening with other widgets (out-of-the-box or other custom widgets). The error is very inconsistent, though. For example, the "Measurement" widget can be added successfully in one session but fails at the the "OK" button in a different session. This Elevation Profile widget fails for me at "OK" every time, though.



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