Have you ever wondered how high above sea level you are right now?
Browsers can tell us a user’s latitude and longitude, but not their elevation. To answer “What is my current elevation?”, we need to get the user’s coordinates first, then send them to an elevation data source.
In this tutorial, we’ll build a small “What Is My Current Elevation?” tool with the Geoapify Elevation API. It will get the current location, request elevation for that point, and display the result in meters.
How It Works
The tool follows a simple workflow:
- The browser requests the user's current location through the Geolocation API.
- The Geolocation API returns the latitude and longitude coordinates.
- Those coordinates are sent to the Geoapify Elevation API.
- The API looks up the terrain elevation for that location.
- The application displays the elevation value on the page.
In other words, the browser tells us where the user is, and the Elevation API tells us how high above sea level that location is.
Browser Geolocation API
↓
Latitude / Longitude
↓
Geoapify Elevation API
↓
Elevation Above Sea Level
From Location to Elevation
So, to build a “What Is My Current Elevation?” tool, we need to solve two main tasks:
- Get the user’s current location.
- Request elevation for that location.
Before we start, it's worth clarifying what elevation actually means.
Elevation is the height of a location above mean sea level. While latitude and longitude describe a position on Earth's surface, elevation adds a third dimension: height. Applications such as hiking apps, route planners, weather tools, and drone software often use elevation data to better understand terrain.
Getting User Location
The first step is getting the user’s coordinates. The browser can do this with the Geolocation API, which returns latitude and longitude for the current device or browser session.
There are two important limitations to keep in mind:
- the user must grant location permission;
- geolocation may be unavailable or fail in some environments.
Because of that, a production-ready tool should also have a fallback.
A practical fallback is IP geolocation, which estimates a user’s location from their IP address. This fallback is useful, but it is usually less precise than browser geolocation.
Requesting Elevation
Latitude and longitude tell us where the user is, but they don’t tell us how high that location is above sea level. To get that information, we query an elevation dataset through the Geoapify Elevation API.
The API accepts one or more locations and returns elevation values for them. For a “my current elevation” tool, we only need to send one location:
{
locations: [
{
lat: latitude,
lon: longitude
}
]
}
The response contains the elevation value and units, which we can display in the UI.
So the second part of the app is simple: take the coordinates from the location step, send them to the Elevation API, and render the returned elevation.
At this point, we understand the workflow:
- Get the user's coordinates.
- Request elevation for those coordinates.
- Display the result.
Now let's build a working "What Is My Current Elevation?" tool from scratch.
Building the Tool
Now let’s implement the basic version of the tool with plain HTML, CSS, and JavaScript.
The app will do three things:
- Ask the browser for the user’s latitude and longitude.
- Send those coordinates to the Geoapify Elevation API.
- Show the returned elevation on the page.
We’ll start with the page structure, then add the JavaScript logic step by step.
Add Minimal HTML and CSS
For the basic version, the page only needs a button to start the elevation lookup and a result area to show the response.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>What Is My Current Elevation?</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 2rem;
}
button {
padding: 0.75rem 1rem;
cursor: pointer;
}
pre {
margin-top: 1rem;
padding: 1rem;
background: #102a43;
color: #f0f4f8;
white-space: pre-wrap;
}
</style>
</head>
<body>
<button id="my-elevation-button">My Elevation</button>
<pre id="elevation-info">Click the button to get your elevation.</pre>
<script>
const elevationButton = document.querySelector("#my-elevation-button");
const elevationInfo = document.querySelector("#elevation-info");
elevationButton.addEventListener("click", async () => {
elevationInfo.textContent = "Requesting your location...";
// Location and elevation logic will go here
});
</script>
</body>
</html>
The button will trigger the location request. The <pre> element is useful here because it lets us display multiple lines: elevation, latitude, and longitude.
Get Latitude and Longitude
Now we can add the first JavaScript step: asking the browser for the user’s current coordinates.
The browser Geolocation API uses callbacks, so we’ll wrap it in a Promise to make it easier to use with async / await:
function getCurrentLocation() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
(position) => {
resolve({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
},
reject,
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
},
);
});
}
This function resolves with an object like this:
{
latitude: 48.8584,
longitude: 2.2945
}
These coordinates are the input for the elevation request.
Request Elevation
After we have latitude and longitude, we can send them to the Geoapify Elevation API.
Create a Geoapify API key in the Geoapify My Projects dashboard and replace YOUR_API_KEY with your key:
const apiKey = "YOUR_API_KEY";
async function getElevation(latitude, longitude) {
const response = await fetch(`https://api.geoapify.com/v1/geodata/elevation?apiKey=${apiKey}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
format: "json",
units: "metric",
locations: [
{
lat: latitude,
lon: longitude,
},
],
}),
});
const data = await response.json();
return data.results[0];
}
The locations field is an array, so the same endpoint can also request elevation for multiple points. For the current elevation tool, we only send one location.
A successful response looks like this:
{
"results": [
{
"location": {
"lat": 48.8584,
"lon": 2.2945
},
"elevation": 35,
"units": "m"
}
]
}
In the code above, data.results[0] gives us the elevation result for the first requested location.
Optional: Add an IP Geolocation Fallback
Browser geolocation gives better results, but it depends on user permission. If the user denies the request, or if geolocation is unavailable, we can fall back to IP geolocation.
IP geolocation is usually less precise than browser geolocation because it estimates location from the user’s network connection, not from the device itself. Still, it is useful as a backup when exact location is not available.
async function getLocationFromIp() {
const response = await fetch(`https://api.geoapify.com/v1/ipinfo?apiKey=${apiKey}`);
const result = await response.json();
return {
latitude: result.location.latitude,
longitude: result.location.longitude,
};
}
Then update the location function to use browser geolocation first and IP geolocation as a fallback:
async function getCurrentLocation() {
if (!("geolocation" in navigator)) {
return getLocationFromIp();
}
return new Promise((resolve) => {
navigator.geolocation.getCurrentPosition(
(position) => {
resolve({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
},
() => {
resolve(getLocationFromIp());
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
},
);
});
}
Wire Everything Together
Now we can connect everything to the button. On click, the app gets the current location, sends it to the Elevation API, and writes the result to the page.
The click handler looks like this:
elevationButton.addEventListener("click", async () => {
elevationInfo.textContent = "Requesting your location...";
const location = await getCurrentLocation();
elevationInfo.textContent = "Requesting elevation...";
const elevation = await getElevation(location.latitude, location.longitude);
elevationInfo.textContent = [
`Elevation: ${elevation.elevation} ${elevation.units}`,
`Latitude: ${location.latitude}`,
`Longitude: ${location.longitude}`,
].join("\n");
});
Going Further
The minimal version shows the core idea: get coordinates, request elevation, and display the result.
From here, you can extend the tool in several useful ways:
- show the selected location on an interactive map with Geoapify Map Tiles and MapLibre GL JS;
- let users click the map to request elevation for any point;
- use IP geolocation as a fallback when browser geolocation is unavailable;
- request elevation for multiple locations in one API call;
- visualize elevation across a city or the current map view.
You can see these ideas in the full demo:
Open the “What Is My Current Elevation?” demo >>
Conclusion
A current elevation tool is mostly a coordinate lookup followed by an elevation lookup. The browser Geolocation API gives us latitude and longitude, and the Geoapify Elevation API turns those coordinates into elevation above sea level.
From there, you can keep the tool simple or expand it with maps, click-based lookup, IP geolocation fallback, and multi-point elevation requests.
Try the complete demo on CodePen, or create a free Geoapify API key and build your own version:
Top comments (0)