examples/web/discovery.html

<!DOCTYPE html>
<html>

<head>
	<title>openEO JS client - Discovery example</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://cdn.jsdelivr.net/npm/axios@1/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@openeo/js-client@2/openeo.min.js"></script>
	<script type="text/javascript">
		var url = "https://earthengine.openeo.org"; // Insert the openEO server URL here
		var connection = null;

		window.onload = function () {
			document.getElementById('url').innerText = url;
			document.getElementById('clientVersion').innerText = OpenEO.clientVersion();

			OpenEO.connect(url)
				.then(c => {
					connection = c;
					return connection.capabilities();
				})
				.then(capabilities => {
					document.getElementById('serverVersion').innerText = capabilities.apiVersion();
					return connection.listCollections();
				})
				.then(collections => {
					document.getElementById('collectionCount').innerText = collections.collections.length;
					return connection.listProcesses();
				})
				.then(processes => {
					document.getElementById('processCount').innerText = processes.processes.length;
					return;
				})
				.catch(err => alert(err.message));;
		};
	</script>
</head>

<body>
	<h1>Server information</h1>
	<p>URL: <span id="url"></span></p>
	<h2>Versions</h2>
	<ul>
		<li>Client Version: <span id="clientVersion">Loading...</span></li>
		<li>Server Version: <span id="serverVersion">Loading...</span></li>
	</ul>
	<h2>EO Data Discovery</h2>
	<p>Number of supported collections: <span id="collectionCount">Loading...</span></p>
	<h2>Process Discovery</h2>
	<p>Number of supported processes: <span id="processCount">Loading...</span></p>
</body>

</html>