Download Sample Applications

Download sample applications

Simple Javascript applications.

These applications retrieve basic information from the Findaport API using Javascript and jQuery. They will require you to input your API key.

• Simple search
• Brief Port Information
• Weather Information
• Error Handling

Download the source here:   api_examples.zip 

Ultra Low Bandwidth Javascript application, suitable for shipboard use

The Ultra Low Bandwidth Application (ULBA) is a sample application written in Javascript to reduce network traffic as far as possible, to minimise bandwidth usage. With a valid API key, it provides access to all parts of the Port data held on Findaport.com. It can be downloaded here: ulba.zip (155kB)

Other resources

We have provided some resources that are used on findaport.com to identify ports, countries and weather

• country flags - country <locode> field
• port markers - port <symbol> field
• weather icons - weather <weather_type> field.

These can be downloaded here:   images.zip (1.7MB)

POSTMAN Collection

Postman is an API development tool that you may find helpful. We have a Postman Collection to allow users to test and prototype their use of the API.  FindaportAPI.postman_collection.json.zip

More information about the Ultra-Low Bandwidth Application

Overview

The Ultra-Low Bandwidth Application (ULBA) is a demonstration application which shows findaport API integration designed with data traffic efficiency in mind. In addition to the usual browser's cache, ULBA uses localStorage (storage.js, ULBA.localCache.js) to cache CSS, HTML, JS files
(Internet Explorer E 7,8; FireFox browsers) and the server's response (Internet Explorer 8, FireFox), rather than retrieve them every time from the server.

ULBA gives you a search page from which to search for any ports, using various search criteria. It accesses the API to execute the search and to return any results.

From the list of search results, you can select the port in which you are interested.

When you click on a port's name, the port's information will be summarised in a contents page, showing what information is available, including:

• Summary information
• Detailed information
• Map location and Lat/Long position
• Plans and photographs
• ACE reports

Click on a link to access the information.

Tracing the information in the Javascript Debugger (IE), Firebug (Firefox) or Google Chrome debugger will allow you to see the API calls that are made and the data that is returned.

How to run the application

ULBA interacts with the API that resides on findaport.com server. The ULBA package will run from the local computer, but can also be run from a  local web server, such as XAMPP.
The source code is provided for reference.

To run the application you need to register a user on www.findaport.com and obtain an API key.

Folder structure

css               common styles
images       images
js                  commons scripts, pageController, localStorage controller
js/libs         3rd party libraries
pages          all pages' files should be here. File name syntax  - filename.(css|js|html)
pages/html    pages' HTML
pages/css       pages' CSS
pages/js          pages' JS

Brief description of js files

Findaport.pageController.js - main application's file which manages loading resources, save and restore resources
Findaport.API.js - library with findaport API commands
Findaport.localCache.js - initialize localStorage
Findaport.config.js - configuration of application. Such as API URL and test API key
countries.js - list of countries
location.js - list of locations
common.js - common utilities
pages/js/template.js - description/example of common page architecture

How to add a new page

1. Copy the pages/css/template.css, pages/html/template.css, pages/js/template.js and rename these files.

Note that all files should have the same name (e.g. pages/html/reports.html, pages/js/reports.js, pages/css/reports.css)

2. Add new page into pageName array - Findaport.pageController.js.

3. In new css and js files replace all 'template' entries to newFileName (e.g. in reports.css DIV.template -> DIV.reports)

==> Next: Write and deploy your application

 

If you would like to find out more about Findaport.com or our Findaport API service, please contact us at portinformation@oneocean.com.