Skip to content
JohandryViles
Menu
Back to projects

Case study

Marine Alerts · Oceanographic Monitor

Interactive oceanographic visualization tool developed to inspect marine weather data and trigger alerts for adverse maritime conditions.

  • React
  • TypeScript
  • MapLibre GL
  • Vite
  • Open-Meteo

01

Overview

Renders dynamic vector map layers with sea surface temperature heatmaps and real-time wave height and wave period telemetry.

02

The challenge

Overlay multiple real-time oceanographic data layers on interactive maps while maintaining smooth 60fps performance across devices.

03

The solution

Implementation with MapLibre GL, decoupled data provider architecture (Open-Meteo and synthetic fallbacks), comprehensive TypeScript types, and React Vite.

04

Results

Excellent map rendering performance, real-time ocean buoy inspection, and an intuitive coastal safety alert dashboard.

05

Main view02
Interface detail03
Project flow04