maplibre-gl-plugin-template 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Qiusheng Wu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,230 @@
+# MapLibre GL Plugin Template
+
+A template for creating MapLibre GL JS plugins with TypeScript and React support.
+
+[![npm version](https://img.shields.io/npm/v/maplibre-gl-plugin-template.svg)](https://www.npmjs.com/package/maplibre-gl-plugin-template)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- **TypeScript Support** - Full TypeScript support with type definitions
+- **React Integration** - React wrapper component and custom hooks
+- **IControl Implementation** - Implements MapLibre's IControl interface
+- **Modern Build Setup** - Vite-based build with dual ESM/CJS output
+- **Testing** - Vitest setup with React Testing Library
+- **CI/CD Ready** - GitHub Actions for npm publishing and GitHub Pages
+
+## Installation
+
+```bash
+npm install maplibre-gl-plugin-template
+```
+
+## Quick Start
+
+### Vanilla JavaScript/TypeScript
+
+```typescript
+import maplibregl from 'maplibre-gl';
+import { PluginControl } from 'maplibre-gl-plugin-template';
+import 'maplibre-gl-plugin-template/style.css';
+
+const map = new maplibregl.Map({
+  container: 'map',
+  style: 'https://demotiles.maplibre.org/style.json',
+  center: [0, 0],
+  zoom: 2,
+});
+
+map.on('load', () => {
+  const control = new PluginControl({
+    title: 'My Plugin',
+    collapsed: false,
+    panelWidth: 300,
+  });
+
+  map.addControl(control, 'top-right');
+});
+```
+
+### React
+
+```tsx
+import { useEffect, useRef, useState } from 'react';
+import maplibregl, { Map } from 'maplibre-gl';
+import { PluginControlReact, usePluginState } from 'maplibre-gl-plugin-template/react';
+import 'maplibre-gl-plugin-template/style.css';
+
+function App() {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const [map, setMap] = useState<Map | null>(null);
+  const { state, toggle } = usePluginState();
+
+  useEffect(() => {
+    if (!mapContainer.current) return;
+
+    const mapInstance = new maplibregl.Map({
+      container: mapContainer.current,
+      style: 'https://demotiles.maplibre.org/style.json',
+      center: [0, 0],
+      zoom: 2,
+    });
+
+    mapInstance.on('load', () => setMap(mapInstance));
+
+    return () => mapInstance.remove();
+  }, []);
+
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <div ref={mapContainer} style={{ width: '100%', height: '100%' }} />
+      {map && (
+        <PluginControlReact
+          map={map}
+          title="My Plugin"
+          collapsed={state.collapsed}
+          onStateChange={(newState) => console.log(newState)}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+## API
+
+### PluginControl
+
+The main control class implementing MapLibre's `IControl` interface.
+
+#### Constructor Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `collapsed` | `boolean` | `true` | Whether the panel starts collapsed (showing only the 29x29 toggle button) |
+| `position` | `string` | `'top-right'` | Control position on the map |
+| `title` | `string` | `'Plugin Control'` | Title displayed in the header |
+| `panelWidth` | `number` | `300` | Width of the dropdown panel in pixels |
+| `className` | `string` | `''` | Custom CSS class name |
+
+#### Methods
+
+- `toggle()` - Toggle the collapsed state
+- `expand()` - Expand the panel
+- `collapse()` - Collapse the panel
+- `getState()` - Get the current state
+- `setState(state)` - Update the state
+- `on(event, handler)` - Register an event handler
+- `off(event, handler)` - Remove an event handler
+- `getMap()` - Get the map instance
+- `getContainer()` - Get the container element
+
+#### Events
+
+- `collapse` - Fired when the panel is collapsed
+- `expand` - Fired when the panel is expanded
+- `statechange` - Fired when the state changes
+
+### PluginControlReact
+
+React wrapper component for `PluginControl`.
+
+#### Props
+
+All `PluginControl` options plus:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `map` | `Map` | MapLibre GL map instance (required) |
+| `onStateChange` | `function` | Callback fired when state changes |
+
+### usePluginState
+
+Custom React hook for managing plugin state.
+
+```typescript
+const {
+  state,        // Current state
+  setState,     // Update entire state
+  setCollapsed, // Set collapsed state
+  setPanelWidth,// Set panel width
+  setData,      // Set custom data
+  reset,        // Reset to initial state
+  toggle,       // Toggle collapsed state
+} = usePluginState(initialState);
+```
+
+## Utilities
+
+The package exports several utility functions:
+
+- `clamp(value, min, max)` - Clamp a value between min and max
+- `formatNumericValue(value, step)` - Format a number with appropriate decimals
+- `generateId(prefix?)` - Generate a unique ID
+- `debounce(fn, delay)` - Debounce a function
+- `throttle(fn, limit)` - Throttle a function
+- `classNames(classes)` - Build a class string from an object
+
+## Development
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/maplibre-gl-plugin-template.git
+cd maplibre-gl-plugin-template
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+### Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start development server |
+| `npm run build` | Build the library |
+| `npm run build:examples` | Build examples for deployment |
+| `npm run test` | Run tests |
+| `npm run test:ui` | Run tests with UI |
+| `npm run test:coverage` | Run tests with coverage |
+| `npm run lint` | Lint the code |
+| `npm run format` | Format the code |
+
+### Project Structure
+
+```
+maplibre-gl-plugin-template/
+├── src/
+│   ├── index.ts              # Main entry point
+│   ├── react.ts              # React entry point
+│   ├── index.css             # Root styles
+│   └── lib/
+│       ├── core/             # Core classes and types
+│       ├── hooks/            # React hooks
+│       ├── utils/            # Utility functions
+│       └── styles/           # Component styles
+├── tests/                    # Test files
+├── examples/                 # Example applications
+│   ├── basic/               # Vanilla JS example
+│   └── react/               # React example
+└── .github/workflows/        # CI/CD workflows
+```
+
+## Customization
+
+To use this template for your own plugin:
+
+1. Clone or fork this repository
+2. Update `package.json` with your plugin name and details
+3. Modify `src/lib/core/PluginControl.ts` to implement your plugin logic
+4. Update the styles in `src/lib/styles/plugin-control.css`
+5. Add custom utilities, hooks, or components as needed
+6. Update the README with your plugin's documentation
+
+## License
+
+MIT License - see [LICENSE](LICENSE) for details.

package/dist/PluginControl-B4juDAny.cjs

@@ -0,0 +1,223 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DEFAULT_OPTIONS = {
+  collapsed: true,
+  position: "top-right",
+  title: "Plugin Control",
+  panelWidth: 300,
+  className: ""
+};
+class PluginControl {
+  /**
+   * Creates a new PluginControl instance.
+   *
+   * @param options - Configuration options for the control
+   */
+  constructor(options) {
+    __publicField(this, "_map");
+    __publicField(this, "_container");
+    __publicField(this, "_panel");
+    __publicField(this, "_options");
+    __publicField(this, "_state");
+    __publicField(this, "_eventHandlers", new globalThis.Map());
+    this._options = { ...DEFAULT_OPTIONS, ...options };
+    this._state = {
+      collapsed: this._options.collapsed,
+      panelWidth: this._options.panelWidth,
+      data: {}
+    };
+  }
+  /**
+   * Called when the control is added to the map.
+   * Implements the IControl interface.
+   *
+   * @param map - The MapLibre GL map instance
+   * @returns The control's container element
+   */
+  onAdd(map) {
+    this._map = map;
+    this._container = this._createContainer();
+    this._panel = this._createPanel();
+    this._container.appendChild(this._panel);
+    if (!this._state.collapsed) {
+      this._panel.classList.add("expanded");
+    }
+    return this._container;
+  }
+  /**
+   * Called when the control is removed from the map.
+   * Implements the IControl interface.
+   */
+  onRemove() {
+    var _a, _b;
+    (_b = (_a = this._container) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(this._container);
+    this._map = void 0;
+    this._container = void 0;
+    this._panel = void 0;
+    this._eventHandlers.clear();
+  }
+  /**
+   * Gets the current state of the control.
+   *
+   * @returns The current plugin state
+   */
+  getState() {
+    return { ...this._state };
+  }
+  /**
+   * Updates the control state.
+   *
+   * @param newState - Partial state to merge with current state
+   */
+  setState(newState) {
+    this._state = { ...this._state, ...newState };
+    this._emit("statechange");
+  }
+  /**
+   * Toggles the collapsed state of the control panel.
+   */
+  toggle() {
+    this._state.collapsed = !this._state.collapsed;
+    if (this._panel) {
+      if (this._state.collapsed) {
+        this._panel.classList.remove("expanded");
+        this._emit("collapse");
+      } else {
+        this._panel.classList.add("expanded");
+        this._emit("expand");
+      }
+    }
+    this._emit("statechange");
+  }
+  /**
+   * Expands the control panel.
+   */
+  expand() {
+    if (this._state.collapsed) {
+      this.toggle();
+    }
+  }
+  /**
+   * Collapses the control panel.
+   */
+  collapse() {
+    if (!this._state.collapsed) {
+      this.toggle();
+    }
+  }
+  /**
+   * Registers an event handler.
+   *
+   * @param event - The event type to listen for
+   * @param handler - The callback function
+   */
+  on(event, handler) {
+    if (!this._eventHandlers.has(event)) {
+      this._eventHandlers.set(event, /* @__PURE__ */ new Set());
+    }
+    this._eventHandlers.get(event).add(handler);
+  }
+  /**
+   * Removes an event handler.
+   *
+   * @param event - The event type
+   * @param handler - The callback function to remove
+   */
+  off(event, handler) {
+    var _a;
+    (_a = this._eventHandlers.get(event)) == null ? void 0 : _a.delete(handler);
+  }
+  /**
+   * Gets the map instance.
+   *
+   * @returns The MapLibre GL map instance or undefined if not added to a map
+   */
+  getMap() {
+    return this._map;
+  }
+  /**
+   * Gets the control container element.
+   *
+   * @returns The container element or undefined if not added to a map
+   */
+  getContainer() {
+    return this._container;
+  }
+  /**
+   * Emits an event to all registered handlers.
+   *
+   * @param event - The event type to emit
+   */
+  _emit(event) {
+    const handlers = this._eventHandlers.get(event);
+    if (handlers) {
+      const eventData = { type: event, state: this.getState() };
+      handlers.forEach((handler) => handler(eventData));
+    }
+  }
+  /**
+   * Creates the main container element for the control.
+   * Contains a toggle button (29x29) matching navigation control size.
+   *
+   * @returns The container element
+   */
+  _createContainer() {
+    const container = document.createElement("div");
+    container.className = `maplibregl-ctrl maplibregl-ctrl-group plugin-control${this._options.className ? ` ${this._options.className}` : ""}`;
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "plugin-control-toggle";
+    toggleBtn.type = "button";
+    toggleBtn.setAttribute("aria-label", this._options.title);
+    toggleBtn.innerHTML = `
+      <span class="plugin-control-icon">
+        <svg viewBox="0 0 24 24" width="22" height="22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="3" width="7" height="7" rx="1"/>
+          <rect x="14" y="3" width="7" height="7" rx="1"/>
+          <rect x="3" y="14" width="7" height="7" rx="1"/>
+          <rect x="14" y="14" width="7" height="7" rx="1"/>
+        </svg>
+      </span>
+    `;
+    toggleBtn.addEventListener("click", () => this.toggle());
+    container.appendChild(toggleBtn);
+    return container;
+  }
+  /**
+   * Creates the panel element with header and content areas.
+   * Panel is positioned as a dropdown below the toggle button.
+   *
+   * @returns The panel element
+   */
+  _createPanel() {
+    const panel = document.createElement("div");
+    panel.className = "plugin-control-panel";
+    panel.style.width = `${this._options.panelWidth}px`;
+    const header = document.createElement("div");
+    header.className = "plugin-control-header";
+    const title = document.createElement("span");
+    title.className = "plugin-control-title";
+    title.textContent = this._options.title;
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "plugin-control-close";
+    closeBtn.type = "button";
+    closeBtn.setAttribute("aria-label", "Close panel");
+    closeBtn.innerHTML = "&times;";
+    closeBtn.addEventListener("click", () => this.collapse());
+    header.appendChild(title);
+    header.appendChild(closeBtn);
+    const content = document.createElement("div");
+    content.className = "plugin-control-content";
+    content.innerHTML = `
+      <p class="plugin-control-placeholder">
+        Add your custom plugin content here.
+      </p>
+    `;
+    panel.appendChild(header);
+    panel.appendChild(content);
+    return panel;
+  }
+}
+exports.PluginControl = PluginControl;
+//# sourceMappingURL=PluginControl-B4juDAny.cjs.map

package/dist/PluginControl-B4juDAny.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PluginControl-B4juDAny.cjs","sources":["../src/lib/core/PluginControl.ts"],"sourcesContent":["import type { IControl, Map as MapLibreMap } from 'maplibre-gl';\nimport type {\n  PluginControlOptions,\n  PluginState,\n  PluginControlEvent,\n  PluginControlEventHandler,\n} from './types';\n\n/**\n * Default options for the PluginControl\n */\nconst DEFAULT_OPTIONS: Required<PluginControlOptions> = {\n  collapsed: true,\n  position: 'top-right',\n  title: 'Plugin Control',\n  panelWidth: 300,\n  className: '',\n};\n\n/**\n * Event handlers map type\n */\ntype EventHandlersMap = globalThis.Map<PluginControlEvent, Set<PluginControlEventHandler>>;\n\n/**\n * A template MapLibre GL control that can be customized for various plugin needs.\n *\n * @example\n * ```typescript\n * const control = new PluginControl({\n *   title: 'My Custom Control',\n *   collapsed: false,\n *   panelWidth: 320,\n * });\n * map.addControl(control, 'top-right');\n * ```\n */\nexport class PluginControl implements IControl {\n  private _map?: MapLibreMap;\n  private _container?: HTMLElement;\n  private _panel?: HTMLElement;\n  private _options: Required<PluginControlOptions>;\n  private _state: PluginState;\n  private _eventHandlers: EventHandlersMap = new globalThis.Map();\n\n  /**\n   * Creates a new PluginControl instance.\n   *\n   * @param options - Configuration options for the control\n   */\n  constructor(options?: Partial<PluginControlOptions>) {\n    this._options = { ...DEFAULT_OPTIONS, ...options };\n    this._state = {\n      collapsed: this._options.collapsed,\n      panelWidth: this._options.panelWidth,\n      data: {},\n    };\n  }\n\n  /**\n   * Called when the control is added to the map.\n   * Implements the IControl interface.\n   *\n   * @param map - The MapLibre GL map instance\n   * @returns The control's container element\n   */\n  onAdd(map: MapLibreMap): HTMLElement {\n    this._map = map;\n    this._container = this._createContainer();\n    this._panel = this._createPanel();\n    this._container.appendChild(this._panel);\n\n    // Set initial panel state\n    if (!this._state.collapsed) {\n      this._panel.classList.add('expanded');\n    }\n\n    return this._container;\n  }\n\n  /**\n   * Called when the control is removed from the map.\n   * Implements the IControl interface.\n   */\n  onRemove(): void {\n    this._container?.parentNode?.removeChild(this._container);\n    this._map = undefined;\n    this._container = undefined;\n    this._panel = undefined;\n    this._eventHandlers.clear();\n  }\n\n  /**\n   * Gets the current state of the control.\n   *\n   * @returns The current plugin state\n   */\n  getState(): PluginState {\n    return { ...this._state };\n  }\n\n  /**\n   * Updates the control state.\n   *\n   * @param newState - Partial state to merge with current state\n   */\n  setState(newState: Partial<PluginState>): void {\n    this._state = { ...this._state, ...newState };\n    this._emit('statechange');\n  }\n\n  /**\n   * Toggles the collapsed state of the control panel.\n   */\n  toggle(): void {\n    this._state.collapsed = !this._state.collapsed;\n\n    if (this._panel) {\n      if (this._state.collapsed) {\n        this._panel.classList.remove('expanded');\n        this._emit('collapse');\n      } else {\n        this._panel.classList.add('expanded');\n        this._emit('expand');\n      }\n    }\n\n    this._emit('statechange');\n  }\n\n  /**\n   * Expands the control panel.\n   */\n  expand(): void {\n    if (this._state.collapsed) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Collapses the control panel.\n   */\n  collapse(): void {\n    if (!this._state.collapsed) {\n      this.toggle();\n    }\n  }\n\n  /**\n   * Registers an event handler.\n   *\n   * @param event - The event type to listen for\n   * @param handler - The callback function\n   */\n  on(event: PluginControlEvent, handler: PluginControlEventHandler): void {\n    if (!this._eventHandlers.has(event)) {\n      this._eventHandlers.set(event, new Set());\n    }\n    this._eventHandlers.get(event)!.add(handler);\n  }\n\n  /**\n   * Removes an event handler.\n   *\n   * @param event - The event type\n   * @param handler - The callback function to remove\n   */\n  off(event: PluginControlEvent, handler: PluginControlEventHandler): void {\n    this._eventHandlers.get(event)?.delete(handler);\n  }\n\n  /**\n   * Gets the map instance.\n   *\n   * @returns The MapLibre GL map instance or undefined if not added to a map\n   */\n  getMap(): MapLibreMap | undefined {\n    return this._map;\n  }\n\n  /**\n   * Gets the control container element.\n   *\n   * @returns The container element or undefined if not added to a map\n   */\n  getContainer(): HTMLElement | undefined {\n    return this._container;\n  }\n\n  /**\n   * Emits an event to all registered handlers.\n   *\n   * @param event - The event type to emit\n   */\n  private _emit(event: PluginControlEvent): void {\n    const handlers = this._eventHandlers.get(event);\n    if (handlers) {\n      const eventData = { type: event, state: this.getState() };\n      handlers.forEach((handler) => handler(eventData));\n    }\n  }\n\n  /**\n   * Creates the main container element for the control.\n   * Contains a toggle button (29x29) matching navigation control size.\n   *\n   * @returns The container element\n   */\n  private _createContainer(): HTMLElement {\n    const container = document.createElement('div');\n    container.className = `maplibregl-ctrl maplibregl-ctrl-group plugin-control${\n      this._options.className ? ` ${this._options.className}` : ''\n    }`;\n\n    // Create toggle button (29x29 to match navigation control)\n    const toggleBtn = document.createElement('button');\n    toggleBtn.className = 'plugin-control-toggle';\n    toggleBtn.type = 'button';\n    toggleBtn.setAttribute('aria-label', this._options.title);\n    toggleBtn.innerHTML = `\n      <span class=\"plugin-control-icon\">\n        <svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n          <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/>\n          <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n          <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>\n        </svg>\n      </span>\n    `;\n    toggleBtn.addEventListener('click', () => this.toggle());\n\n    container.appendChild(toggleBtn);\n\n    return container;\n  }\n\n  /**\n   * Creates the panel element with header and content areas.\n   * Panel is positioned as a dropdown below the toggle button.\n   *\n   * @returns The panel element\n   */\n  private _createPanel(): HTMLElement {\n    const panel = document.createElement('div');\n    panel.className = 'plugin-control-panel';\n    panel.style.width = `${this._options.panelWidth}px`;\n\n    // Create header with title and close button\n    const header = document.createElement('div');\n    header.className = 'plugin-control-header';\n\n    const title = document.createElement('span');\n    title.className = 'plugin-control-title';\n    title.textContent = this._options.title;\n\n    const closeBtn = document.createElement('button');\n    closeBtn.className = 'plugin-control-close';\n    closeBtn.type = 'button';\n    closeBtn.setAttribute('aria-label', 'Close panel');\n    closeBtn.innerHTML = '&times;';\n    closeBtn.addEventListener('click', () => this.collapse());\n\n    header.appendChild(title);\n    header.appendChild(closeBtn);\n\n    // Create content area\n    const content = document.createElement('div');\n    content.className = 'plugin-control-content';\n    content.innerHTML = `\n      <p class=\"plugin-control-placeholder\">\n        Add your custom plugin content here.\n      </p>\n    `;\n\n    panel.appendChild(header);\n    panel.appendChild(content);\n\n    return panel;\n  }\n}\n"],"names":[],"mappings":"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"}