Download sample applications
Download the source here: api_examples.zip
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)
More information about the Ultra-Low Bandwidth Application
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.
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.
css common styles
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 email@example.com. Shipping Guides Ltd are recognised industry specialists in publishing port and harbour information for your various port entry requirements. For more information on our products, please visit www.portinfo.co.uk.