Infracorridor-map-tool
Enterprise Full-Stack Geospatial Tool for building, analyzing, and exporting high-fidelity global cable infrastructure maps.
Overview
I built this comprehensive geospatial platform as a Next.js 16 application to provide deep-level visibility into the world's subsea cable networks. The tool features an 'Intelligently Segmented Engine' that handles the dynamic rendering of nearly 700 cables and 28,000 landing points, allowing for granular analysis of individual cable segments based on their active status. This differentiates it from traditional static map tools by letting users explore infrastructure with a focus on specific corridors and landing point connectivity.
To ensure the platform remains lightweight while handling massive datasets, I designed a cloud-native architecture deployed via AWS Amplify and AWS Route 53. I offloaded the multi-megabyte GeoJSON datasets to AWS S3, decoupling the data layer from the application logic to ensure high availability and low-latency delivery. Technical complexity is centered on the custom segment-processing logic I designed to manage these datasets directly in the browser, featuring crossover-detection algorithms that calculate partial visibility for large cable systems in real-time.
Problem
Visualizing thousands of overlapping cable segments and landing points on a single map leads to extreme visual clutter and performance bottlenecks. Infrastructure analysts need the ability to perform site-specific analysis without the distraction of unrelated cables, and they require a scalable way to serve these massive geographic datasets without ballooning the core application bundle or overwhelming a traditional server.
• Data Delivery Scalability: Serving high-volume GeoJSON and metadata files that exceed standard repository limits without sacrificing fetch performance.
• Dynamic Segment Rendering: Managing partial visibility for multi-thousand-point line strings based on the active status of their constituent landing points.
• Large Dataset Interactivity: Maintaining an instant-response UI while managing the state of 28,000+ points and dozens of custom routes in a React/Next.js environment.
Constraints
- •Zero-Backend Architecture: The system functions entirely client-side, requiring all pathfinding logic, geometry calculations, and state management to run in the user's browser.
- •Stateless Infrastructure: The application had to remain highly portable and cost-effective, using S3 for persistent storage instead of a complex database, with Amplify handling CI/CD and hosting.
Solution
I chose Next.js 16 and React 19 as the foundation, with Leaflet for the mapping layer. I architected a cloud-native storage strategy using AWS S3 to host the core GeoJSON and JSON metadata files, ensuring it scales automatically with traffic. For the connectivity logic, I built an 'Intelli-Segment Engine' that uses crossover-points to dynamically calculate which parts of a cable should be visible based on active landing points. To ensure low-latency interactions across massive datasets, I used Zustand for global state management, centralizing the cable, routing, and UI state into optimized stores. For routing, I developed a NearestPortFinder utility to calculate logical source-to-destination paths and implemented high-resolution (2x) PNG export functionality to generate publication-ready maps.
Architecture
The application’s components interact through a reactive data flow: the data loader fetches optimized JSON artifacts from the S3-backed storage layer, which is then populated into Zustand stores. The segment engine recalculates line geometries in real-time as users toggle landing points, which are then rendered as interactive layers in the map view. The entire system is deployed via AWS Amplify for seamless CI/CD, with Route 53 managing the domain routing and DNS.
•frontend:Next.js (App Router), React 19, Tailwind CSS 3, Lucide React.
•infrastructure:AWS Amplify (Hosting/CI/CD), AWS Route 53 (DNS), AWS S3 (Geospatial Data Storage).
•state Management:Zustand (Optimized stores for cables, landing points, and active routes).
•map Engine:Leaflet, React-Leaflet, CartoDB Dark Matter tiles.
•libraries:
- Custom Crossover Detection
- Segment Visibility Logic
- Nearest Port Search
Trade-offs
S3 Storage Layer over spatial DB: I chose AWS S3 for data delivery over a PostGIS database to drastically reduce infrastructure costs and simplify deployment.
Leaflet (2D) over 3D Globe: I prioritized Leaflet for its robust plugin ecosystem and superior performance when handling massive sets of interactive markers.
Client-Side Heavy Architecture: By performing all segment analysis in the browser, I achieved an 'instant' feel for user toggles, accepting a higher initial memory footprint (~200MB) for a smoother UX.
Learnings
Full-Stack Cloud Deployment: I learned how to orchestrate a production-ready AWS environment using Amplify for hosting and Route 53 for domain management.
Cloud Data Delivery: I gained experience in effectively using S3 for low-cost, high-volume static data hosting in a serverless application context.
Geospatial State Optimization: I developed a deep understanding of using Zustand selectors to prevent unnecessary map re-renders when managing thousands of individual data entries.
Future Roadmap
- •Automatic S3 Synchronization: Implementing a GitHub Action or Lambda function to automatically update S3 data from source APIs on a scheduled basis.
- •Advanced Pathfinding: Implementing A* graph search over a bathymetric grid to provide geographically accurate subsea routes instead of port-to-port logical lines.
- •Cloud-Persistence for Routes: Using an additional S3 bucket or DynamoDB to allow users to save and share their custom corridor configurations via unique short-links.
Summary of Work
Deployment Details
Added AWS Amplify (Hosting/CI/CD) and Route 53 (DNS/Domain management) to the Infrastructure and Solution sections.
Infrastructure Orchestration
Updated the Learnings section to highlight experience with full-stack AWS cloud deployment.
Refined Text
Removed internal file path references for a cleaner portfolio presentation.
Final Structural Pass
Ensured all sections remain professional, senior-level, and aligned with the codebase.