TranSECT Research Map

A focused, full-viewport MapLibre map of TranSECT research locations. The map is packaged as an embeddable <transect-research-map> Web Component and uses the visual language established by the TCA cruise trajectory map.

Install

npm install @ofi-data-team/transect-research-map

Import the component and its host-page styles:

import '@ofi-data-team/transect-research-map';
import '@ofi-data-team/transect-research-map/style.css';

The package includes its runtime datasets under data/. Copy that directory to a location served by your application, then point data-src at the copied JSON file.

Develop

npm install
npm run dev

Validate and test

npm run validate:data
npm run test:unit
npm run test:e2e

The browser uses structured JSON and referenced GeoJSON files from data/. scripts/validate-data.ts checks the dataset before it is displayed.

Download Native Land GeoJSON

Create a free Native Land Digital API key, read and accept its Indigenous Data Sovereignty Treaty, and save the key in .env at the project root:

NATIVE_LAND_API_KEY=your-key

The downloader reads this file automatically. A value exported in the shell takes precedence. Run an area or point download without putting the key on the command line:

npm run download:native-land -- \
  --position "44.6488,-63.5752" \
  --output data/geojson/halifax-native-land.geojson

For an area rather than a point, pass an existing Polygon, MultiPolygon, Feature, or FeatureCollection. The script sends it to Native Land Digital's polygon-intersection endpoint:

npm run download:native-land -- \
  --polygon data/geojson/annapolis-valley.geojson \
  --output data/geojson/annapolis-valley-native-land.geojson

Use --name <slug> for a specific nation or --all for a complete category. Run npm run download:native-land -- --help for every option. The output keeps the API geometry unchanged and adds Native Land Digital attribution, a non-legal-boundary disclaimer, and the download timestamp. Do not commit or share the API key. Native Land Digital's current terms limit API use and require attribution; review the treaty before storing or distributing downloaded data.

Embed

After importing the package, add the component:

<transect-research-map data-src="/TranSECT-mapDb.mock.json"></transect-research-map>

Give the component an explicit height through CSS. Relative GeoJSON references are resolved against data-src. During development and builds, Vite serves the contents of data/ from the site root.

Configuration

Static map settings live in src/config.ts. Edit MAP_CONFIG.lines.location to change the normal boundary color, width, or opacity, and MAP_CONFIG.lines.selected to change the selected boundary. The same file contains the default data source, basemap, viewport, zoom, padding, and interaction timing values.

The interface defaults to English and includes an EN/FR switch in the top-left corner. Set lang="fr" on the component when it should initially render in French:

<transect-research-map lang="fr" data-src="/TranSECT-mapDb.mock.json"></transect-research-map>

License

MIT