Find the elevation of a point

Learn how to find the elevation of a point in Kaneohe, Hawaii.

The ArcGIS Elevation serviceThe ArcGIS Elevation service, also known as 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 Static Maps 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 display the elevation of a single location on a map. You can toggle between viewing elevation values relative to mean sea level or above ground level.

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

Use the API key or OAuth developer credentialsDeveloper credentials are a type of item in a portal that contains parameters for authentication. There are two types of developer credentials: API key credentials and OAuth credentials.Learn more so your application can access ArcGIS servicesA service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise.Learn more.

Add script references

Reference the ArcGIS REST JS request and elevation packages to access the Elevation service. You also reference the Calcite Design System library to create the user interface.

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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       <!-- Load MapLibre GL JS and MapLibre ArcGIS from CDN -->
       <script type="importmap">
       {
         "imports": {
           "maplibre-gl": "https://unpkg.com/maplibre-gl@6.14.0/dist/maplibre-gl.mjs",
           "@esri/maplibre-arcgis": "https://unpkg.com/@esri/maplibre-arcgis@1.3.1/dist/esm/maplibre-arcgis.min.js"
         }
       }
       </script>
       <link href="https://unpkg.com/maplibre-gl@6.14.0/dist/maplibre-gl.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>
   

2. Reference the Calcite Design System library.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       <!-- Load MapLibre GL JS and MapLibre ArcGIS from CDN -->
       <script type="importmap">
       {
         "imports": {
           "maplibre-gl": "https://unpkg.com/maplibre-gl@6.14.0/dist/maplibre-gl.mjs",
           "@esri/maplibre-arcgis": "https://unpkg.com/@esri/maplibre-arcgis@1.3.1/dist/esm/maplibre-arcgis.min.js"
         }
       }
       </script>
       <link href="https://unpkg.com/maplibre-gl@6.14.0/dist/maplibre-gl.css" rel="stylesheet">
   
       <!-- Calcite components -->
       <script type="module" src="%LATEST_CALCITE_COMPONENTS"></script>
   
       <!-- 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>
   

Create a toggle switch

Use Calcite to add a toggle switch. The switch will allow users to toggle between elevation values relative to mean sea level and ground level.

1. Inside the <body>, create a div container for the toggle control. Use calcite-switch to create a toggle switch.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       <div id="control">
         <label>
           <span>Show elevation relative to mean sea level</span>
           <calcite-switch id="elevationControl" checked></calcite-switch>
         </label>
       </div>
   
       <div id="map"></div>
   

2. Add CSS to position the toggle switch on top of the map.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       html,
       body,
       #map {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 14px;
         color: #323232;
         cursor: default;
       }
   
       #control {
         position: absolute;
         top: 15px;
         right: 15px;
         z-index: 2;
         padding: 10px;
         background: #fff;
       }
   

Update the map

Update the map by changing the basemap and setting the viewpoint to focus on Kaneohe, Hawaii.

1. Set the basemap to arcgis/topographic.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
         style: "arcgis/topographic",
         token: accessToken
       });
   

   Expand

2. To focus on Kaneohe, Hawaii, update the map's viewpoint to -157.750, 21.410 and set the zoom level to 12.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       const map = new maplibregl.Map({
         container: "map", // the id of the div element
   
         zoom: 12, // starting zoom
         center: [-157.750, 21.410] // starting location [longitude, latitude]
   
       });
   
       const basemapStyle = maplibreArcGIS.BasemapStyle.applyStyle(map, {
         style: "arcgis/topographic",
         token: accessToken
       });
   

   Expand

Get elevation data

Use the ArcGIS REST JS findElevationAtPoint method to retrieve elevation data based on the clicked point on the map and create a layer to draw a marker on the clicked point.

1. Create a variable called elevationMeasure to store the default elevation reference (datum), which will be meanSeaLevel and add an event listener to your toggle to update the elevationMeasure accordingly.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       let elevationMeasure = "meanSeaLevel";
   
       document.getElementById("elevationControl").addEventListener("calciteSwitchChange", (event) => {
         elevationMeasure = event.target.checked ? "meanSeaLevel" : "ellipsoid";
       });
   

   Expand

