Elevations Profile Template

[MathewSuran]

Can anyone help me pull the Elevations Profile Charting function from the template so I can utilize its function in our own custom js web app?  I can't seem to get it to work.  Also, I need to be able to edit where the chart pulls the x,y data.  Right now it accesses the Profile geoprocessing service (http://www.arcgis.com/home/item.html?id=3300cfc33ca74a9fac69d2e0f4ea46e5) (per the read me file in the zip).  I need it to access our own elevation data in a gdb we are hosting on our server.  If there is an easier way to incorporate that chart functionality, I am open to suggestions.  Thanks in advance!

Mat

[JohnGrayson]

Matt,

     there are two issues you want to address: 1) using your own elevation data, and 2) using the charting component of the dijit in other js web apps.  For the first item you should check out this blog, it explains how to set up a service with your own data that the template can use:

Setting up your own Profile Service | ArcGIS Blog

    The second issue can be complicated depending on what you need.  Do you just want to reuse the entire dijit (Measure, Popup selection, calling GP service, unit conversions, charting, map interactions, etc...) or just the charting?  If you want to reuse the entire dijit, then it should be simple and I can help you with this.  If you want just the charting alone then it will be much more complicated and eventually it might not help you much since there are many other considerations to take into account before the data can be charted. 

[MathewSuran]

Thanks for the quick suggestion.  As you can see from my other post, I have a gdb relationship class that I want to be able to query and have the results be displayed in a popup and the elevation chart.  I assume I can just use the elevation and distance fields in the table that the chart uses.  I don't need to use any of the other functions of the dijit and don't need elevation data anywhere other than querying the features.  The chart is perfect for how I want to display the data.

[RiyasDeen]

Hi Mathew,

The elevation profile chart in the template is a dijit widget.

You can get this widget by extracting this folder elevation-profile-template/js/ElevationsProfile at master · Esri/elevation-profile-template · GitHub  from git hub and placing it in your js folder.

Call the widget in you application similar to how it's done in elevation-profile-template/main.js at master · Esri/elevation-profile-template · GitHub , below region which does the work.

Note: namespace application is resolved to js folder in elevation-profile-template/index.html at master · Esri/elevation-profile-template · GitHub

// ===========================================================================================//
// ELEVATIONS PROFILE PARAMETERS //
var profileParams = {
  map: this.map,
  profileTaskUrl: this.config.helperServices.elevationSync.url, // Place your GP task url here.
  scalebarUnits: this.config.scalebarUnits
};


// ELEVATIONS PROFILE //
var elevationsProfile = new ElevationsProfile(profileParams, dom.byId('profileChartNode'));
// SEND ERRORS TO THE CONSOLE //
elevationsProfile.on("error", console.warn);
// ENABLE/DISABLE MAP EVENTS WHEN USER IS DRAWING WITH MEASUREMENT DISTANCE TOOL //
elevationsProfile.on("measure-distance-checked", lang.hitch(this, function (evt) {
  if (evt.checked) {
  connect.disconnect(this.clickEventHandle);
  this.clickEventHandle = null;
  } else {
  this.clickEventHandle = connect.connect(this.map, "onClick", this.clickEventListener);
  }
}));
// STARTUP THE DIJIT //
elevationsProfile.startup();
// ===========================================================================================//

As long as your GP task response is similar to response mentioned here Profile—ArcGIS REST API: Elevation Analysis services | ArcGIS for Developers you should be good.

Hope this helps.

[RiyasDeen]

After thought

May be is this what you want?

Format Popup Content | Guide | ArcGIS API for JavaScript  (look for Template that references a related field and uses it in a chart: at the end)

[MathewSuran]

Sorry for the delayed response, but I just got around to looking into your suggestion.  In the Format Popup Content it states that you can define media content using mediaInfos[ ] property which, from what I gather, defines the type of chart used. 

Would you be able to suggest, if at all possible, how to use the elevation profile chart dijit within the mediaInfos property? 

I also want to add a query function, suggestions on adding that in as well?  The resource I think I need is Query related records | ArcGIS API for JavaScript . 

I know there is a lot of work I need to do to get this running correctly, so any suggestions would be appreciated.  I am going to start messing around with it tomorrow and see if I can get it working.

[RiyasDeen]

Hi Mathew,

I doubt you can use the elevation profile chart as mediaInfo property. The chart it self is embedded within the widget.

If the widget is exactly what you want, then consider my suggestion earlier. create a geoprocessing task with request and response similar to the elevation GP task used in the sample. Only the geprocessing task itself will perform a query on your relationship class and return the response as featureset with Z and M values.

As long as your GP task response is similar to response mentioned here Profile—ArcGIS REST API: Elevation Analysis services | ArcGIS for Developers you should be good.

Hope this helps.

[Nicole_Ueberschär]

Hi Riyas Deen, 

I was looking for the possibility to replace the elevation widget by rscheitlin‌ by the functionality of the elevation template and I think you are giving here the solution. Unfortunately I am not sure where to put what. Can you tell me which part (or the whole js folder?) of the js folder should go into my app's js folder? And where do I call it's functionality?

I am using WAB2.4 and know how to add widgets like the elevation widget or enhanced search widget but this looks a bit different. Thanks in advance!