topic Able to click view for elevation in 4.2? in ArcGIS JavaScript Maps SDK Questions

Able to click view for elevation in 4.2?

DavidChrest — Tue, 24 Jan 2017 21:51:58 GMT

Is there a way to click the SceneView to capture the elevation info of the the default "world-elevation" layer ?

Getting coordinates can be done fairly easily (see code below) but can the same kind of thing be done to get an elevation reading when the user clicks on the SceneView? The ImageServiceIdentifyTask seems to be only for an added custom ElevationLayer and the documentation is a bit confusing.

//Click on View for coordinates to display
view.on("click", function (event) {
// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
var lon = Math.round(event.mapPoint.longitude * 1000) / 1000;
setTimeout(function () {
dom.byId("info").innerHTML = lat + ", " + lon;
}, 50);
});

Re: Able to click view for elevation in 4.2?

SteveCole — Tue, 24 Jan 2017 21:58:09 GMT

I'm not sure if ESRI provides this capability in a free service, like geocoding a single address. I ran into this while trying to build an app and ultimately decided to build a Google Maps based app because of this.

If your area of interest lies solely within the U.S., you can use the USGS Elevation Point Query Service to return an elevation given a lat/long. It works quite well (but I wanted to ensure worldwide coverage). I'd have to dig to find the code I did write to take advantage of this. You basically query it like a REST endpoint query (AJAX call, etc).

http://ned.usgs.gov/epqs/pqs.php?x=-120&y=47&units=Feet&output=json

Steve

Re: Able to click view for elevation in 4.2?

ReneRubalcava — Wed, 25 Jan 2017 01:37:42 GMT

In 4.2, we introduced the ElevationLayer Query API

ElevationLayer | API Reference | ArcGIS API for JavaScript 4.2

Query Elevation (Points) | ArcGIS API for JavaScript 4.2

I think that will do what you are looking for.

Re: Able to click view for elevation in 4.2?

DavidChrest — Sat, 11 Dec 2021 13:40:17 GMT

Rene,

Ok this is great! Thanks so much for pointing me in the right direction. Here is my code snippet for clicking on the SceneView and getting elevation to apear in text display in lower-right corner of map.

In Require([....

"esri/layers/FeatureLayer",
"dojo/promise/all",‍‍‍‍

Get that handy World Elevation Layer:

// Create elevation layer
            var worldGround = new ElevationLayer({
                url: "http://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
            });

            //Construct Map
            var map = new Map({
                basemap: "streets-relief-vector",
                showAttribution: false,
                //ground: "world-elevation"
                ground: {
                    layers: [worldGround]
                }
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Code that gets elevation:

//Click on View for elevation to display
            var resultsContainer = document.getElementById("resultsDiv");

            view.on("click", function (event) {
                resultsContainer.innerHTML = "Querying elevation...";

                // Query both elevation layers for the elevation at the clicked map position
                var position = event.mapPoint;
                var queryWorldElevation = worldGround.queryElevation(
                    position);;

                // When both query promises resolve execute the following code
                all([queryWorldElevation])
                    .then(function (results) {
                        var posBeforeLandslide = results[0].geometry;

                        // Compute and display the difference in elevation
                        var elevationMeters = Math.abs(posBeforeLandslide.z);
                        elevationFeet = (elevationMeters / 0.3048);
                        resultsContainer.innerHTML = "Elevation: " +
                            elevationMeters.toFixed(2) + " meters, " + elevationFeet.toFixed(0) + " feet";
                    })
                    .otherwise(function (error) {
                        resultsContainer.innerHTML = "Elevation query failed (" +
                            error.message + ")";
                    });
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

My elevation display div in <body>:

<!-- Display coordinates -->
    <span id="resultsDiv" style="position:absolute; right:15px; bottom:30px; font-size:15px; color: cornflowerblue; font-weight: bold; color:#759dc0; z-index:50;">Click map for elevation</span>‍‍‍‍