Able to click view for elevation in 4.2?

1257
3
Jump to solution
01-24-2017 01:51 PM
DavidChrest
Occasional Contributor II

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);
});

0 Kudos
1 Solution

Accepted Solutions
DavidChrest
Occasional Contributor II

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>‍‍

View solution in original post

3 Replies
SteveCole
Frequent Contributor

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

ReneRubalcava
Frequent Contributor
DavidChrest
Occasional Contributor II

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>‍‍