How to read elevation of a map point?

1000
6
Jump to solution
04-15-2019 08:15 AM
ArshMalik
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
ArshMalik
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

ArshMalik
New Contributor II

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
LarryMasters
Occasional Contributor

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