How to use Elevation profile in Appstudio

613
6
06-01-2022 02:42 AM
Felix10546
New Contributor III

I see from https://www.esri.com/arcgis-blog/products/appstudio/announcements/whats-new-in-arcgis-appstudio-vers...

that

  • Map Viewer – Elevation profile support for polyline features

and from 

https://learn.arcgis.com/en/projects/configure-apps-for-hikers/

that a trails can have elevation profile.

---------------------------------------------------------------------------------------------------

However, in my case, I created some trails and published it. I also made a webmap and nearby webapp from it.

Then I try to build a mapview app and nearby app from Appstudio.

It fails to load the elevation. What steps should I take to make it works?

Felix10546_0-1654076418813.png

P.S. I can use the profile GP to generate elevation polyline and chart in ArcGIS Pro.

Thank for helping.

 

0 Kudos
6 Replies
TrevorFrame
Esri Contributor

Hi @Felix10546,

You should be able to follow that lesson you provided and it would work with both Map Viewer and Nearby apps. Can you share the nearby app and web map id's you are using? 

Best,

Trevor

0 Kudos
Felix10546
New Contributor III

Hi TrevorFrame, when I went through the lesson, there is no problem with webmap created by the instructor.

However, when I replace the webmap by my own. The elevation profile fails to show up.

my feature layer: item.html?id=a7a1af264013488185fb8c8989c1a070          (Feature Layer, public)

my webmap layer: item.html?id=db8454b1073b44cb947e9e2edd42acb1   (Service Definition, public)

my nearby webapp: appid=bff20cdf1ff14eb181da1f6d09098d11                (Instant App - Nearby, public)

[I can view the elevation profile in webapp, just cannot view it in app made by appstudio]

my appstudio app: item.html?id=5191bc5a63a142c8ba528c2ab9911220       ( Native Application, public)

=============================

Thank Trevor for your active assistance. I shared the app as public. I don't know whether you can download the app since I cannot see a download button in arcgis online. Please contact me if you cannot view it. 

Felix10546_0-1654136112385.png

 

0 Kudos
TrevorFrame
Esri Contributor

@Felix10546 thank you for providing the app and web ids. After looking into this closely, it looks like the issue is from your feature geometry has m values that are being set to null. You can console log the paramObj in the fetchSummary() to see. 

console.log(`params ${JSON.stringify(paramObj)}`)

Not entirely sure how they are being set to null in the first place, but I would recommend to ensure you have some default value set like 0 when you create the polyline. 

Felix10546
New Contributor III

Hi Trevor, I am not unsure how to do that. Is the cmd typed in F12 console in a web-browser or elsewhere?

1. I tried In web browser, what paramObj should I defined in order to view the parameter? 

Felix10546_1-1654479691553.png

2. Is there any console for debugging in Qt editor that allow us to use that command?

 

 

0 Kudos
TrevorFrame
Esri Contributor

Hi @Felix10546,

Good news, we found a way you can actually remove the z and m values using Runtime's GeometryEngine, that way if there are any null values, the elevation profile will still work. 

To do this, navigate to the ElevationProfileView.qml file inside /Nearby/views folder. Around line 761 is a function drawElevationChart(). Around line 812 you can add a line with using GeometryEngine to remove Z and M. And then use that new geometry object for the inputLineFeatures. See the code snippet below.

let inputLineFeatures = {fields: [{name: "OID", type: "esriFieldTypeObjectID", alias: "OID"}],
                geometryType: "esriGeometryPolyline", attributes: {OID: 1}, sr: {wkid: 102100, latestWkid: 3857}}
let geometryWithoutZ = GeometryEngine.removeZAndM(feature.geometry)
inputLineFeatures.features = [{geometry: geometryWithoutZ.json}]

 

As for the console.log() statement as stated above, it would go inside your QML code using the Qt Creator editor. You would have to navigate to the /Nearby/views/ElevationProfileView.qml folder, then around line 839 is the fetchSummary() function. You can add the console.log() statement anywhere under the variable declaration of var paramObj around line 849 ( I added mine just below it). Check the screenshot below for a visual of it. You can see the console logs out in the "Application Output" tab which is at the very bottom of the window. Screen Shot 2022-06-14 at 8.36.54 AM.png

 

0 Kudos
Felix10546
New Contributor III

Thank TrevorFrame for your help with screencap, I am busy last week. I will try and replay as soon as next working day.

0 Kudos