website: make moar better

Signed-off-by: Frank Villaro-Dixon <frank@villaro-dixon.eu>
This commit is contained in:
Frank Villaro-Dixon 2024-04-19 13:29:10 +02:00
parent ffc00dd2e6
commit cd4ccee05c

View file

@ -1,177 +1,93 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="no-js" lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="UTF-8">
<title>elevation-api.eu - Free elevation API</title>
<meta name="description" content="Free elevation api using the Copernicus dataset">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Elevation API Service</title>
<link rel="stylesheet" href="css/hightlightjs-dark.css"> <style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script> body {
<link rel="preconnect" href="https://fonts.googleapis.com"> font-family: Arial, sans-serif;
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> margin: 0;
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300&family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet"> padding: 0;
<link rel="stylesheet" href="css/style.css" media="all"> background: #f4f4f4;
color: #454545;
}
header {
background: #007BFF;
color: #ffffff;
padding: 10px 20px;
text-align: center;
}
section {
padding: 20px;
margin: 0 10px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
footer {
text-align: center;
padding: 10px 0;
background: #007BFF;
color: white;
/*position: fixed;*/
bottom: 0;
width: 100%;
}
code {
background: #eee;
padding: 2px 5px;
border-radius: 3px;
}
a {
color: #07a;
}
</style>
</head> </head>
<body>
<body class="one-content-column-version"> <header>
<div class="left-menu"> <h1>Free Elevation API Service</h1>
<div class="content-logo"> <p>Get the elevation of every point on earth. So fast, much good!</p>
<div class="logo"> </header>
<img src="images/logo.png" height="32" /> <section>
<span>API Documentation</span> <h2>About This Service</h2>
</div> <p>This API provides you with access to elevation data across Earth's globe, absolutely free of charge.</p>
<button class="burger-menu-icon" id="button-menu-mobile"> </section>
<svg width="34" height="34" viewBox="0 0 100 100"><path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"></path><path class="line line2" d="M 20,50 H 80"></path><path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"></path></svg> <section>
</button> <h2>API Usage</h2>
</div> <p>To use the API, make a GET request to this endpoint with the required parameters. Here is an example request:</p>
<div class="mobile-menu-closer"></div> <code>https://www.elevation-api.eu/elevation/:lat/:lon</code>
<div class="content-menu"> <h3>Parameters:</h3>
<div class="content-infos">
<div class="info"><b>Version:</b> 0.8.5</div>
<div class="info"><b>Last Updated:</b> Apr. 2024</div>
</div>
<ul> <ul>
<li class="scroll-to-link active" data-target="content-get-started"> <li><strong>lat</strong> - Latitude of the location, WGS-84</li>
<a>GET STARTED</a> <li><strong>lon</strong> - Longitude of the location, WGS-84</li>
</li>
<li class="scroll-to-link" data-target="content-get-elevation">
<a>Get Elevation</a>
</li>
<li class="scroll-to-link" data-target="content-errors">
<a>Errors</a>
</li>
</ul> </ul>
</div> <h3>Response:</h3>
</div> <p>The API will return the elevation in meters. For example:</p>
<code>42</code>
<p>If the point is not into the DEM dataset, the response code will be 501 (or <code>Null</code> in JSON mode)</p>
<div class="content-page"> <h3>Try it out:</h3>
<div class="content"> <a href="http://www.elevation-api.eu/elevation/46.24566/6.17081">Get the elevation of the Lake Leman</a>
<div class="overflow-hidden content-section" id="content-get-started"> </section>
<h1>Get started</h1> <section>
<p> <h2>Alternative API endpoints</h2>
elevation-api.eu provides a free elevation service aronud the Earth's globe. Under the scenes, it uses the Copernicus DEM dataset from the European Space Agency. <h3>JSON result</h3>
</p> <p>Append <code>?json</code> to your query to have the return content as a json payload</p>
</div> <h4>Example</h4>
<div class="overflow-hidden content-section" id="content-get-elevation"> <code><a href="https://www.elevation-api.eu/elevation/46.24566/6.17081?json">https://www.elevation-api.eu/elevation/46.24566/6.17081?json</a></code>
<h2>get elevation</h2> </section>
<p> <section>
To get elevation (in meters, of course) of a point on earth, you need to do a GET request to the following url:<br> <h2>Misc</h2>
<code class="higlighted break-word">https://www.elevation-api.eu/elevation/:lat/:lon</code> <h3>Data source</h3>
<br> <p>The digital elevation data comes from ESA's Copernicus program.</p>
Latitude and Longitude should be on the WGS-84 datum. For example, the elevation of lake Leman is: <h3>Rate limits</h3>
<br> <p>Don't be a dick. Less than 10/s is okay</p>
<code> <h3>Contact</h3>
curl https://www.elevation-api.eu/elevation/46.24566/6.17081<br> <p>For more information, you can reach me at f@vi-di.fr</p>
368 </section>
</code> <footer>
</p> <p>© 2024 Frank Villaro-Dixon. No rights reserved</p>
<!-- </footer>
<h4>QUERY PARAMETERS</h4>
<table>
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>secret_key</td>
<td>String</td>
<td>Your API key.</td>
</tr>
<tr>
<td>search</td>
<td>String</td>
<td>(optional) A search word to find character by name.</td>
</tr>
<tr>
<td>house</td>
<td>String</td>
<td>
(optional) a string array of houses:
</td>
</tr>
<tr>
<td>alive</td>
<td>Boolean</td>
<td>
(optional) a boolean to filter alived characters
</td>
</tr>
<tr>
<td>gender</td>
<td>String</td>
<td>
(optional) a string to filter character by gender:<br> m: male<br> f: female
</td>
</tr>
<tr>
<td>offset</td>
<td>Integer</td>
<td>(optional - default: 0) A cursor for use in pagination. Pagination starts offset the specified offset.</td>
</tr>
<tr>
<td>limit</td>
<td>Integer</td>
<td>(optional - default: 10) A limit on the number of objects to be returned, between 1 and 100.</td>
</tr>
</tbody>
</table>
-->
</div>
<div class="overflow-hidden content-section" id="content-errors">
<h2>Errors</h2>
<p>
The elevation api uses the following error codes:
</p>
<table>
<thead>
<tr>
<th>Error Code</th>
<th>Meaning</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTTP 501</td>
<td>
The requested elevation is outside the DEM's bound. Usually this happens if you try to request a point on Sea.
You can assume the elevation to be around 0m.
</td>
</tr>
<!--
<tr>
<td>X001</td>
<td>
Unknown or unvalid <code class="higlighted">secret_key</code>. This error appears if you use an unknow API key or if your API key expired.
</td>
</tr>
<tr>
<td>X002</td>
<td>
Unvalid <code class="higlighted">secret_key</code> for this domain. This error appears if you use an API key non specified for your domain. Developper or Universal API keys doesn't have domain checker.
</td>
</tr>
<tr>
<td>X003</td>
<td>
Unknown or unvalid user <code class="higlighted">token</code>. This error appears if you use an unknow user <code class="higlighted">token</code> or if the user <code class="higlighted">token</code> expired.
</td>
</tr>
-->
</tbody>
</table>
</div>
</div>
</div>
</body> </body>
</html> </html>