Find elevation for 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 library to create the user interface and the ol-popup library to display pop-ups.

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
     <!-- OpenLayers -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.4.0/ol.css" type="text/css" />
     <script src="https://cdn.jsdelivr.net/npm/ol@v10.4.0/dist/ol.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.5/dist/olms.js" type="text/javascript"></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>
   

2. Reference the Calcite and ol-popup libraries.

   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
     <!-- OpenLayers -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.4.0/ol.css" type="text/css" />
     <script src="https://cdn.jsdelivr.net/npm/ol@v10.4.0/dist/ol.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/ol-mapbox-style@12.3.5/dist/olms.js" type="text/javascript"></script>
   
     <script src="https://unpkg.com/ol-popup@5.1.1/dist/ol-popup.js"></script>
     <link rel="stylesheet" href="https://unpkg.com/ol-popup@5.1.1/src/ol-popup.css" />
   
     <!-- 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
     <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
       html,
       body,
       #map {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
         font-family: Arial, Helvetica, sans-serif;
         font-size: 14px;
         color: #323232;
       }
   
       #control {
         position: absolute;
         top: 15px;
         right: 15px;
         z-index: 2;
         padding: 10px;
         background: #fff;
       }
   
       .ol-popup {
         width: 250px;
       }
   

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
       map.setView(
         new ol.View({
   
           center: ol.proj.fromLonLat([-157.750, 21.410]),
           zoom: 12,
   
         })
       );
   
       const basemapId = "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
       map.setView(
         new ol.View({
   
           center: ol.proj.fromLonLat([-157.750, 21.410]),
           zoom: 12,
   
         })
       );
   
       const basemapId = "arcgis/topographic";
   

   Expand

Get elevation data

In this step, you use the Elevation service to retrieve elevation data based on the clicked point on the map.

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
       let elevationMeasure = "meanSeaLevel"; // Default
   
       document.getElementById("elevationControl").addEventListener("calciteSwitchChange", (event) => {
         elevationMeasure = event.target.checked ? "meanSeaLevel" : "ellipsoid";
       });
   

   Expand

2. After olms.apply, add a click event handler. Use arcgisRest.findElevationAtPoint 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
       olms.apply(map, basemapURL).then(() => {
   
         map.on("click", async (event) => {
   
           const coordinate = ol.proj.toLonLat(event.coordinate);
           const [lng, lat] = coordinate;
           const response = await arcgisRest.findElevationAtPoint({
             lon: lng,
             lat: lat,
             relativeTo: elevationMeasure,
             authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
           })
   
           const { x, y, z } = response.result.point;
   
         });
   

   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
       olms.apply(map, basemapURL).then(() => {
   
         map.on("click", async (event) => {
   
           const coordinate = ol.proj.toLonLat(event.coordinate);
           const [lng, lat] = coordinate;
           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 popup using the ol-popup library. Then, create vector layer to store and display markers, and apply a style to render the marker.

   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
         const popup = new Popup();
         map.addOverlay(popup);
   
         const markerLayer = new ol.layer.Vector({
           source: new ol.source.Vector()
         });
         map.addLayer(markerLayer);
   
         const circle = new ol.style.Style({
           image: new ol.style.Circle({
             radius: 4,
             fill: new ol.style.Fill({ color: "#FF0000" }),
             stroke: new ol.style.Stroke({ color: "#000", width: 1 })
           })
         });
   
   

   Expand

3. Display the marker at the clicked point and the popup that contains the elevation information.

   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
       olms.apply(map, basemapURL).then(() => {
   
         const popup = new Popup();
         map.addOverlay(popup);
   
         const markerLayer = new ol.layer.Vector({
           source: new ol.source.Vector()
         });
         map.addLayer(markerLayer);
   
         const circle = new ol.style.Style({
           image: new ol.style.Circle({
             radius: 4,
             fill: new ol.style.Fill({ color: "#FF0000" }),
             stroke: new ol.style.Stroke({ color: "#000", width: 1 })
           })
         });
   
   
         map.on("click", async (event) => {
   
           const coordinate = ol.proj.toLonLat(event.coordinate);
           const [lng, lat] = coordinate;
           const response = await arcgisRest.findElevationAtPoint({
             lon: lng,
             lat: lat,
             relativeTo: elevationMeasure,
             authentication: arcgisRest.ApiKeyManager.fromKey(accessToken)
           })
   
           const { x, y, z } = response.result.point;
   
           let message = `<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`;
   
           popup.show(event.coordinate, message);
   
           const point = new ol.Feature({
             geometry: new ol.geom.Point(event.coordinate)
           });
           point.setStyle(circle);
           markerLayer.getSource().clear();
           markerLayer.getSource().addFeature(point);
   
         });
   

   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: