Launch Tide

We worked with the staff of the R&D department of the United Kingdom Hydrographic Office (UKHO) to create the Launch Tide app, which is an iOS and Android app the UKHO designed in collaboration with the RNLI, to assist RNLI rescue staff with the provision of key tidal, weather, and sea state data, describing the current, and future conditions of their set stations and beaches.

Launch Tide allows RNLI staff to register an account, search for their relevant RNLI stations and beaches, either using a text search, or through utilising the device’s GPS sensory unit, to return a list of the nearest stations / beaches which are closest to the user’s device. The user can then view and interact with the key tidal, weather, and sea state conditions, based on their current set location.

Launch Tide is a JavaScript hybrid mobile app, which was built using the React Native framework. Interaction with mobile sensors is performed within the app, i.e. using interfaces to provide a bridge between the JavaScript application code, and the underlying native sensor APIs, exposed by the device’s operating system.

Conditions Screen

The conditions screen does what it says on the tin, it displays the following data, which provide an insight into the weather conditions at the user’s location, for the current time, and it provides a look-ahead feature, whereby if you swipe right, the data values will change to display the condition predictions in the following 3 hours, i.e. you’re looking ahead to what the conditions will be like in the next 3 hours – a potentially critical feature for ensuring the safety of the RNLI crew when on long rescues.

The data on the conditions screen is broken down into three cards:

Tide

The tide card shows the current height of the tide, the time until the next turn in the tide, i.e. high tide / low tide, as well as the expected height of the tide at the next scheduled turn.

The look ahead feature is enabled for this card, allowing the user to see what the tide state will be like in the next 3 hours.

Weather

The weather card shows the temperature, wind speed, and wind direction.

The look ahead feature is also enabled for this card, allowing the user to see what the weather will be like in the next 3 hours.

Sea State

The sea state card shows the current wave height, sea temperature, and wind direction in the area, essential data for an RNLI rescue mission!

Tide Predictions Screen

The tidal prediction screen allows the user to interact with UKHO’s tidal prediction API, to browse the tidal prediction data, based on their set current location.

The app allows users to choose a date, which defaults to the current time, this date is then passed to two of UKHO’s tidal prediction API functions – one which returns a set of information, detailing the next 4 changes in tide (high tide / low tide).

The second function from UKHO’s tidal prediction API returns a dynamically rendered PNG graph, this graph visualises the changes in tide in a graph, with the app allowing the user to pinch to zoom the image to get a close-up view of what the tide height prediction is for a given time.

Changing the date using the calendar icon at the top-right of this screen will trigger the screen to automatically update with UKHO’s tidal prediction API, and therefore allows the user to seamlessly view both current and future tide predictions for their current location.

Sicuro IMS Platform

Intelyse Platform

The Intelyse Platform uses the Google Maps API in a number of ways to display a variety of geospatial data on a map.

Using Polygons to display region boundaries

The application holds data for various regions. These regions represent areas of control, for example a region in Iraq may be controlled by government forces. We use the Google Maps API and its polygons to display this data on the map as you can see below. We use different colours of polygon to represent regions that are controlled by different forces, i e. government controlled regions are green and terrorist controlled regions are in black.

Sicuro IMS Platform

Incident Markers

The application stores many different types of incident data. These are defined by a type, e.g. air strike, government response, IED, etc. Each marker has its own custom icon which helps the user differentiate between types of incident.

We have recently implemented marker clustering for the Intelyse application, whereby when zoomed out on the map the the individual map markers will be replaced by larger icons that represent many individual icons, this will allow the map to render a lot more incident data smoothly when zoomed out.

Sicuro IMS Platform Incident Mapping

Draw Search

We used the polygon tool that the Google Maps API provides to construct a “Draw Search” facility, whereby the user can draw a polygon on the map, apply any additional search criteria using the search form and then perform a search.

This project is a great example of how we have used our experience with the Google Maps API to provide an innovative tool for users to search Intelyse geospatial data.

Sicuro IMS Platform Map Draw Search

Heatmaps

Another data visualisation we have developed for the Intelyse platform are heatmaps for incident data. These heatmaps provide a density map showing the degree to which areas have been affected by the incidents the user has searched for.  We implemented this using the Google Maps API heatmaps tool, giving each incident a weighting in the database, i.e. an air strike has a much higher weighting than a protest, so a small collection of air strikes will create a larger heatmap than a medium size collection of protests.

Sicuro IMS Platform Heatmaps

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.