LaCanne/realZ
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit for realz API REST service

Browse Source
This commit is contained in:
Philippe Caseiro
2025-09-25 15:00:27 +02:00
parent 53e4512274
commit 0a66597018
7 changed files with 413 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
index.html Normal file
View File

@@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API getRealZ</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; display: flex; flex-direction: column; align-items: center; }
h1 { color: #333; }
.container { max-width: 500px; width: 100%; }
form { background: rgb(255, 255, 255); padding: 2em; border-radius: 0 8px 8px 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 1em; }
.form-row { display: flex; gap: 1em; }
.form-row .form-group { flex: 1; }
label { display: block; margin-bottom: 0.5em; font-weight: bold; }
input, select { width: 100%; padding: 0.8em; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; background-color: white; font-size: 1em; }
button { padding: 0.7em 1.5em; border: none; background-color: #007bff; color: white; border-radius: 4px; cursor: pointer; font-size: 1em; }
button:hover { background-color: #0056b3; }
button:disabled { background-color: #aaa; cursor: not-allowed; }
#result { margin-top: 1em; padding: 1em; background: #e9ecef; border-radius: 4px; text-align: center; word-wrap: break-word; }
.tabs { display: flex; }
.tabs button {
flex: 1; padding: 1em; border: 1px solid #ccc; border-bottom: none;
background-color: #f4f4f9; cursor: pointer; border-radius: 8px 8px 0 0;
color: black;
margin-bottom: -1px; font-size: 1em;
}
.tabs button.active {
background-color: white; border-bottom: 1px solid white; font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Test de l'API Altitude</h1>
<div class="tabs">
<button id="tab-getCorrection" class="active">Obtenir la Correction Orthométrique (N)</button>
<button id="tab-getCorrectedZ">Calculer l'Altitude Corrigée (H)</button>
</div>
<form id="coordForm">
<div class="form-row">
<div class="form-group">
<label for="lat">Latitude :</label>
<input type="number" id="lat" name="lat" step="any" required value="47.2184">
</div>
<div class="form-group">
<label for="lon">Longitude :</label>
<input type="number" id="lon" name="lon" step="any" required value="-1.5536">
</div>
</div>
<div class="form-group" id="z-group" style="display: none;">
<label for="z">Altitude mesurée (ellipsoïdale h) :</label>
<input type="number" id="z" name="z" step="any" value="250.0" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="srcProj">Projection Source (SRID) :</label>
<select id="srcProj" name="srcProj" required>
<option value="4326" selected>WGS 84 (GPS)</option>
<option value="2154">RGF93 / Lambert-93 (France)</option>
<option value="3857">WGS 84 / Pseudo-Mercator (Web)</option>
<option value="4258">ETRS89 (Europe)</option>
</select>
</div>
<div class="form-group">
<label for="dstProj">Projection Destination (SRID) :</label>
<select id="dstProj" name="dstProj" required>
<option value="2154" selected>RGF93 / Lambert-93 (France)</option>
<option value="4326">WGS 84 (GPS)</option>
<option value="3857">WGS 84 / Pseudo-Mercator (Web)</option>
<option value="4258">ETRS89 (Europe)</option>
</select>
</div>
</div>
<div class="form-group">
<button type="submit" id="submit-btn">Obtenir la correction</button>
</div>
</form>
<div id="result">
Entrez des coordonnées et cliquez sur le bouton.
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('coordForm');
const resultDiv = document.getElementById('result');
const zGroup = document.getElementById('z-group');
const zInput = document.getElementById('z');
const submitBtn = document.getElementById('submit-btn');
const tabGetCorrection = document.getElementById('tab-getCorrection');
const tabGetCorrectedZ = document.getElementById('tab-getCorrectedZ');
let mode = 'getCorrection'; // 'getCorrection' ou 'getCorrectedZ'
function setMode(newMode) {
mode = newMode;
if (mode === 'getCorrection') {
zGroup.style.display = 'none';
zInput.required = false;
submitBtn.textContent = "Obtenir la correction (N)";
tabGetCorrection.classList.add('active');
tabGetCorrectedZ.classList.remove('active');
} else { // 'getCorrectedZ'
zGroup.style.display = 'block';
zInput.required = true;
submitBtn.textContent = "Calculer l'altitude corrigée (H)";
tabGetCorrection.classList.remove('active');
tabGetCorrectedZ.classList.add('active');
}
}
tabGetCorrection.addEventListener('click', () => setMode('getCorrection'));
tabGetCorrectedZ.addEventListener('click', () => setMode('getCorrectedZ'));
form.addEventListener('submit', async function(event) {
event.preventDefault();
submitBtn.disabled = true;
resultDiv.textContent = 'Chargement...';
const body = {
lat: parseFloat(document.getElementById('lat').value),
lon: parseFloat(document.getElementById('lon').value),
srcProj: parseInt(document.getElementById('srcProj').value, 10),
dstProj: parseInt(document.getElementById('dstProj').value, 10)
};
let endpoint = '/getorthocorrec';
if (mode === 'getCorrectedZ') {
endpoint = '/getcorrectedaltitude';
body.z = parseFloat(zInput.value);
}
try {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
});
const data = await response.json();
if (response.ok) {
if (mode === 'getCorrection') {
resultDiv.textContent = `Correction orthométrique (N) : - ${data.z.toFixed(8)} mètres`;
} else {
resultDiv.textContent = `Altitude corrigée (H) : ${data.corrected_z.toFixed(8)} mètres`;
}
} else {
resultDiv.textContent = `Erreur : ${data.error}`;
}
} catch (error) {
resultDiv.textContent = `Erreur de communication avec l'API : ${error.message}`;
} finally {
submitBtn.disabled = false;
}
});
// Initialiser le mode au chargement
setMode('getCorrection');
});
</script>
</body>
</html>