Open menu

_project

< projects / Marine
// project

Marine

An interactive web map for visualizing geographic data and stories about world regions. The project combines cartography, historical/news stories, and interactive points of interest built on Leaflet and Vue 3.

VueTypeScriptPiniaLeaflet
Marine
01

what I did

  • → Designed a composable-based frontend architecture with Vue 3 + TypeScript
  • → Built a responsive UI layout from design mockups
  • → Built an interactive Leaflet map with GeoJSON country and water layers
  • → Implemented a Google/Yandex Maps-style adaptive label system
  • → Developed label collision-avoidance and eased font-size interpolation
  • → Created reusable composables and centralized map configuration
  • → Integrated oceans-seas.geojson and water-to-region mapping
  • → Implemented fetching map points and stories from the API
  • → Built the sidebar UI for point details and stories
  • → Managed state with Pinia (sidebar, regions, points)
  • → Optimized rendering with requestAnimationFrame and zoom caching
← back to projects