marinekort-hello-world

Example and starter plugin for Marinekort.dk — an interactive digital nautical chart for Denmark.

This package demonstrates how to build and publish a plugin for Marinekort that interacts with the live map, GPS geolocation, UI slots, and persistent storage.

What this plugin does

1. Adds a Map Control Button: Mounts a circular button in the right toolbar with a wave icon (👋).
2. Adds Custom Map Layers: Injects a custom GeoJSON source and pulsating circle layer into the active MapLibre instance.
3. Adds a HUD Badge: Renders real-time GPS coordinates directly inside Marinekort's navigation HUD instrument box.
4. Tracks GPS: Subscribes to live position updates and updates the pin coordinates on the chart.
5. Namespaced Storage: Remembers button clicks and layer visibility in localStorage.

Installing in Marinekort

Users can install this plugin directly in the compiled application:

1. Open Indstillinger (Settings) on marinekort.dk.
2. Go to the Plugins tab.
3. In the text field, enter:

   marinekort-hello-world

4. Click Installer. The plugin activates immediately without reloading the page.

Developing & Publishing Your Own Plugin

1. Initialize

Create a folder and configure package.json with "type": "module":

{
  "name": "marinekort-my-plugin",
  "version": "1.0.0",
  "type": "module",
  "main": "src/index.js",
  "module": "src/index.js",
  "peerDependencies": {
    "react": ">=18.0.0"
  }
}

2. Implement the Plugin

Your plugin entry point should export a factory function returning a plugin object:

// src/index.js
import React from 'react';

export default function createMyPlugin(options = {}) {
    return {
        id: 'marinekort-my-plugin',
        name: 'My Custom Plugin',
        version: '1.0.0',
        description: 'Does something awesome on Marinekort',

        onInit(ctx) {
            console.log('Plugin initialized');
        },

        onMapReady(ctx) {
            // Mount a button in the right toolbar
            ctx.ui.registerComponent('right-controls', () => {
                return React.createElement('button', {
                    className: 'map-control-button',
                    onClick: () => ctx.ui.showToast('Hello from my plugin!')
                }, '⚓');
            });
        },

        onGpsUpdate(gpsState) {
            console.log('Current speed:', gpsState.speed);
        },

        onDestroy(ctx) {
            console.log('Plugin cleanup');
        }
    };
}

3. Publish to npm

npm publish --access public

Once published, anyone can install marinekort-my-plugin via Marinekort's Plugins settings tab!

License

MIT © Marinekort.dk