Comment afficher une courbe de marée sur un site web
Pour afficher une courbe de marée sur un site web, il faut surtout récupérer une série de dates et de hauteurs d'eau, puis la transmettre à un composant graphique.
Le principe
L'API api-maree.fr renvoie déjà une série temporelle adaptée à cet usage. Chaque point contient une date et une hauteur d'eau, ce qui correspond exactement à ce qu'attendent la plupart des bibliothèques de graphique côté web.
La requête de départ
Une courbe fluide sur une journée fonctionne bien avec un pas de 10 minutes.
GET /water-levels?site=port-en-bessin&from=2026-03-24T00:00&to=2026-03-25T00:00&step=10&tz=UTC&key=00000000000000000000000000000000Le traitement côté front-end
Une fois le JSON reçu, il suffit généralement de transformer le tableau data
en deux séries: les abscisses pour les dates, et les ordonnées pour les hauteurs d'eau.
const payload = await response.json();
const labels = payload.data.map(point => point.time);
const values = payload.data.map(point => point.height);Cette structure peut ensuite être branchée sur Chart.js, ECharts, ApexCharts ou tout autre outil de visualisation.
Pourquoi c'est pratique
Vous n'avez pas à recalculer vous-même la courbe ni à préparer un format spécial pour l'affichage. L'API fournit déjà les points à intervalle régulier, ce qui accélère beaucoup l'intégration.