Stop Rebuilding UI

Map Ocean Currents

Ocean current visualization map block for Next.js with globe projection, current flow route lines, sea temperature markers, and current detail tooltips using mapcn map components, shadcn/ui, and Tailwind CSS

Scroll to load preview

Visualize global ocean currents on an interactive 3D globe with this React and Next.js block. Explore major ocean current flow lines rendered as colored routes, sea surface temperature markers with degree readings, and hover tooltips with current speed, depth, and classification data. Toggle between warm and cold current views using the filter bar. Built with TypeScript, mapcn Map with globe projection, MapRoute, MapMarker, MarkerTooltip, and MarkerPopup components, shadcn/ui Badge, and Tailwind CSS. Perfect for oceanography dashboards, climate research tools, and marine education platforms.

FAQ

Last updated on March 30, 2026

Was this page helpful?

Sign in to leave feedback.