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.