Technology Stack

  • Backend: PHP / PostgreSQL
  • Frontend: Leaflet.js, Mapbox

Project Overview

Navigator Map is a free, interactive online platform developed for ProtectedSeas. This case study delves into the technical considerations behind building this comprehensive resource that empowers users to explore global marine protections.

Project Goals

  • Provide an accessible platform for anyone to understand legal protections for marine areas worldwide.
  • Facilitate global comparisons of marine protected areas for informed decision-making regarding ocean conservation and management.
  • Simplify comprehension of complex regulations through an interactive map interface.
  • Accelerate conservation assessments by displaying restrictions applicable to specific ocean locations.

Technical Solutions

  • Interactive Mapping: Leaflet.js, a lightweight JavaScript library, is used to create the interactive map interface. This allows users to zoom, pan, and explore the global map, focusing on specific regions of interest.
  • Map Visualization: Mapbox integration provides high-quality base maps and customization options for displaying marine protection boundaries and other relevant data points.
  • Filtering System: A robust filtering system allows users to filter marine protected areas based on various criteria, such as location, protection type, and regulations. This facilitates targeted searches and efficient data exploration.
  • Downloadable Reports: Users can generate downloadable reports summarizing the legal protections for specific ocean areas. These reports are formatted for offline use and can be utilized for research, advocacy, or other conservation efforts.


Navigator Map stands as a valuable resource for anyone interested in understanding and protecting our oceans. The user-friendly interface, combined with a powerful backend and interactive features, empowers individuals, organizations, and policymakers to make informed decisions regarding marine conservation.

Technical Expertise

This case study highlights the technical expertise involved in building Navigator Map, including:

  • Integration of Leaflet.js for interactive mapping functionality
  • Utilization of Mapbox for high-quality map visualizations
  • Creation of a user-friendly filtering system for efficient data exploration
  • Implementation of report generation capabilities for offline use

Navigator Map serves as a testament to the power of technology in promoting environmental awareness and facilitating collaborative efforts towards global ocean protection.