PortDB

We helped the United Kingdom Hydrographic Office (UKHO) build PortDB, a web portal which displays maritime related geospatial data such as berths, dredged areas, restrictions, and many more. The geospatial data is stored in a PostgreSQL database and rendered using Mapbox GL JS, a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.

We used completely open source tools to build this platform. It’s hosted using an Amazon EC2 server running Linux Ubuntu.

We used AngularJS to build the front-end application and MapBox GL JS to render the map. For the back-end system we built a PHP API which interacts with a PostgreSQL database which stores the user authentication data along with some of the geospatial data.

Map Filter

PortDB has a filter whereby the user can choose what should be displayed to them on the map. They can also this filter to switch between a raster map layer or a satellite image.

User Profile

We implemented a user profile in PortDB which allows the user to define a profile about themselves. This was designed so that, if a user was responsible for sailing a tanker, then they could opt to only show relevant geospatial data for tankers on the map. The profile also allows the user to define the vessel size, draft size, and length of their vessel to further tailor the data displayed to them.

Site Tour

PortDB has a “tour” which we built using AngularJS. This function gives the user a tour of the web portal showing them all of the key features that they can use.

“Typeahead” Location Search

We implemented a “typeahead” search function for PortDB. As the user types into the location search bar we send Ajax JavaScript requests from our Angular app to the PHP API which then queries the PostgreSQL database for any ports matching the text the user input. Upon clicking on a search result the map then pans to the desired location.

Maritime Information Portal

MIP (Maritime Information Portal) is a web application we produced for the United Kingdom Hydrographic Office (UKHO). MIP was created for mariners who wish to view a variety of information sources including:

  • Reported and unconfirmed Hydrographic Notes sourced directly from the portal and via the ADMIRALTY H-Note App
  • Product Limits
  • Maritime information such as RNWs, World Ports, and Anti shipping activity

The portal aids mariners, particularly those who actively use a vessel by presenting them with relevant maritime information data such as wrecks, water pollution, and new sea features (such as piers). This data can help mariners plan their journeys around any potentially hazardous maritime incidents.

The Maritime Information portal has a front-end AngularJS application which gets displayed to the user, this application uses a google map to display the geospatial data to users. There is a PHP API that the Angular app communicates with. This PHP API is connected to both a PostgreSQL database which holds the geospatial data and a MySQL database which holds the user authentication data.

Gamification

We built in a “gamification” mechanism into the Angular app. Users would score points for every H-Note they submitted to the App which got verified. Once they reach certain milestones, their H-Note rank increases. This is displayed visually on the front-end as a collection of stars. Users ranking range from 1 to 5. This mechanism helps users engage with the portal and provides an incentive for them to report H-Note incidents via the portal.