Find the elevation of a point

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

The Elevation service is a location service 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, you call the Elevation service to 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 below and follow the steps to create a new application.

Set up authentication

Create developer credentials in your portal for the type of authentication you selected.

Set developer credentials

Use the API key or OAuth developer credentials so your application can access location services.

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
     <!-- MapLibre -->
     <script src="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.js"></script>
     <link href="https://unpkg.com/maplibre-gl@5.1.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
     <!-- MapLibre -->
     <script src="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.js"></script>
     <link href="https://unpkg.com/maplibre-gl@5.1.0/dist/maplibre-gl.css" rel="stylesheet" />
   
     <!-- Calcite components -->
     <script type="module" src="https://js.arcgis.com/calcite-components/2.12.1/calcite.esm.js"></script>
     <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.12.1/calcite.css" />
   
     <!-- 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

In this step, you 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 <html>, 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
     <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
       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

In this step, you 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 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
       const basemapEnum = "arcgis/topographic";
   

   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 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
       const map = new maplibregl.Map({
         container: "map", // the id of the div element
         style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/${basemapEnum}?token=${accessToken}`,
   
         zoom: 12, // starting zoom
         center: [-157.750, 21.410], // starting location [longitude, latitude]
   
       });
   
   

   Expand

Get elevation data

In this step, you use the Elevation service 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
       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
       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
       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

In this step, you 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
       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
       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 access the Elevation service to return elevation information and view the results in a popup.

What's next?

Learn how to use additional ArcGIS location services in these tutorials: