Find the elevations of multiple points

Learn how to find elevation values of points along a path in New Zealand's South Island with the ArcGIS Elevation serviceThe elevation service, also known as ArcGIS Elevation service, is a location service hosted by Esri that returns TopoBathy elevation values for a single location or multiple locations.Learn more.

The ArcGIS Elevation serviceThe elevation service, also known as ArcGIS Elevation service, is a location service hosted by Esri that returns TopoBathy elevation values for a single location or multiple locations.Learn more is a location serviceArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services.Learn more that returns elevation values for a single location or multiple locations. Elevation coverage is provided for both topography (land elevations) and bathymetry (water depths) and takes location inputs as longitude and latitude coordinates.

In this tutorial, use ArcGIS REST JS to access the Elevation service and get elevation values for points along a path in New Zealand's South Island. The values will be returned as measures above mean sea level in meters.

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

Add script references

Reference the ArcGIS REST JS request and elevation packages to access the Elevation service.

1. Reference the request and elevation packages from ArcGIS REST JS.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       <script src="https://cesium.com/downloads/cesiumjs/releases/1.140/Build/Cesium/Cesium.js"></script>
       <link href="https://cesium.com/downloads/cesiumjs/releases/1.140/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
   
       <!--  ArcGIS REST JS  -->
       <script src="https://unpkg.com/@esri/arcgis-rest-request@4/dist/bundled/request.umd.js"></script>
       <script src="https://unpkg.com/@esri/arcgis-rest-elevation@1/dist/bundled/elevation.umd.js"></script>
   

Update the map

1. To focus on South Island, New Zealand, update the map's viewpoint to 169.0016, -44.7023 and set the scale to 20000.

   Expand

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(169.0016, -44.7023, 20000),
         orientation: {
           heading: Cesium.Math.toRadians(0.0),
           pitch: Cesium.Math.toRadians(-70.0)
     }
       });
   

   Expand

Define points of interest

You need to define the coordinates of interest from Kingston to Frankton in New Zealand's South Island, passing through the Lake Wakatipu. You then draw a polyline connecting these points to visualize the route on the map.

1. Define a set of points starting from Kingston, passing through Lake Wakatipu, and reaching Frankton.
   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       const points = [
         [168.957299, -44.665736],
         [168.970268, -44.655672],
         [168.993555, -44.645187],
         [169.007703, -44.630505],
         [168.999450, -44.609314],
         [169.026863, -44.610783],
         [169.056045, -44.609104]
       ];
   

   Expand

Get elevation data

After defining the points and drawing the route, you make a request to the Elevation service to get the elevations of the points along the route.

1. Define a function called getElevationData() and call it.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       async function getElevationData() {
   
       }
   

   Expand

2. Make a request to the Elevation service, passing in the array of points.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       async function getElevationData() {
   
         const data = await arcgisRest.findElevationAtManyPoints({
           coordinates: points,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
       }
   

   Expand

Display results

Once the elevation data is fetched, you can display the results on the map. This involves extracting the elevation values from the response and creating a pin and popup at each point to show the elevation information.

1. Extract the x, y, z values from the service response to be used for displaying the elevation at each point.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       async function getElevationData() {
   
         const data = await arcgisRest.findElevationAtManyPoints({
           coordinates: points,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const elevationData = data.result.points;
   
       }
   

   Expand

2. Use PinBuilder() to place markers on the map at each point, and show a popup with the elevation information when user clicks on it.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
       async function getElevationData() {
   
         const data = await arcgisRest.findElevationAtManyPoints({
           coordinates: points,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const elevationData = data.result.points;
   
         const pinBuilder = new Cesium.PinBuilder();
         const pins = [];
   
         points.forEach((point, index) => {
           const [lng, lat] = point;
           const { x, y, z } = elevationData[index];
   
           viewer.entities.add({
             position: Cesium.Cartesian3.fromDegrees(lng, lat, z + 500),
             billboard: {
               verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
               heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
               image: pinBuilder.fromColor(Cesium.Color.BLUE, 48).toDataURL()
             },
             description: `Longitude: ${x}<br/>Latitude: ${y}<br />Elevation: ${z} m`,
             name: "Elevation relative to mean sea level"
           });
           pins.push(Cesium.Cartesian3.fromDegrees(lng, lat, z + 500));
   
           viewer.screenSpaceEventHandler.setInputAction((movement) => {
             const pickedObject = viewer.scene.pick(movement.position);
   
             if (Cesium.defined(pickedObject)) {
               viewer.selectedEntity = pickedObject.id;
               viewer.selectedEntity.description = pickedObject.id.description;
             }
           }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
         });
   
         viewer.entities.add({
           polyline: {
             positions: pins,
             material: Cesium.Color.BLUE
           }
         });
   
       }
   

   Expand

Run the app

Run the app.

You should now see a map centered over the New Zealand's South Island, displaying the path between Kingston to Frankton, passing through the Lake Wakatipu, with elevation values along the route.

What's next?

Learn how to use additional location services in these tutorials: