topic How to read elevation of a map point? in ArcGIS JavaScript Maps SDK Questions

How to read elevation of a map point?

ArshMalik — Mon, 15 Apr 2019 15:15:31 GMT

Hi, I am using ArcGIS API for Javascript 3.28.

Can anyone please let me know how to read elevation of a map point?

I want to read the ground height above sea level of a point when user clicks on map.

Secondly I want to read ground heights of an area of interest. Its is not very easy to find help about DEM or DTM.

I am working on a ASP.Net MVC application and adding esri maps. Many Thanks in advance

Re: How to read elevation of a map point?

RobertScheitlin__GISP — Mon, 15 Apr 2019 16:26:09 GMT

Arsh,

A point is not aware of it's elevation unless it is a z-aware point. The only way to get a points elevation is to use a elevation service.

https://developers.arcgis.com/rest/elevation/api-reference/get-started-with-elevation-services.htm

Re: How to read elevation of a map point?

ArshMalik — Wed, 17 Apr 2019 08:46:20 GMT

Hi, Thanks for your reply,

Do you know how to use elevation service in Javascript? Any example?

I saw your link and I think "Summarize Elevation" may help me what I am looking, but I could not find any sample for the Summarize Elevation

Re: How to read elevation of a map point?

RobertScheitlin__GISP — Sat, 11 Dec 2021 07:00:11 GMT

Arsh,

Sure here is a sample. You will have to log into your AGOL account to use this service though.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Query Point Eelvation</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }

      #info {
        bottom: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        text-align: left;
        width: 200px;
        z-index: 40;
      }
    </style>

    <script src="https://js.arcgis.com/3.28/"></script>
    <script>
      var map, gp;

      require([
        "esri/map", "esri/symbols/SimpleMarkerSymbol",
        "esri/graphic", "esri/layers/GraphicsLayer",
        "esri/Color", "esri/tasks/Geoprocessor",
        "esri/tasks/FeatureSet", "dojo/dom",
        "dojo/domReady!"
      ], function(
        Map, SimpleMarkerSymbol,
        Graphic, GraphicsLayer,
        Color, Geoprocessor,
        FeatureSet, dom
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-120.741, 56.39],
          slider: false,
          zoom: 6
        });

        gp = new Geoprocessor("http://elevation.arcgis.com/arcgis/rest/services/Tools/Elevation/GPServer/SummarizeElevation");
        gp.setOutSpatialReference({
          wkid: 102100
        });
        var symbol = new SimpleMarkerSymbol("circle", 14, null, new Color([0, 0, 255, 0.65]));
        var gl = new GraphicsLayer({ id: "pointelev" });
        map.addLayer(gl);
        map.on("click", function(e) {
          gl.clear();
          var graphic = new Graphic(e.mapPoint, symbol);
          gl.add(graphic);
          var features = [];
          features.push(graphic);
          var featureSet = new FeatureSet();
          featureSet.features = features;
          var params = {
            "InputFeatures": featureSet,
            "DEMResolution": "FINEST"
          };
          gp.submitJob(params, completeCallback, statusCallback);
          dom.byId("info").innerHTML = "Processing Request";

          function completeCallback(jobInfo) {
            gp.getResultData(jobInfo.jobId, "OutputSummary", showElevation)
          }

          function statusCallback(jobInfo){
            if(dom.byId("info").innerHTML === "Processing Request..."){
              dom.byId("info").innerHTML = "Processing Request";
            }else{
              dom.byId("info").innerHTML += ".";
            }
          }

          function showElevation(results){
            dom.byId("info").innerHTML = "The clicked points elevation is: " + results.value.features[0].attributes.MeanElevation;
          }
        });
      });
    </script>
  </head>
  <body class="claro">
    <div id="map"></div>
    <div id="info" class="esriSimpleSlider">
      Click on map to execute Elevation GP Task.
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: How to read elevation of a map point?

LarryMasters — Wed, 17 Apr 2019 14:07:58 GMT

Arsh,

I published an image service of a DEM, put it in a web map (along with my other infrastructure), made it transparent, configured the pop up to show pixel value (aliased it to estimated elevation), and let it go.

When someone needs to know the elevation of a particular point or feature, it will pop up along with the feature.

I compared my data with several different services (public and private) like contours, and it lines up nice.

My staff seems pleased with the results.

Best of luck,

Larry

Re: How to read elevation of a map point?

ArshMalik — Thu, 18 Apr 2019 11:52:33 GMT

Thanks a lot for the help. Why do we have to login? Would it be necessary if we would have installed ArcGIS on our local server?

Re: How to read elevation of a map point?

RobertScheitlin__GISP — Thu, 18 Apr 2019 12:58:27 GMT

Arsh,

It states:

There are no credit charges for using these services. There may be limitations on the number of input features that can be supplied. Check the documentation for the particular service for more information.

So i am actually not sure why you are required to login.