TCA Cruise Trajectory Mapping

Create a reliable, reusable way to turn cruise reports and expedition datasets from different TCA teams into accessible data products.

Public outcomes

The project has two public outcomes:

1. Publish approved cruise and expedition data products through CIOOS.
2. Provide an interactive map interface on the OFI website showing cruise trajectories and expedition stations.

Documentation

Project documentation

• Project purpose
• Cruise data workflows
• Cruise ship report guidelines

Specifications

• Specification index
• Map application technology frontend stack
• GeoJSON public-data design
• Map display specification
• Results table specification
• Popup window specification
• Filter bar specification
• Recommended project structure
• Web Component integration and visual design

Run the map locally

npm install
npm run dev

The prototype loads data/trajectories.geojson and data/stations.geojson as separate MapLibre sources. Use npm run build to type-check the application and create both the static demo and reusable Web Component in dist/.

Use the Web Components

The library registers a map and a separately placeable results table. Install the package from npm:

npm install @ofi-data-team/tca-cruise-trajectory-mapping

import '@ofi-data-team/tca-cruise-trajectory-mapping';

Webflow can load an exact published version through jsDelivr:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@ofi-data-team/[email protected]/dist/tca-cruise-map.js">
</script>

<tca-cruise-map
  sync-id="main-cruise-explorer"
  style="display: block; width: 100%; height: 700px;">
</tca-cruise-map>

<!-- This can appear elsewhere on the page. -->
<tca-cruise-table sync-id="main-cruise-explorer"></tca-cruise-table>

For the full component API, distribution constraints, custom data sources, Webflow setup, theming contract, and route-colour decisions, see the Web Component integration and visual design specification.

Release the package

Publishing a GitHub Release automatically publishes the matching package version to npm. Before creating the release:

1. Update version in package.json and package-lock.json with npm version <patch|minor|major> --no-git-tag-version.
2. Commit and push the version change.
3. Create a GitHub Release whose tag exactly matches the package version, such as v0.2.0.

The GitHub Actions workflow rejects mismatched release tags. npm also rejects a version that has already been published.