The Challenge: Mapping Deployed Equipment The product needed to make deployed equipment visible on a map and useful to people working with changing positions and large areas. My role was to build the interface around live location data and practical map interactions.
Mapbox & SVG Visualization Engine Standard map markers were insufficient for the level of detail required. I engineered a custom visualization layer using Mapbox combined with dynamic SVGs to represent the complex state of the gear.
Position & Drift Visualization: The interface showed the relationship between where a buoy was deployed and where it was currently located. I used SVG vectors to draw the relationship between those coordinates and make movement easy to read.
Geofencing & Zones: I implemented a client-side geofencing system using Turf.js. Users could draw polygon zones on the map, and the SVG layer could flag equipment that moved outside a relevant zone.
Live Retrieval UI: I also built a mode that displayed the user's vessel location and heading alongside the buoy, helping users navigate towards equipment in real time.
Visualizing Operational Areas A simple point marker was not enough to represent every operational area on the map.
I implemented GeoJSON polygon rendering for larger areas and structures, providing useful spatial context alongside the live equipment data.