2. Add a click event handler to request elevation data from the service, passing in the selected point on the map and elevationMeasure as parameters.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       map.on("click", async (event) => {
   
         const lng = event.lngLat.lng;
         const lat = event.lngLat.lat;
   
         const response = await arcgisRest.findElevationAtPoint({
           lon: lng,
           lat: lat,
           relativeTo: elevationMeasure,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
       });
   

   Expand

3. Once the map loads, add a GeoJSON source with an empty FeatureCollection. Then, create a circle layer.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       map.on("load", () => {
         map.addSource("circle-source", {
           type: "geojson",
           data: {
             type: "FeatureCollection",
             features: []
           }
         });
   
         map.addLayer({
           id: "circle-layer",
           type: "circle",
           source: "circle-source",
           paint: {
             "circle-radius": 3,
             "circle-color": "#FF0000",
             "circle-stroke-color": "#000000",
             "circle-stroke-width": 1
           }
         });
       });
   
       map.on("click", async (event) => {
   
         const lng = event.lngLat.lng;
         const lat = event.lngLat.lat;
   
         const response = await arcgisRest.findElevationAtPoint({
           lon: lng,
           lat: lat,
           relativeTo: elevationMeasure,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
       });
   

   Expand

Display results

Extract the elevation data from the response and display it in a popup on the map.

1. Extract the x, y, and z values from the elevation request response.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       map.on("load", () => {
         map.addSource("circle-source", {
           type: "geojson",
           data: {
             type: "FeatureCollection",
             features: []
           }
         });
   
         map.addLayer({
           id: "circle-layer",
           type: "circle",
           source: "circle-source",
           paint: {
             "circle-radius": 3,
             "circle-color": "#FF0000",
             "circle-stroke-color": "#000000",
             "circle-stroke-width": 1
           }
         });
       });
   
       map.on("click", async (event) => {
   
         const lng = event.lngLat.lng;
         const lat = event.lngLat.lat;
   
         const response = await arcgisRest.findElevationAtPoint({
           lon: lng,
           lat: lat,
           relativeTo: elevationMeasure,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const { x, y, z } = response.result.point;
   
       });
   

   Expand

2. Create a marker at the clicked point and use Popup() to show the elevation (z value) in a popup format.

   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
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   164
   165
   166
       map.on("load", () => {
         map.addSource("circle-source", {
           type: "geojson",
           data: {
             type: "FeatureCollection",
             features: []
           }
         });
   
         map.addLayer({
           id: "circle-layer",
           type: "circle",
           source: "circle-source",
           paint: {
             "circle-radius": 3,
             "circle-color": "#FF0000",
             "circle-stroke-color": "#000000",
             "circle-stroke-width": 1
           }
         });
       });
   
       map.on("click", async (event) => {
   
         const lng = event.lngLat.lng;
         const lat = event.lngLat.lat;
   
         const response = await arcgisRest.findElevationAtPoint({
           lon: lng,
           lat: lat,
           relativeTo: elevationMeasure,
           authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
         });
   
         const { x, y, z } = response.result.point;
   
         map.getSource("circle-source").setData({
           type: "FeatureCollection",
           features: [{
             type: "Feature",
             geometry: {
               type: "Point",
               coordinates: [lng, lat]
             }
           }]
         });
   
         new maplibregl.Popup()
           .setLngLat([lng, lat])
           .setHTML(
             `<b>Elevation relative to ${elevationMeasure === "meanSeaLevel" ? "mean sea level" : "ground level"}</b><br>Latitude: ${y.toFixed(5)}<br>Longitude: ${x.toFixed(5)}<br>Elevation: ${z} m`
           )
           .addTo(map);
   
       });
   

   Expand

Run the app

Run the app.

You should now see a map centered over Kaneohe, Hawaii. Click on the map to return elevation information and view the results in a popup.

What's next?

Learn how to use additional location services in these tutorials: