@emuanalytics/flow-rdf-core 4.0.11 → 4.0.12

package/dist/lib/map/plugins/index.mjs

@@ -8,4 +8,3 @@ export { PluginManager } from './plugin-manager.mjs';
 export { PopupPlugin } from './popup.plugin.mjs';
 export { SelectionEvent } from './selection/selection.events.mjs';
 export { SelectionPlugin } from './selection/selection.plugin.mjs';
-export { UrlSyncPlugin } from './url-sync.plugin.mjs';

package/dist/lib/map/plugins/keyboard-shortcut-manager.mjs

@@ -91,6 +91,9 @@ class KeyboardShortcutManager {
   removeFromListeners(listenerToRemove) {
     this.listeners = this.listeners.filter((listener) => listener !== listenerToRemove);
   }
+  /**
+   * Converts a key definition string into a normalized key definition.
+   */
   normalizeKeyDefinition(keyDef) {
     const parts = keyDef.split("+");
     const ev = {
@@ -102,6 +105,9 @@ class KeyboardShortcutManager {
     };
     return this.keyDefinitionFromEvent(ev);
   }
+  /**
+   * Converts a keyboard event into a key definition string.
+   */
   keyDefinitionFromEvent(ev) {
     let keyDef = "";
     if (ev.ctrlKey)

package/dist/lib/map/plugins/map-plugin-base.mjs

@@ -7,6 +7,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class MapPluginBase extends EventEmitter {
+  /** Constructs an plugin instance. Note this this is called internally when registering a plugin. */
   constructor(pluginManager, options) {
     super();
     __publicField(this, "_pluginManager");
@@ -14,9 +15,13 @@ class MapPluginBase extends EventEmitter {
     this._pluginManager = pluginManager;
     this.options = options ?? {};
   }
+  /**
+   * The map instance associated with this plugin.
+   */
   get map() {
     return this._pluginManager.map;
   }
+  /** The {@link PluginManager} that is managing this plugin. */
   get pluginManager() {
     return this._pluginManager;
   }

package/dist/lib/map/plugins/plugin-manager.mjs

@@ -12,6 +12,10 @@ var __publicField = (obj, key, value) => {
 };
 const debug = Debug("flow:map-plugin-manager");
 class PluginManager {
+  /**
+   * Constructs a plugin manager for the provided FlowCoreMap instance. Note that plugin manager construction is performed automatically when a
+   * map is created.
+   */
   constructor(map) {
     __publicField(this, "_map");
     __publicField(this, "_keyboardShortcutManager", new KeyboardShortcutManager());
@@ -28,9 +32,27 @@ class PluginManager {
       }
     });
   }
+  /** Returns the parent FlowCoreMap instance. */
   get map() {
     return this._map;
   }
+  /**
+     * Register a plugin for use with a map. This will create an instance of the plugin and call its `initialize` method.
+     *
+     * Note that this is typically called using the `usePlugin` method of a {@link FlowCoreMap} instance.
+     *
+     * @example
+     * Register the HoverEffectPlugin for use with a map:
+  ```js
+    import { HoverEffectPlugin } from '@emuanalytics/flow-rdf-core/plugins';
+    map.usePlugin(HoverEffectPlugin);
+  ```
+     *
+     * @param plugin The plugin constructor to register. This must be a class that extends {@link MapPluginBase}
+     * @param options Plugin-specific options (if any) to pass to the plugin constructor
+     * @typeParam T Type of the plugin being registered
+     * @returns The registered plugin instance
+     */
   usePlugin(plugin, options) {
     if (this._plugins.has(plugin)) {
       const oldInstance = this._plugins.get(plugin);
@@ -45,6 +67,22 @@ class PluginManager {
       pluginInstance.initialize();
     return pluginInstance;
   }
+  /**
+     * Retrieve a plugin previously registered with a map. This is necessary to access plugin-specific methods or properties.
+     *
+     * Note that this is typically called using the {@link FlowCoreMap.getPlugin} method.
+     *
+     * @example
+     * Retrieve the SelectionPlugin and clear all selections for a specified map data source:
+  ```js
+    const selectionPlugin = map.getPlugin(SelectionPlugin);
+    selectionPlugin.selectFeatures('data-source', []);
+  ```
+     *
+     * @param plugin The plugin to retrieve (identified by the plugin constructor or name)
+     * @typeParam T Type of the plugin being retrieved
+     * @returns The registered plugin instance
+     */
   getPlugin(pluginOrName) {
     let name;
     let pluginInstance;
@@ -60,6 +98,13 @@ class PluginManager {
     }
     return pluginInstance;
   }
+  /**
+   * Unregister the specified plugin.
+   *
+   * @param pluginOrName The plugin to unregister (identified by the plugin constructor or name)
+   * @returns The plugin manager instance to allow method chaining
+   * @typeParam T Type of the plugin being unregistered
+   */
   removePlugin(pluginOrName) {
     let pluginConstructor;
     let pluginInstance;
@@ -78,6 +123,11 @@ class PluginManager {
       this._plugins.delete(pluginConstructor);
     return this;
   }
+  /**
+   * Unregister all plugins.
+   *
+   * @returns The plugin manager instance to allow method chaining
+   */
   removeAllPlugins() {
     this._plugins.forEach((plugin) => {
       if (plugin.destroy)
@@ -86,19 +136,58 @@ class PluginManager {
     this._plugins.clear();
     return this;
   }
+  /**
+   * Mark the specified plugin as 'exclusive'. This disables other non-exclusive plugins until the {@link removeExclusivePlugin} method is called.
+   *
+   * This is used by the annotation plugin to disable map selection and hover effects when annotation features are being drawn by the user.
+   */
   setExclusivePlugin(plugin) {
     this._exclusivePlugins.add(plugin);
     this.forwardSetExclusivePlugin();
     return this;
   }
+  /**
+   * Remove the 'exclusive' flag from the specified plugin. This allows other non-exclusive plugins to receive events again.
+   */
   removeExclusivePlugin(plugin) {
     this._exclusivePlugins.delete(plugin);
     this.forwardSetExclusivePlugin();
     return this;
   }
+  /**
+     * This method is called by plugins to register keyboard shortcuts with the {@link KeyboardShortcutManager}.
+     *
+     * @example
+     * Register keyboard shortcuts from a map plugin:
+   ```js
+    // Add shortcuts
+    this.removeShortcuts = this.pluginManager.addKeyboardShortcuts({
+       'Enter,Escape': () => this.commit(),
+       KeyP: () => this.createFeature('Polygon'),
+       KeyL: () => this.createFeature('LineString'),
+       KeyM: () => this.createFeature('Point'),
+       KeyC: () => this.createFeature('Circle')
+    });
+  
+  ...
+  
+  // Remove shortcuts
+  this.removeShortcuts();
+  ```
+     *
+     * @param keyboardShortcuts Key bindings to register
+     * @param priority Key binding priority
+     * @returns Function that can be called to remove the keyboard shortcuts
+     */
   addKeyboardShortcuts(keyboardShortcuts, priority = 0) {
     return this._keyboardShortcutManager.addListener(keyboardShortcuts, priority);
   }
+  /**
+   * This method is called internally to forward map events to active plugin handlers.
+   *
+   * @param eventName The event to forward
+   * @param args Event arguments
+   */
   forwardEvent(eventName, ...args) {
     const handlerName = `handle${capitalize(eventName)}`;
     this._plugins.forEach((plugin) => {
@@ -110,6 +199,11 @@ class PluginManager {
       }
     });
   }
+  /**
+   * This method is called internally to forward map style change events to active plugin handlers.
+   *
+   * @param eventName The event to forward
+   */
   forwardStyleChangeEvent(event) {
     this._plugins.forEach((plugin) => {
       if (this._exclusivePlugins.size && !this._exclusivePlugins.has(plugin))
@@ -123,6 +217,9 @@ class PluginManager {
     });
     return event.newStyle;
   }
+  /**
+   * This method is called internally to forward exclusivity changes to registered plugins.
+   */
   forwardSetExclusivePlugin() {
     this._plugins.forEach((plugin) => {
       if (plugin.handleSetExclusivePlugin) {

package/dist/lib/map/plugins/popup.plugin.mjs

@@ -11,6 +11,12 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class PopupPlugin extends MapPluginBase {
+  /**
+   * Constructs a new PopupPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
+   * using {@link FlowCoreMap.usePlugin} method.
+   *
+   * @param pluginManager The plugin manager instance associated with the map
+   */
   constructor(pluginManager) {
     super(pluginManager);
     __publicField(this, "_popupTemplates", /* @__PURE__ */ new Map());
@@ -37,10 +43,16 @@ class PopupPlugin extends MapPluginBase {
     }
     return popup;
   }
+  /**
+   * Closes all open popups.
+   */
   closeAllPopups() {
     this._popups.forEach((popup) => popup.close());
     this._popups.clear();
   }
+  /**
+   * Closes open popups for the specified {@link MapDataSource}s.
+   */
   closePopupsForSources(sources) {
     sources = ensureArray(sources);
     this._popups.forEach((popup) => {

package/dist/lib/map/plugins/selection/selection.events.mjs

@@ -9,8 +9,11 @@ var __publicField = (obj, key, value) => {
 class SelectionEvent extends MapEvent {
   constructor(type, map, sourceIdentifier, features) {
     super(type, map);
+    /** Map data source ID */
     __publicField(this, "source");
+    /** Map data source layer ID */
     __publicField(this, "sourceLayer");
+    /** Array of selected feature IDs */
     __publicField(this, "features");
     this.source = sourceIdentifier.source;
     this.sourceLayer = sourceIdentifier.sourceLayer;

package/dist/lib/map/plugins/selection/selection.plugin.mjs

@@ -12,12 +12,23 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class SelectionPlugin extends MapPluginBase {
+  /**
+   * Constructs a new SelectionPlugin instance. This is called automatically when the plugin is added to a {@link FlowCoreMap} instance
+   * using {@link FlowCoreMap.usePlugin} method.
+   *
+   * @param pluginManager The plugin manager instance associated with the map
+   */
   constructor(pluginManager) {
     super(pluginManager);
     __publicField(this, "_sourceSelections", /* @__PURE__ */ new Map());
     __publicField(this, "_enablePopups", true);
     __publicField(this, "name", "SelectionPlugin");
   }
+  /**
+   * Clears selection for the specified map data source.
+   *
+   * @param source Map data source ID
+   */
   clearSelection(source) {
     const sourceSelection = this._sourceSelections.get(source);
     if (!sourceSelection) {
@@ -29,6 +40,12 @@ class SelectionPlugin extends MapPluginBase {
         sourceSelection.updateSelection(/* @__PURE__ */ new Set());
     }
   }
+  /**
+   * Deselect the specified feature or features.
+   *
+   * @param source Map data source ID
+   * @param features feature ID or array of feature IDs to deselect
+   */
   deselectFeatures(source, features) {
     const sourceSelection = this._sourceSelections.get(source);
     if (!sourceSelection) {
@@ -43,16 +60,30 @@ class SelectionPlugin extends MapPluginBase {
         sourceSelection.updateSelection(currentSelection);
     }
   }
+  /**
+   * @internal
+   */
   destroy() {
     this._sourceSelections.forEach((sel) => sel.destroy());
     this._sourceSelections.clear();
   }
+  /**
+   * Disable selection for the specified map data source.
+   *
+   * @param source Map data source ID
+   */
   disableSelection(source) {
     if (this._sourceSelections.has(source)) {
       this._sourceSelections.get(source).destroy();
       this._sourceSelections.delete(source);
     }
   }
+  /**
+   * Enable selection support for the specified map data source.
+   *
+   * @param source Map data source ID
+   * @param options Selection options
+   */
   enableSelection(source, options) {
     if (options.popup) {
       try {
@@ -64,12 +95,18 @@ class SelectionPlugin extends MapPluginBase {
     this.disableSelection(source);
     this._sourceSelections.set(source, new SourceSelection(this, source, options));
   }
+  /**
+   * @internal
+   */
   handleBeforeSourceRemoved(event) {
     if (this._sourceSelections.has(event.source)) {
       this._sourceSelections.get(event.source)?.destroy();
       this._sourceSelections.delete(event.source);
     }
   }
+  /**
+   * @internal
+   */
   handleClick(event) {
     const multiSelect = event.originalEvent.shiftKey || event.originalEvent.altKey || event.originalEvent.metaKey;
     const clickedFeature = event.features[0];
@@ -79,7 +116,17 @@ class SelectionPlugin extends MapPluginBase {
       (sel) => sel.handleClick(event.lngLat, clickedFeature, selectionOptions, multiSelect, this._enablePopups)
     );
   }
-  selectFeatures(source, features) {
+  /**
+   * Select the specified feature or features.
+   *
+   * Use this method to programmatically select features on a map data source. This will update the selection state and trigger display of
+   * any associated popups if configured.
+   *
+   * @param source Map data source ID
+   * @param features feature ID or array of feature IDs to select
+   * @param showPopups Show popups for the selected features. Defaults to `true`.
+   */
+  selectFeatures(source, features, showPopups = true) {
     const sourceSelection = this._sourceSelections.get(source);
     if (!sourceSelection) {
       return;
@@ -93,11 +140,11 @@ class SelectionPlugin extends MapPluginBase {
     switch (sourceSelection.options.mode) {
       case "single":
         currentSelection = /* @__PURE__ */ new Set([features[0]]);
-        sourceSelection.updateSelection(currentSelection);
+        sourceSelection.updateSelection(currentSelection, showPopups);
         break;
       case "multi":
         features.forEach((f) => currentSelection.add(f));
-        sourceSelection.updateSelection(currentSelection);
+        sourceSelection.updateSelection(currentSelection, showPopups);
         break;
     }
     if (sourceSelection.selectedFeatureIds.size && isStringFull(sourceSelection.options.group)) {
@@ -108,6 +155,12 @@ class SelectionPlugin extends MapPluginBase {
       });
     }
   }
+  /**
+   * Gets the selected feature IDs for the specified map data source.
+   *
+   * @param source map data source ID
+   * @returns Array of selected feature IDs
+   */
   selectedFeatureIds(source) {
     const sourceSelection = this._sourceSelections.get(source);
     if (!sourceSelection) {
@@ -115,6 +168,15 @@ class SelectionPlugin extends MapPluginBase {
     }
     return Array.from(sourceSelection.selectedFeatureIds);
   }
+  /**
+   * Returns a {@link MapFeatureStream} of selected features for the specified map data source.
+   *
+   * Subscribe to the stream to receive updates when the selection state changes and receive full feature property data
+   * from the map.
+   *
+   * @param source Map data source ID
+   * @returns {@link MapFeatureStream} of selected features
+   */
   selectedFeatureStream(source) {
     const sourceSelection = this._sourceSelections.get(source);
     if (!sourceSelection) {
@@ -122,9 +184,18 @@ class SelectionPlugin extends MapPluginBase {
     }
     return sourceSelection.selectedFeatureStream;
   }
-  enablePopups(enabled = true) {
+  /**
+   * Enable display of popups when a feature is clicked and an associated popup has been registered with the map data source.
+   * See {@link PopupPlugin} for more details of how to define and register popups.
+   *
+   * Note that popups are enabled by default.
+   */
+  enablePopups() {
     this._enablePopups = true;
   }
+  /**
+   * Disable display of popups when a feature is clicked. This will also close any currently open popups.
+   */
   disablePopups() {
     if (this._enablePopups) {
       this.map.getPlugin(PopupPlugin).closeAllPopups();

package/dist/lib/map/plugins/selection/source-selection.mjs

@@ -1,3 +1,5 @@
+import turfCentroid from '@turf/centroid';
+import Debug from 'debug';
 import { assert } from '../../../utils/assert.mjs';
 import { ensureArray } from '../../../utils/ensure-array.mjs';
 import { isStringFull } from '../../../utils/type-checks.mjs';
@@ -11,7 +13,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+const debug = Debug("flow:SourceSelection");
 class SourceSelection {
+  /** Constructs a SourceSelection to handle selection for the specified map data source. */
   constructor(plugin, source, options) {
     __publicField(this, "_featureStream");
     __publicField(this, "_map");
@@ -21,6 +25,8 @@ class SourceSelection {
     __publicField(this, "_selectedFeatureIds", /* @__PURE__ */ new Set());
     __publicField(this, "_sourceId");
     __publicField(this, "_stateSubscription", null);
+    __publicField(this, "_featuresSubscription", null);
+    __publicField(this, "_pendingPopups", []);
     this._plugin = plugin;
     this._map = plugin.map;
     this._options = options;
@@ -34,10 +40,15 @@ class SourceSelection {
       sourceLayer: options.sourceLayer,
       featureIds: []
     });
+    if (this._options.popup) {
+      this._featuresSubscription = this._featureStream.subscribe(() => {
+        this.showPendingPopups();
+      });
+    }
     if (options.selectionState) {
       this._stateSubscription = this._map.context.state.toStream(options.selectionState, true).subscribe((val) => {
         val = new Set(ensureArray(val));
-        this.updateSelection(val);
+        this.updateSelection(val, true);
       });
     }
   }
@@ -50,12 +61,15 @@ class SourceSelection {
   get selectedFeatureStream() {
     return this._featureStream;
   }
+  /** Plugin destroy handler */
   destroy() {
     this._popups.forEach((popup) => popup.close());
     this._stateSubscription?.unsubscribe();
+    this._featuresSubscription?.unsubscribe();
     this._selectedFeatureIds = /* @__PURE__ */ new Set();
     this.updateMapSelectionState();
   }
+  /** Plugin click handler */
   handleClick(lngLat, feature, selectionOptions, multiSelect, enablePopups) {
     if (this._options.mode === "none") {
       return;
@@ -111,7 +125,13 @@ class SourceSelection {
       }
     }
   }
-  updateSelection(featureIds) {
+  /** Update the current selection. */
+  updateSelection(featureIds, showPopups = false) {
+    if (showPopups) {
+      this._pendingPopups = Array.from(featureIds);
+    } else {
+      this._pendingPopups = [];
+    }
     if (!this.areSetsEqual(featureIds, this._selectedFeatureIds)) {
       this._selectedFeatureIds = featureIds;
       this.updateMapSelectionState();
@@ -131,16 +151,19 @@ class SourceSelection {
       );
       this._plugin.emit(event.type, event);
     }
+    this.showPendingPopups();
   }
   areSetsEqual(a, b) {
     return a.size === b.size && [...a].every((value) => b.has(value));
   }
+  /** Sync map feature state with current selection. */
   updateMapSelectionState() {
     this._map.removeFeatureState(this._sourceId, "selected", false);
     this._selectedFeatureIds.forEach(
       (id) => this._map.setFeatureState({ ...this._sourceId, id }, { selected: true }, false)
     );
   }
+  /** Sync bound reactive property with current selection. */
   updateStateStore() {
     if (isStringFull(this._options.selectionState)) {
       const selectedIds = Array.from(this._selectedFeatureIds);
@@ -151,6 +174,31 @@ class SourceSelection {
       }
     }
   }
+  /**
+   * Supports displaying popups after selection has been set programmatically.
+   *
+   * Opening a selected popup is deferred until the next feature stream update so that
+   * feature geometry is available to calculate the popup position.
+   *
+   * @param features Selected features from the feature stream.
+   */
+  showPendingPopups() {
+    for (const feature of Object.values(this._featureStream.featureData)) {
+      assert(isFeatureWithId(feature));
+      if (this._pendingPopups.includes(feature.id) && !this._popups.has(feature.id) && this._options.popup) {
+        debug(`Showing pending popup for source ${this._sourceId.source}`, feature);
+        const lngLat = turfCentroid(feature.geometry).geometry.coordinates;
+        const popup = this._map.getPlugin(PopupPlugin).openPopup(this._options.popup, lngLat, feature);
+        if (popup) {
+          popup.on("closed", () => {
+            this._popups.delete(feature.id);
+          });
+          this._popups.set(feature.id, popup);
+        }
+      }
+      this._pendingPopups = this._pendingPopups.filter((id) => id !== feature.id);
+    }
+  }
 }
 
 export { SourceSelection };

package/dist/lib/map/support/map-events.mjs

@@ -5,14 +5,25 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 class MapEvent {
+  /**
+   * Constructs a map event.
+   *
+   * @param type Event type
+   * @param map Map instance that generated the event
+   * @param originalEvent Original MapLibre event that triggered the event
+   */
   constructor(type, map, originalEvent) {
+    /** Event type */
     __publicField(this, "type");
+    /** Map instance that generated event */
     __publicField(this, "map");
+    /** Original MapLibre event */
     __publicField(this, "originalEvent");
     this.type = type;
     this.map = map;
     this.originalEvent = originalEvent;
   }
+  /** Creates an event from an original MapLibre event. */
   static fromMaplibreEvent(type, map, maplibreEvent) {
     return new MapEvent(type, map, maplibreEvent.originalEvent);
   }
@@ -28,6 +39,10 @@ class MapMouseEvent extends MapEvent {
      * The geographic location on the map of the mouse cursor.
      */
     __publicField(this, "lngLat");
+    /**
+     * Features found at the mouse coordinate. Features are ordered by map layer with features higher in the layer stack appearing first in the `features` array.
+     * Features from non-interactive layers are excluded.
+     */
     __publicField(this, "features");
     this.point = point;
     this.lngLat = lngLat;
@@ -47,6 +62,7 @@ class MapMouseEvent extends MapEvent {
 class MapSourceEvent extends MapEvent {
   constructor(type, map, source) {
     super(type, map);
+    /** Map data source ID */
     __publicField(this, "source");
     this.source = source;
   }
@@ -54,6 +70,7 @@ class MapSourceEvent extends MapEvent {
 class MapLoadingEvent extends MapEvent {
   constructor(map, loading) {
     super("loading", map);
+    /** Indicates whether the map is currently loading data. */
     __publicField(this, "loading");
     this.loading = loading;
   }
@@ -61,7 +78,9 @@ class MapLoadingEvent extends MapEvent {
 class MapStyleChangeEvent extends MapEvent {
   constructor(type, map, oldStyle, newStyle) {
     super(type, map);
+    /** Old map style before changes. */
     __publicField(this, "oldStyle");
+    /** New map style after changes. */
     __publicField(this, "newStyle");
     this.oldStyle = oldStyle;
     this.newStyle = newStyle;

package/dist/lib/map/support/map-popup.mjs

@@ -16,12 +16,12 @@ var __publicField = (obj, key, value) => {
 Debug("flow:map-popup");
 class MapPopup extends EventEmitter {
   /**
-   * Constructs a new `MapPopup` instance.
+   * Constructs a new {@link MapPopup} instance.
    *
-   * This is called by the `FlowMap::openPopup` method.
+   * Typically, a popup is created by interacting with the PopupPlugin or SelectionPlugin rather than instantiating a popup directly.
    *
-   * @param map Parent Flo.w map.
-   * @param options Popup options.
+   * @param map Parent map
+   * @param options Popup options
    */
   constructor(map, options) {
     super();
@@ -44,6 +44,9 @@ class MapPopup extends EventEmitter {
       ...this.options
     };
   }
+  /**
+   * Get the map feature associated with the popup.
+   */
   get feature() {
     return this._feature;
   }
@@ -57,7 +60,7 @@ class MapPopup extends EventEmitter {
     }
   }
   /**
-   * Move the popup to a new location.
+   * Move the popup to the specified location.
    *
    * @param lngLat New location.
    */
@@ -107,6 +110,9 @@ class MapPopup extends EventEmitter {
       this.renderContent(null);
     }
   }
+  /**
+   * Returns CSS classes to add to the popup.
+   */
   cssClasses() {
     const classes = ["flow-map-popup"];
     if (isStringFull(this.options.class)) {
@@ -117,6 +123,14 @@ class MapPopup extends EventEmitter {
     }
     return classes;
   }
+  /**
+   * Update the popup in response to feature data changes.
+   *
+   * The popup may be moved or re-rendered depending on the nature of the
+   * feature changes.
+   *
+   * @param feature Map feature associated with the popup
+   */
   handleFeatureUpdate(feature) {
     if (!feature) {
       this.close();
@@ -134,6 +148,9 @@ class MapPopup extends EventEmitter {
     }
     this.renderContent(feature);
   }
+  /**
+   * Called when the popup is closed to clean up resources.
+   */
   popupCloseHandler() {
     if (this._featureStreamDisposer) {
       this._featureStreamDisposer();
@@ -142,6 +159,14 @@ class MapPopup extends EventEmitter {
     this.emit("closed", this);
     this.removeAllListeners();
   }
+  /**
+   * Render the popup content.
+   *
+   * If the content is defined using a template function, the function is called passing
+   * in the associated map feature and the reactive state store.
+   *
+   * @param feature The map feature associated with the popup.
+   */
   renderContent(feature) {
     const state = this.map.context.state;
     const content = isFunction(this.options.content) ? this.options.content(feature, state) : this.options.content;