@emuanalytics/flow-rdf-core 0.0.15

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

@@ -0,0 +1,1652 @@
+'use strict';
+
+const mapFeatureStream = require('../../../shared/flow-rdf-core.278a260a.cjs');
+const MapboxDraw = require('@emuanalytics/mapbox-gl-draw');
+const turfArea = require('@turf/area');
+const turfBBox = require('@turf/bbox');
+const turfBooleanEqual = require('@turf/boolean-equal');
+const turfBuffer = require('@turf/buffer');
+const turfLength = require('@turf/length');
+const Debug = require('debug');
+const featureTypeChecks = require('../../../shared/flow-rdf-core.84eded74.cjs');
+const EventEmitter = require('eventemitter3');
+const stringUtils = require('../../../shared/flow-rdf-core.3042be4a.cjs');
+const lit = require('lit-html');
+const maplibre = require('@emuanalytics/maplibre-gl');
+const turfCircle = require('@turf/circle');
+const turfDistance = require('@turf/distance');
+const helpers = require('@turf/helpers');
+const mobx = require('mobx');
+require('@emuanalytics/maplibre-gl-style-spec');
+require('mobx-utils');
+require('parsimmon');
+require('colorbrewer');
+require('nanoid');
+require('@turf/invariant');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
+
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const MapboxDraw__default = /*#__PURE__*/_interopDefaultCompat(MapboxDraw);
+const turfArea__default = /*#__PURE__*/_interopDefaultCompat(turfArea);
+const turfBBox__default = /*#__PURE__*/_interopDefaultCompat(turfBBox);
+const turfBooleanEqual__default = /*#__PURE__*/_interopDefaultCompat(turfBooleanEqual);
+const turfBuffer__default = /*#__PURE__*/_interopDefaultCompat(turfBuffer);
+const turfLength__default = /*#__PURE__*/_interopDefaultCompat(turfLength);
+const Debug__default = /*#__PURE__*/_interopDefaultCompat(Debug);
+const EventEmitter__default = /*#__PURE__*/_interopDefaultCompat(EventEmitter);
+const lit__namespace = /*#__PURE__*/_interopNamespaceCompat(lit);
+const maplibre__default = /*#__PURE__*/_interopDefaultCompat(maplibre);
+const turfCircle__default = /*#__PURE__*/_interopDefaultCompat(turfCircle);
+const turfDistance__default = /*#__PURE__*/_interopDefaultCompat(turfDistance);
+
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => {
+  __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class AnnotationEvent extends mapFeatureStream.MapEvent {
+  constructor(type, map, data) {
+    super(type, map);
+    __publicField$a(this, "mode");
+    __publicField$a(this, "canUndo");
+    __publicField$a(this, "canRedo");
+    __publicField$a(this, "activeFeatureId");
+    __publicField$a(this, "activeFeatureType");
+    __publicField$a(this, "features");
+    this.mode = data.mode;
+    this.canUndo = data.canUndo;
+    this.canRedo = data.canRedo;
+    this.activeFeatureId = data.activeFeatureId;
+    this.activeFeatureType = data.activeFeatureType;
+    this.features = data.features;
+  }
+}
+
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => {
+  __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class MapPluginBase extends EventEmitter.EventEmitter {
+  constructor(pluginManager, options) {
+    super();
+    __publicField$9(this, "_pluginManager");
+    __publicField$9(this, "options");
+    this._pluginManager = pluginManager;
+    this.options = options ?? {};
+  }
+  get map() {
+    return this._pluginManager.map;
+  }
+  get pluginManager() {
+    return this._pluginManager;
+  }
+}
+
+function isFeatureWithId(f) {
+  return stringUtils.isDefined(f) && stringUtils.isDefined(f.source) && stringUtils.isDefined(f.id);
+}
+
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => {
+  __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Debug__default("flow:map-popup");
+class MapPopup extends EventEmitter__default {
+  /**
+   * Constructs a new `MapPopup` instance.
+   *
+   * This is called by the `FlowMap::openPopup` method.
+   *
+   * @param map Parent Flo.w map.
+   * @param options Popup options.
+   */
+  constructor(map, options) {
+    super();
+    this.map = map;
+    this.options = options;
+    __publicField$8(this, "_feature");
+    __publicField$8(this, "_contentContainer");
+    __publicField$8(this, "_featureStream", null);
+    //private _featureStreamSubscription: ISubscription | null = null;
+    __publicField$8(this, "_maplibrePopup", null);
+    __publicField$8(this, "_featureStreamDisposer");
+    this.options = {
+      // Defaults
+      closeButton: true,
+      closeOnClick: false,
+      closeOnMove: false,
+      maxWidth: "300px",
+      trackFeature: true,
+      //
+      ...this.options
+    };
+  }
+  get feature() {
+    return this._feature;
+  }
+  /**
+   * Close the popup.
+   */
+  close() {
+    if (this._maplibrePopup) {
+      this._maplibrePopup.remove();
+      this._maplibrePopup = null;
+    }
+  }
+  /**
+   * Move the popup to a new location.
+   *
+   * @param lngLat New location.
+   */
+  moveTo(lngLat) {
+    this._maplibrePopup.setLngLat(lngLat);
+  }
+  open(eventOrLngLat, feature) {
+    if (this._maplibrePopup) {
+      return;
+    }
+    if (eventOrLngLat instanceof mapFeatureStream.MapMouseEvent) {
+      if (isFeatureWithId(eventOrLngLat.features[0])) {
+        feature = eventOrLngLat.features[0];
+      }
+      eventOrLngLat = eventOrLngLat.lngLat;
+    }
+    if (feature) {
+      mapFeatureStream.assert(isFeatureWithId(feature), "MapPopup.open(): feature must have unique ID");
+    }
+    this._maplibrePopup = new maplibre__default.Popup({
+      className: this.cssClasses().join(" "),
+      closeButton: this.options.closeButton,
+      closeOnClick: this.options.closeOnClick,
+      closeOnMove: this.options.closeOnMove,
+      maxWidth: this.options.maxWidth
+    });
+    this._maplibrePopup.once("close", this.popupCloseHandler.bind(this));
+    this._contentContainer = document.createElement("div");
+    this._contentContainer.classList.add("flow-map-popup-content");
+    this._maplibrePopup.setDOMContent(this._contentContainer);
+    this._maplibrePopup.addTo(this.map.maplibreMap);
+    if (feature) {
+      this._feature = feature;
+      this._featureStream = new mapFeatureStream.MapFeatureStream({
+        map: this.map,
+        source: feature.source,
+        sourceLayer: feature.sourceLayer,
+        featureIds: [feature.id]
+      });
+      this._featureStreamDisposer = this.map.context.state.autorun(() => {
+        const data = this._featureStream?.featureData;
+        if (data) {
+          this.handleFeatureUpdate(data[feature.id]);
+        }
+      });
+    } else {
+      this.moveTo(eventOrLngLat);
+      this.renderContent(null);
+    }
+  }
+  cssClasses() {
+    const classes = ["flow-map-popup"];
+    if (stringUtils.isStringFull(this.options.class)) {
+      classes.push(this.options.class);
+    }
+    if (this.options.closeButton) {
+      classes.push("flow-map-popup--with-close");
+    }
+    return classes;
+  }
+  handleFeatureUpdate(feature) {
+    if (!feature) {
+      this.close();
+      return;
+    }
+    if (this.options.trackFeature) {
+      switch (feature.geometry.type) {
+        case "Point":
+          this.moveTo(feature.geometry.coordinates);
+          break;
+        case "MultiPoint":
+          this.moveTo(feature.geometry.coordinates[0]);
+          break;
+      }
+    }
+    this.renderContent(feature);
+  }
+  popupCloseHandler() {
+    if (this._featureStreamDisposer) {
+      this._featureStreamDisposer();
+      this._featureStreamDisposer = void 0;
+    }
+    this.emit("closed", this);
+    this.removeAllListeners();
+  }
+  renderContent(feature) {
+    const state = this.map.context.state;
+    const content = stringUtils.isFunction(this.options.content) ? this.options.content(feature, state) : this.options.content;
+    if (stringUtils.isString(content)) {
+      this._contentContainer.innerHTML = content;
+    } else if (content instanceof Node) {
+      this._contentContainer.innerHTML = "";
+      this._contentContainer.appendChild(content);
+    } else {
+      lit__namespace.render(content, this._contentContainer);
+    }
+  }
+}
+
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => {
+  __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class PopupPlugin extends MapPluginBase {
+  constructor(pluginManager) {
+    super(pluginManager);
+    __publicField$7(this, "_popupTemplates", /* @__PURE__ */ new Map());
+    __publicField$7(this, "_popups", /* @__PURE__ */ new Set());
+    __publicField$7(this, "name", "PopupPlugin");
+  }
+  registerPopup(id, options) {
+    this._popupTemplates.set(id, options);
+  }
+  openPopup(id, eventOrLngLat, feature) {
+    const popupOptions = this._popupTemplates.get(id);
+    if (!popupOptions) {
+      throw new mapFeatureStream.FlowError(`MapPopup: no popup with id '${id}'`);
+    }
+    const popup = new MapPopup(this.map, popupOptions);
+    this._popups.add(popup);
+    popup.once("closed", () => {
+      this._popups.delete(popup);
+    });
+    if (eventOrLngLat instanceof mapFeatureStream.MapMouseEvent) {
+      popup.open(eventOrLngLat);
+    } else {
+      popup.open(eventOrLngLat, feature);
+    }
+    return popup;
+  }
+  closeAllPopups() {
+    this._popups.forEach((popup) => popup.close());
+    this._popups.clear();
+  }
+  closePopupsForSources(sources) {
+    sources = stringUtils.ensureArray(sources);
+    this._popups.forEach((popup) => {
+      if (popup.feature?.source && sources.indexOf(popup.feature?.source) >= 0) {
+        popup.close();
+        this._popups.delete(popup);
+      }
+    });
+  }
+}
+
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => {
+  __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class SelectionEvent extends mapFeatureStream.MapEvent {
+  constructor(type, map, sourceIdentifier, features) {
+    super(type, map);
+    __publicField$6(this, "source");
+    __publicField$6(this, "sourceLayer");
+    __publicField$6(this, "features");
+    this.source = sourceIdentifier.source;
+    this.sourceLayer = sourceIdentifier.sourceLayer;
+    this.features = features;
+  }
+}
+
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => {
+  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class SourceSelection {
+  constructor(plugin, source, options) {
+    __publicField$5(this, "_featureStream");
+    __publicField$5(this, "_map");
+    __publicField$5(this, "_options");
+    __publicField$5(this, "_plugin");
+    __publicField$5(this, "_popups", /* @__PURE__ */ new Map());
+    __publicField$5(this, "_selectedFeatureIds", /* @__PURE__ */ new Set());
+    __publicField$5(this, "_sourceId");
+    __publicField$5(this, "_stateSubscription", null);
+    this._plugin = plugin;
+    this._map = plugin.map;
+    this._options = options;
+    const sourceType = plugin.map.getSource(source).type;
+    this._sourceId = {
+      source,
+      sourceLayer: sourceType === "vector" ? options.sourceLayer ?? "geometry" : void 0
+    };
+    this._featureStream = this._map.featureStream({
+      source,
+      sourceLayer: options.sourceLayer,
+      featureIds: []
+    });
+    if (options.selectionState) {
+      this._stateSubscription = this._map.context.state.toStream(options.selectionState, true).subscribe((val) => {
+        val = new Set(stringUtils.ensureArray(val));
+        this.updateSelection(val);
+      });
+    }
+  }
+  get options() {
+    return this._options;
+  }
+  get selectedFeatureIds() {
+    return this._selectedFeatureIds;
+  }
+  get selectedFeatureStream() {
+    return this._featureStream;
+  }
+  destroy() {
+    this._popups.forEach((popup) => popup.close());
+    this._stateSubscription?.unsubscribe();
+    this._selectedFeatureIds = /* @__PURE__ */ new Set();
+    this.updateMapSelectionState();
+  }
+  handleClick(lngLat, feature, selectionOptions, multiSelect, enablePopups) {
+    if (this._options.mode === "none") {
+      return;
+    }
+    const selectedFeatureIDs = new Set(this._selectedFeatureIds);
+    let clearSelection = false;
+    let toggleFeature = false;
+    let showPopup = false;
+    if (feature && feature.source === this._sourceId.source) {
+      if (this._options.mode === "single") {
+        if (selectedFeatureIDs.has(feature.id)) {
+          toggleFeature = true;
+        } else {
+          clearSelection = true;
+          toggleFeature = true;
+        }
+      } else {
+        if (!multiSelect) {
+          clearSelection = true;
+        }
+        toggleFeature = true;
+      }
+    } else if (feature && feature.source !== this._sourceId.source) {
+      clearSelection = this._options.clear === "group" ? selectionOptions?.group === this._options.group : !!this._options.clear;
+    } else {
+      clearSelection = !multiSelect;
+    }
+    if (clearSelection) {
+      selectedFeatureIDs.clear();
+    }
+    if (toggleFeature) {
+      mapFeatureStream.assert(isFeatureWithId(feature));
+      if (selectedFeatureIDs.has(feature.id) && multiSelect) {
+        selectedFeatureIDs.delete(feature.id);
+        if (this._popups.has(feature.id))
+          this._popups.get(feature.id).close();
+      } else {
+        selectedFeatureIDs.add(feature.id);
+        showPopup = true;
+      }
+    }
+    this.updateSelection(selectedFeatureIDs);
+    if (enablePopups && showPopup && this._options.popup) {
+      mapFeatureStream.assert(isFeatureWithId(feature));
+      if (!this._popups.has(feature.id)) {
+        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);
+        }
+      }
+    }
+  }
+  updateSelection(featureIds) {
+    if (!this.areSetsEqual(featureIds, this._selectedFeatureIds)) {
+      this._selectedFeatureIds = featureIds;
+      this.updateMapSelectionState();
+      this.updateStateStore();
+      this._featureStream.featureIds = Array.from(featureIds);
+      this._popups.forEach((popup) => {
+        mapFeatureStream.assert(isFeatureWithId(popup.feature));
+        if (popup.feature.id && !featureIds.has(popup.feature.id)) {
+          popup.close();
+        }
+      });
+      const event = new SelectionEvent(
+        "selectionChanged",
+        this._map,
+        this._sourceId,
+        Array.from(this._selectedFeatureIds)
+      );
+      this._plugin.emit(event.type, event);
+    }
+  }
+  areSetsEqual(a, b) {
+    return a.size === b.size && [...a].every((value) => b.has(value));
+  }
+  updateMapSelectionState() {
+    this._map.removeFeatureState(this._sourceId, "selected", false);
+    this._selectedFeatureIds.forEach(
+      (id) => this._map.setFeatureState({ ...this._sourceId, id }, { selected: true }, false)
+    );
+  }
+  updateStateStore() {
+    if (stringUtils.isStringFull(this._options.selectionState)) {
+      const selectedIds = Array.from(this._selectedFeatureIds);
+      if (this._options.mode === "single") {
+        this._map.context.state.set(this._options.selectionState, selectedIds[0]);
+      } else if (this._options.mode === "multi") {
+        this._map.context.state.set(this._options.selectionState, selectedIds);
+      }
+    }
+  }
+}
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class SelectionPlugin extends MapPluginBase {
+  constructor(pluginManager) {
+    super(pluginManager);
+    __publicField$4(this, "_sourceSelections", /* @__PURE__ */ new Map());
+    __publicField$4(this, "_enablePopups", true);
+    __publicField$4(this, "name", "SelectionPlugin");
+  }
+  clearSelection(source) {
+    const sourceSelection = this._sourceSelections.get(source);
+    if (!sourceSelection) {
+      return;
+    }
+    switch (sourceSelection.options.mode) {
+      case "single":
+      case "multi":
+        sourceSelection.updateSelection(/* @__PURE__ */ new Set());
+    }
+  }
+  deselectFeatures(source, features) {
+    const sourceSelection = this._sourceSelections.get(source);
+    if (!sourceSelection) {
+      return;
+    }
+    features = stringUtils.ensureArray(features);
+    const currentSelection = new Set(sourceSelection.selectedFeatureIds);
+    switch (sourceSelection.options.mode) {
+      case "single":
+      case "multi":
+        features.forEach((f) => currentSelection.delete(f));
+        sourceSelection.updateSelection(currentSelection);
+    }
+  }
+  destroy() {
+    this._sourceSelections.forEach((sel) => sel.destroy());
+    this._sourceSelections.clear();
+  }
+  disableSelection(source) {
+    if (this._sourceSelections.has(source)) {
+      this._sourceSelections.get(source).destroy();
+      this._sourceSelections.delete(source);
+    }
+  }
+  enableSelection(source, options) {
+    if (options.popup) {
+      try {
+        this.map.getPlugin(PopupPlugin);
+      } catch (e) {
+        throw new mapFeatureStream.FlowMapError(`enableSelection(): Popup plugin is required for automatic selection popups`);
+      }
+    }
+    this.disableSelection(source);
+    this._sourceSelections.set(source, new SourceSelection(this, source, options));
+  }
+  handleBeforeSourceRemoved(event) {
+    if (this._sourceSelections.has(event.source)) {
+      this._sourceSelections.get(event.source)?.destroy();
+      this._sourceSelections.delete(event.source);
+    }
+  }
+  handleClick(event) {
+    const multiSelect = event.originalEvent.shiftKey || event.originalEvent.altKey || event.originalEvent.metaKey;
+    const clickedFeature = event.features[0];
+    const clickedSource = clickedFeature?.source;
+    const selectionOptions = this._sourceSelections.get(clickedSource)?.options;
+    this._sourceSelections.forEach((sel) => sel.handleClick(event.lngLat, clickedFeature, selectionOptions, multiSelect, this._enablePopups));
+  }
+  selectFeatures(source, features) {
+    const sourceSelection = this._sourceSelections.get(source);
+    if (!sourceSelection) {
+      return;
+    }
+    features = stringUtils.ensureArray(features);
+    let currentSelection = new Set(sourceSelection.selectedFeatureIds);
+    switch (sourceSelection.options.mode) {
+      case "single":
+        currentSelection = /* @__PURE__ */ new Set([features[0]]);
+        sourceSelection.updateSelection(currentSelection);
+        break;
+      case "multi":
+        features.forEach((f) => currentSelection.add(f));
+        sourceSelection.updateSelection(currentSelection);
+        break;
+    }
+    if (sourceSelection.selectedFeatureIds.size && stringUtils.isStringFull(sourceSelection.options.group)) {
+      this._sourceSelections.forEach((s) => {
+        if (s != sourceSelection && s.options.clear === "group" && s.options.group == sourceSelection.options.group) {
+          s.updateSelection(/* @__PURE__ */ new Set());
+        }
+      });
+    }
+  }
+  selectedFeatureIds(source) {
+    const sourceSelection = this._sourceSelections.get(source);
+    if (!sourceSelection) {
+      return [];
+    }
+    return Array.from(sourceSelection.selectedFeatureIds);
+  }
+  selectedFeatureStream(source) {
+    const sourceSelection = this._sourceSelections.get(source);
+    if (!sourceSelection) {
+      throw new mapFeatureStream.FlowMapError("no source selection");
+    }
+    return sourceSelection.selectedFeatureStream;
+  }
+  enablePopups(enabled = true) {
+    this._enablePopups = true;
+  }
+  disablePopups() {
+    if (this._enablePopups) {
+      this.map.getPlugin(PopupPlugin).closeAllPopups();
+      this._enablePopups = false;
+    }
+  }
+}
+
+function addAnnotationLayers(map) {
+  map.transaction(() => {
+    const annotationSource = new mapFeatureStream.MapDataSource({
+      id: "map-annotations",
+      type: "geojson",
+      src: { type: "FeatureCollection", features: [] },
+      featureId: "id"
+    });
+    map.addSource(annotationSource);
+    const polygonFillLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-polygon-fill",
+      type: "fill",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Polygon' && coalesce(@visible, true)`,
+      style: `
+      fill-color: @fillColor;
+      `
+    });
+    map.addLayer(polygonFillLayer);
+    const polygonStrokeLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-polygon-stroke",
+      type: "line",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Polygon' && coalesce(@visible, true)`,
+      style: `
+    line-color: @strokeColor;
+    line-width: @strokeWidth;
+    `
+    });
+    map.addLayer(polygonStrokeLayer);
+    const lineStrokeLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-line-stroke",
+      type: "line",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'LineString' && coalesce(@visible, true)`,
+      style: `
+    line-color: @strokeColor;
+    line-width: @strokeWidth;
+    `
+    });
+    map.addLayer(lineStrokeLayer);
+    const pointLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-point",
+      type: "circle",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Point' && coalesce(@visible, true)`,
+      style: `
+        circle-radius: @radius;
+        circle-color: @fillColor;
+        circle-stroke-color: @strokeColor;
+        circle-stroke-width: @strokeWidth;
+      `
+    });
+    map.addLayer(pointLayer);
+    const polygonLabelsLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-polygon-labels",
+      type: "symbol",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Polygon' && to-boolean(@labelText) && coalesce(@visible, true)`,
+      interactive: false,
+      style: `
+        symbol-placement: 'point';
+        text-field: @labelText;
+        text-color: @labelColor;
+        text-size: @labelSize;
+        text-anchor: @polygonLabelAnchor;
+        /* text-offset: @labelOffset; */
+        text-justify: @labelJustify;
+        text-max-width: @labelMaxWidth;
+        text-allow-overlap: true;
+      `
+    });
+    map.addLayer(polygonLabelsLayer);
+    const pointLabelsLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-point-labels",
+      type: "symbol",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Point' && to-boolean(@labelText) && coalesce(@visible, true)`,
+      interactive: false,
+      style: `
+        symbol-placement: 'point';
+        text-field: @labelText;
+        text-color: @labelColor;
+        text-size: @labelSize;
+        text-anchor: @labelAnchor;
+        text-offset: @labelOffset;
+        /* text-radial-offset: (@radius + 8) / coalesce(@labelSize, {{annotationsStyleDefaults.labelSize}}); */
+        text-justify: @labelJustify;
+        text-max-width: @labelMaxWidth;
+        text-allow-overlap: true;
+      `
+    });
+    map.addLayer(pointLabelsLayer);
+    const lineLabelsLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-line-labels",
+      type: "symbol",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'LineString' && to-boolean(@labelText) && coalesce(@visible, true)`,
+      interactive: false,
+      style: `
+        symbol-placement: 'line-center';
+        text-field: @labelText;
+        text-color: @labelColor;
+        text-anchor: @labelAnchor;
+        text-size: @labelSize;
+        /* text-offset: @labelOffset; */
+        text-justify: @labelJustify;
+        text-max-width: @labelMaxWidth;
+        text-allow-overlap: true;
+        text-ignore-placement: true;
+    `
+    });
+    map.addLayer(lineLabelsLayer);
+    const polygonSelectionLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-polygon-selection",
+      type: "line",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Polygon' && coalesce(@visible, true)`,
+      interactive: false,
+      style: `
+        line-color: @@selected ? @selectionStrokeColor : @@hover ? @hoverStrokeColor : transparent;
+        line-width: @selectionWidth;
+        line-opacity: @selectionStrokeOpacity;
+      `
+    });
+    map.addLayer(polygonSelectionLayer);
+    const pointSelectionLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-point-selection",
+      type: "circle",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'Point' && coalesce(@visible, true)`,
+      interactive: false,
+      style: `
+        circle-radius: @radius + 1;
+        circle-color: transparent;
+        circle-stroke-color: @@selected ? @selectionStrokeColor : @@hover ? @hoverStrokeColor : transparent;
+        circle-stroke-width: @selectionWidth;
+        circle-stroke-opacity: @selectionStrokeOpacity;
+      `
+    });
+    map.addLayer(pointSelectionLayer);
+    const lineSelectionLayer = new mapFeatureStream.MapLayer({
+      id: "map-annotations-line-selection",
+      type: "line",
+      source: annotationSource.id,
+      filter: `geometry-type() == 'LineString' && coalesce(@visible, true)`,
+      interactive: false,
+      style: `
+        line-color: @@selected ? @selectionStrokeColor : @@hover ? @hoverStrokeColor : transparent;
+        line-opacity: @selectionStrokeOpacity;
+        line-width: @selectionWidth/2;
+        line-gap-width: @strokeWidth;
+      `
+    });
+    map.addLayer(lineSelectionLayer);
+  });
+  return map.getSource("map-annotations");
+}
+
+function createSupplementaryPointsForCircle(geojson) {
+  const { properties, geometry } = geojson;
+  if (properties.user_type !== "Circle")
+    return null;
+  const supplementaryPoints = [];
+  const vertices = geometry.coordinates[0].slice(0, -1);
+  for (let index = 0; index < vertices.length; index += Math.round(vertices.length / 4)) {
+    supplementaryPoints.push(MapboxDraw__default.lib.createVertex(properties.id, vertices[index], `0.${index}`, false));
+  }
+  return supplementaryPoints;
+}
+
+const DirectModeOverride = MapboxDraw__default.modes.direct_select;
+const moveFeatures = MapboxDraw__default.lib.moveFeatures;
+const constrainFeatureMovement = MapboxDraw__default.lib.constrainFeatureMovement;
+const createSupplementaryPoints = MapboxDraw__default.lib.createSupplementaryPoints;
+const Constants$1 = MapboxDraw__default.constants;
+DirectModeOverride.dragFeature = function(state, e, delta) {
+  moveFeatures(this.getSelected(), delta);
+  this.getSelected().filter((feature) => feature.properties.type === "Circle").map((circle) => circle.properties.circleCenter).forEach((center) => {
+    center[0] += delta.lng;
+    center[1] += delta.lat;
+  });
+  state.dragMoveLocation = e.lngLat;
+};
+DirectModeOverride.dragVertex = function(state, e, delta) {
+  if (state.feature.properties.type === "Circle") {
+    const center = state.feature.properties.circleCenter;
+    const movedVertex = [e.lngLat.lng, e.lngLat.lat];
+    const radius = turfDistance__default(helpers.point(center), helpers.point(movedVertex), { units: "kilometers" });
+    const circleFeature = turfCircle__default(center, radius);
+    state.feature.incomingCoords(circleFeature.geometry.coordinates);
+    state.feature.properties.circleRadius = radius;
+  } else {
+    const selectedCoords = state.selectedCoordPaths.map((coord_path) => state.feature.getCoordinate(coord_path));
+    const selectedCoordPoints = selectedCoords.map((coords) => ({
+      type: Constants$1.geojsonTypes.FEATURE,
+      properties: {},
+      geometry: {
+        type: Constants$1.geojsonTypes.POINT,
+        coordinates: coords
+      }
+    }));
+    const constrainedDelta = constrainFeatureMovement(selectedCoordPoints, delta);
+    for (let i = 0; i < selectedCoords.length; i++) {
+      const coord = selectedCoords[i];
+      state.feature.updateCoordinate(state.selectedCoordPaths[i], coord[0] + constrainedDelta.lng, coord[1] + constrainedDelta.lat);
+    }
+  }
+};
+DirectModeOverride.toDisplayFeatures = function(state, geojson, push) {
+  if (state.featureId === geojson.properties.id) {
+    geojson.properties.active = Constants$1.activeStates.ACTIVE;
+    push(geojson);
+    const supplementaryPoints = geojson.properties.user_type === "Circle" ? createSupplementaryPointsForCircle(geojson) : createSupplementaryPoints(geojson, {
+      map: this.map,
+      midpoints: true,
+      selectedPaths: state.selectedCoordPaths
+    });
+    supplementaryPoints.forEach(push);
+  } else {
+    geojson.properties.active = Constants$1.activeStates.INACTIVE;
+    push(geojson);
+  }
+  this.fireActionable(state);
+};
+const DirectMode = DirectModeOverride;
+
+const dragPan = {
+  enable(ctx) {
+    setTimeout(() => {
+      if (!ctx.map || !ctx.map.dragPan || !ctx._ctx || !ctx._ctx.store || !ctx._ctx.store.getInitialConfigValue)
+        return;
+      if (!ctx._ctx.store.getInitialConfigValue("dragPan"))
+        return;
+      ctx.map.dragPan.enable();
+    }, 0);
+  },
+  disable(ctx) {
+    setTimeout(() => {
+      if (!ctx.map || !ctx.map.doubleClickZoom)
+        return;
+      ctx.map.dragPan.disable();
+    }, 0);
+  }
+};
+
+const DragCircleMode = { ...MapboxDraw__default.modes.draw_polygon };
+const Constants = MapboxDraw__default.constants;
+DragCircleMode.onSetup = function(opts) {
+  const polygon = this.newFeature({
+    type: Constants.geojsonTypes.FEATURE,
+    properties: {
+      type: "Circle",
+      circleCenter: []
+    },
+    geometry: {
+      type: Constants.geojsonTypes.POLYGON,
+      coordinates: []
+    }
+  });
+  this.addFeature(polygon);
+  this.clearSelectedFeatures();
+  dragPan.disable(this);
+  this.updateUIClasses({ mouse: Constants.cursors.ADD });
+  this.activateUIButton(Constants.types.POLYGON);
+  this.setActionableState({
+    trash: true
+  });
+  return {
+    polygon,
+    currentVertexPosition: 0
+  };
+};
+DragCircleMode.onMouseDown = DragCircleMode.onTouchStart = function(state, e) {
+  const currentCenter = state.polygon.properties.circleCenter;
+  if (currentCenter.length === 0) {
+    state.polygon.properties.circleCenter = [e.lngLat.lng, e.lngLat.lat];
+  }
+};
+DragCircleMode.onDrag = DragCircleMode.onMouseMove = function(state, e) {
+  const center = state.polygon.properties.circleCenter;
+  if (center.length > 0) {
+    const distanceInKm = turfDistance__default(
+      helpers.point(center),
+      helpers.point([e.lngLat.lng, e.lngLat.lat]),
+      { units: "kilometers" }
+    );
+    const circleFeature = turfCircle__default(center, distanceInKm);
+    state.polygon.incomingCoords(circleFeature.geometry.coordinates);
+    state.polygon.properties.circleRadius = distanceInKm;
+  }
+};
+DragCircleMode.onMouseUp = DragCircleMode.onTouchEnd = function(state) {
+  dragPan.enable(this);
+  return this.changeMode(Constants.modes.SIMPLE_SELECT, { featureIds: [state.polygon.id] });
+};
+DragCircleMode.onClick = DragCircleMode.onTap = function(state) {
+  state.polygon.properties.circleCenter = [];
+};
+DragCircleMode.toDisplayFeatures = function(state, geojson, display) {
+  const isActivePolygon = geojson.properties.id === state.polygon.id;
+  geojson.properties.active = isActivePolygon ? Constants.activeStates.ACTIVE : Constants.activeStates.INACTIVE;
+  return display(geojson);
+};
+const DragCircleMode$1 = DragCircleMode;
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+Debug__default("flow:annotation-plugin");
+const _AnnotationPlugin = class _AnnotationPlugin extends MapPluginBase {
+  constructor(pluginManager, options) {
+    super(pluginManager, options);
+    __publicField$3(this, "name", "AnnotationPlugin");
+    // Feature data model
+    __publicField$3(this, "_features", /* @__PURE__ */ new Map());
+    __publicField$3(this, "_featureIds", []);
+    // Undo/redo stacks
+    __publicField$3(this, "_undoStack", []);
+    __publicField$3(this, "_redoStack", []);
+    // Editing state
+    __publicField$3(this, "_mode", "idle");
+    __publicField$3(this, "_activeFeatureId", null);
+    __publicField$3(this, "_activeFeatureType", null);
+    __publicField$3(this, "_onCommitCleanup", []);
+    __publicField$3(this, "_annotationDataSource");
+    __publicField$3(this, "_drawControl", null);
+    __publicField$3(this, "_removeKeyboardShortcuts", null);
+    this.options = { ..._AnnotationPlugin._defaultOptions, ...options };
+    this.options.defaultStyle = { ..._AnnotationPlugin._defaultOptions.defaultStyle, ...options?.defaultStyle };
+  }
+  initialize() {
+    this._annotationDataSource = addAnnotationLayers(this.map);
+    if (this.options.selectionOptions) {
+      this.map.getPlugin(SelectionPlugin).enableSelection(this._annotationDataSource.id, this.options.selectionOptions);
+    }
+    if (this.options.interactive) {
+      this._removeKeyboardShortcuts = this.pluginManager.addKeyboardShortcuts({
+        "Enter,Escape": () => {
+          this.commit();
+        },
+        "Delete,Backspace": () => this.deleteSelectedFeature(),
+        "Ctrl+KeyZ": () => {
+          this.undo();
+        },
+        "Ctrl+Shift+KeyZ": () => {
+          this.redo();
+        },
+        KeyP: () => this.createFeature("Polygon"),
+        KeyL: () => this.createFeature("LineString"),
+        KeyM: () => this.createFeature("Point"),
+        KeyC: () => this.createFeature("Circle")
+      });
+    }
+  }
+  destroy() {
+    if (this._removeKeyboardShortcuts)
+      this._removeKeyboardShortcuts();
+  }
+  clear() {
+    this.commit();
+    this._featureIds = [];
+    this._features = /* @__PURE__ */ new Map();
+    this._undoStack = [];
+    this._redoStack = [];
+    this._mode = "idle";
+    this._activeFeatureId = null;
+    this._activeFeatureType = null;
+    this.render();
+    return this;
+  }
+  undo() {
+    const operation = this._undoStack.pop();
+    if (operation) {
+      operation.undo();
+      this._redoStack.push(operation);
+      this.render();
+    }
+    return this;
+  }
+  /**
+   * Redo the last undone operation.
+   */
+  redo() {
+    const operation = this._redoStack.pop();
+    if (operation) {
+      operation.do();
+      this._undoStack.push(operation);
+      this.render();
+    }
+    return this;
+  }
+  getFeature(featureId) {
+    const feature = this._features.get(featureId);
+    if (!feature) {
+      throw new mapFeatureStream.FlowError(`<AnnotationPlugin>: No feature with id '${featureId}'`);
+    }
+    return feature;
+  }
+  getFeatures() {
+    return this._featureIds.map((id) => this._features.get(id));
+  }
+  setFeatures(features) {
+    this.commit();
+    const normalizedFeatures = features.map((f) => this.applyDefaults(f));
+    const oldFeatures = this._features;
+    const oldFeatureIds = this._featureIds;
+    const operation = {
+      do: () => {
+        this._featureIds = normalizedFeatures.map((f) => f.id);
+        this._features = new Map(normalizedFeatures.map((f) => [f.id, f]));
+      },
+      undo: () => {
+        this._featureIds = oldFeatureIds;
+        this._features = oldFeatures;
+      }
+    };
+    this.performOperation(operation);
+    return this;
+  }
+  addFeature(feature) {
+    this.commit();
+    const fullFeature = this.applyDefaults(feature);
+    const operation = {
+      do: () => {
+        this._features.set(fullFeature.id, fullFeature);
+        this._featureIds.push(fullFeature.id);
+      },
+      undo: () => {
+        this._features.delete(fullFeature.id);
+        const index = this._featureIds.indexOf(fullFeature.id);
+        if (index !== -1) {
+          this._featureIds.splice(index, 1);
+        }
+      }
+    };
+    this.performOperation(operation);
+    return fullFeature;
+  }
+  deleteFeature(featureId) {
+    this.commit();
+    if (!featureId) {
+      return this;
+    }
+    this.deselectFeature(featureId);
+    const feature = this.getFeature(featureId);
+    const operation = {
+      do: () => {
+        this._features.delete(featureId);
+        const index = this._featureIds.indexOf(featureId);
+        if (index !== -1) {
+          this._featureIds.splice(index, 1);
+        }
+      },
+      undo: () => {
+        this._features.set(featureId, feature);
+        this._featureIds.push(featureId);
+      }
+    };
+    this.performOperation(operation);
+    return this;
+  }
+  createFeature(featureType) {
+    this.commit();
+    this.startDrawing();
+    this._drawControl.changeMode(this.drawModeForFeatureType(featureType));
+    this._mode = "creating";
+    this._activeFeatureId = null;
+    this._activeFeatureType = featureType;
+    this.emitStateChange();
+    const commitChanges = () => {
+      setTimeout(() => this.commit(), 0);
+    };
+    this.map.maplibreMap.once("draw.create", commitChanges);
+    this.map.maplibreMap.once("draw.modechange", commitChanges);
+    this._onCommitCleanup.push(() => {
+      this.map.maplibreMap.off("draw.create", commitChanges);
+      this.map.maplibreMap.off("draw.modechange", commitChanges);
+    });
+  }
+  editFeature(featureId) {
+    const feature = this.getFeature(featureId);
+    this._mode = "editing";
+    this._activeFeatureId = featureId;
+    this._activeFeatureType = feature.properties.type;
+    const commitChanges = () => {
+      setTimeout(() => this.commit(), 0);
+    };
+    this.startDrawing();
+    this._drawControl.add(feature);
+    this.setFeatureProperty(featureId, "visible", false);
+    this.render();
+    switch (this.editModeForFeature(feature)) {
+      case "direct_select":
+        this._drawControl.changeMode("direct_select", {
+          featureId
+        });
+        this.map.maplibreMap.once("draw.modechange", commitChanges);
+        this._onCommitCleanup.push(() => this.map.maplibreMap.off("draw.modechange", commitChanges));
+        break;
+      case "simple_select":
+        this._drawControl.changeMode("simple_select", {
+          featureIds: [featureId]
+        });
+        this.map.maplibreMap.once("draw.selectionchange", commitChanges);
+        this._onCommitCleanup.push(() => this.map.maplibreMap.off("draw.selectionchange", commitChanges));
+        break;
+    }
+  }
+  zoomToFeature(featureId, animationOptions) {
+    const feature = this.getFeature(featureId);
+    if (!feature)
+      return this;
+    const bbox = feature.properties.type === "Point" ? turfBBox__default(turfBuffer__default(feature, 50)) : turfBBox__default(feature);
+    this.map.setBounds(bbox, animationOptions);
+    return this;
+  }
+  setFeatureProperty(featureId, property, value) {
+    const feature = this.getFeature(featureId);
+    const featureCopy = {
+      ...feature,
+      properties: { ...feature.properties, [property]: value }
+    };
+    this._features.set(featureId, featureCopy);
+    return this;
+  }
+  setFeatureProperties(featureId, properties) {
+    const feature = this.getFeature(featureId);
+    const featureCopy = {
+      ...feature,
+      properties: { ...feature.properties, ...properties }
+    };
+    this._features.set(featureId, featureCopy);
+    return this;
+  }
+  commit() {
+    this._onCommitCleanup.forEach((f) => f());
+    this._onCommitCleanup = [];
+    if (this._mode === "idle")
+      return this;
+    const drawControlFeature = this._drawControl.getAll().features[0];
+    let operation = null;
+    if (this._mode === "editing") {
+      const mapFeature = this.getFeature(this._activeFeatureId);
+      this.setFeatureProperty(mapFeature.id, "visible", true);
+      if (!turfBooleanEqual__default(mapFeature.geometry, drawControlFeature.geometry)) {
+        operation = {
+          do: () => {
+            this.setFeatureGeometry(mapFeature.id, drawControlFeature.geometry);
+            if (drawControlFeature.properties.type === "Circle") {
+              this.setFeatureProperty(mapFeature.id, "center", drawControlFeature.properties.circleCenter);
+              this.setFeatureProperty(mapFeature.id, "radiusInKm", drawControlFeature.properties.circleRadius);
+            }
+          },
+          undo: () => {
+            this.setFeatureGeometry(mapFeature.id, mapFeature.geometry);
+            if (mapFeature.properties.type === "Circle") {
+              this.setFeatureProperty(mapFeature.id, "center", mapFeature.properties.circleCenter);
+              this.setFeatureProperty(mapFeature.id, "radiusInKm", mapFeature.properties.circleRadius);
+            }
+          }
+        };
+      }
+    } else if (this._mode === "creating") {
+      if (this.isValidGeometry(drawControlFeature)) {
+        let createdFeature = drawControlFeature;
+        createdFeature.id = "";
+        this.applyDefaults(createdFeature);
+        operation = {
+          do: () => {
+            this._features.set(drawControlFeature.id, drawControlFeature);
+            this._featureIds.push(drawControlFeature.id);
+            if (this.options.selectionOptions?.mode === "single" || this.options.selectionOptions?.mode === "multi") {
+              this.map.getPlugin(SelectionPlugin).selectFeatures(this._annotationDataSource.id, drawControlFeature.id);
+            }
+          },
+          undo: () => {
+            createdFeature = this._features.get(createdFeature.id);
+            this._features.delete(createdFeature.id);
+            const index = this._featureIds.indexOf(createdFeature.id);
+            if (index !== -1) {
+              this._featureIds.splice(index, 1);
+            }
+          }
+        };
+      }
+    }
+    if (operation) {
+      this.performOperation(operation);
+    }
+    this._mode = "idle";
+    this._activeFeatureId = null;
+    this._activeFeatureType = null;
+    this.endDrawing();
+    this.render();
+    return this;
+  }
+  cancel() {
+    this._onCommitCleanup.forEach((f) => f());
+    this._onCommitCleanup = [];
+    if (this._mode === "idle")
+      return this;
+    if (this._mode === "editing") {
+      this.setFeatureProperty(this._activeFeatureId, "visible", true);
+    }
+    this._activeFeatureId = null;
+    this._activeFeatureType = null;
+    this._mode = "idle";
+    this.endDrawing();
+    this.render();
+    return this;
+  }
+  render() {
+    const renderedFeatures = {
+      type: "FeatureCollection",
+      features: this._featureIds.map((id) => this._features.get(id))
+    };
+    this._annotationDataSource.setSrc(renderedFeatures);
+    this.emitStateChange();
+    return this;
+  }
+  handleDblClick(event) {
+    if (!this.options.interactive) {
+      return;
+    }
+    const clickedFeature = event.features[0];
+    if (clickedFeature && clickedFeature.source === this._annotationDataSource.id) {
+      this.editFeature(clickedFeature.id.toString());
+    }
+  }
+  handleBeforeStyleChanged(event) {
+    const { oldStyle, newStyle } = event;
+    if (this._drawControl) {
+      if (oldStyle.sources["mapbox-gl-draw"]) {
+        newStyle.sources["mapbox-gl-draw"] = oldStyle.sources["mapbox-gl-draw"];
+      }
+      oldStyle.layers.filter((l) => l.id.startsWith("gl-draw")).forEach((l) => newStyle.layers.push(l));
+    }
+    return newStyle;
+  }
+  startDrawing() {
+    if (this._drawControl) {
+      return this._drawControl;
+    }
+    this.pluginManager.setExclusivePlugin(this);
+    this._drawControl = new MapboxDraw__default({
+      displayControlsDefault: false,
+      keybindings: false,
+      modes: {
+        ...MapboxDraw__default.modes,
+        drag_circle: DragCircleMode$1,
+        direct_select: DirectMode
+        //...options.modes
+      },
+      userProperties: true
+    });
+    this.map.maplibreMap.addControl(this._drawControl);
+    return this._drawControl;
+  }
+  endDrawing() {
+    this.pluginManager.removeExclusivePlugin(this);
+    if (this._drawControl) {
+      this.map.maplibreMap.removeControl(this._drawControl);
+      this._drawControl = null;
+    }
+  }
+  applyDefaults(feature) {
+    feature.id = feature.properties.id = this.generateFeatureId(feature);
+    feature.properties = {
+      id: this.generateFeatureId(feature),
+      name: this.generateFeatureName(feature),
+      type: feature.properties.type ?? feature.geometry.type,
+      selected: false,
+      ...this.options.defaultStyle,
+      ...feature.properties
+    };
+    feature.id = feature.properties.id;
+    return feature;
+  }
+  generateFeatureId(feature) {
+    if (stringUtils.isNumber(feature.id) || stringUtils.isStringFull(feature.id)) {
+      return feature.id.toString();
+    } else {
+      return mapFeatureStream.randomId("feature");
+    }
+  }
+  generateFeatureName(feature) {
+    const type = feature.properties.type ?? feature.geometry.type;
+    return `${type} ${this._featureIds.length}`;
+  }
+  performOperation(operation) {
+    this._undoStack.push(operation);
+    this._redoStack.length = 0;
+    operation.do();
+  }
+  deselectFeature(featureId) {
+    if (this.options.selectionOptions?.mode === "single" || this.options.selectionOptions?.mode === "multi") {
+      this.map.getPlugin(SelectionPlugin).deselectFeatures(this._annotationDataSource.id, featureId);
+    }
+  }
+  deleteSelectedFeature() {
+    if (this.options.selectionOptions?.mode === "single" || this.options.selectionOptions?.mode === "multi") {
+      const selected = this.map.getPlugin(SelectionPlugin).selectedFeatureIds(this._annotationDataSource.id);
+      selected.forEach((id) => this.deleteFeature(id));
+      this.render();
+    }
+  }
+  editModeForFeature(feature) {
+    switch (feature.geometry.type) {
+      case "Point":
+        return "simple_select";
+      default:
+        return "direct_select";
+    }
+  }
+  drawModeForFeatureType(featureType) {
+    switch (featureType) {
+      case "Polygon":
+        return "draw_polygon";
+      case "LineString":
+        return "draw_line_string";
+      case "Point":
+        return "draw_point";
+      case "Circle":
+        return "drag_circle";
+      default:
+        throw new Error(`Unrecognized feature type: ${featureType}`);
+    }
+  }
+  setFeatureGeometry(featureId, geometry) {
+    const feature = this.getFeature(featureId);
+    const featureCopy = {
+      ...feature,
+      geometry
+    };
+    this._features.set(featureId, featureCopy);
+    return featureCopy;
+  }
+  isValidGeometry(feature) {
+    if (featureTypeChecks.isPolygon(feature)) {
+      return feature.geometry.coordinates[0][0] !== null && feature.geometry.coordinates[0].length > 3 && turfArea__default(feature) > 0;
+    } else if (featureTypeChecks.isLineString(feature)) {
+      return feature.geometry.coordinates.length > 1 && turfLength__default(feature) > 0;
+    } else if (featureTypeChecks.isPoint(feature)) {
+      return feature.geometry.coordinates.length > 0;
+    }
+    return false;
+  }
+  emitStateChange() {
+    const eventData = {
+      mode: this._mode,
+      canUndo: this._undoStack.length > 0,
+      canRedo: this._redoStack.length > 0,
+      activeFeatureId: this._activeFeatureId,
+      activeFeatureType: this._activeFeatureType,
+      features: this._featureIds.map((id) => this._features.get(id))
+    };
+    this.emit("annotationStateChanged", new AnnotationEvent("annotationStateChanged", this.map, eventData));
+  }
+};
+__publicField$3(_AnnotationPlugin, "_defaultOptions", {
+  interactive: true,
+  defaultStyle: {
+    labelSize: 10,
+    labelColor: "#ffffff",
+    labelMaxWidth: 10,
+    labelOffset: [0, 0.5],
+    labelJustify: "auto",
+    labelAnchor: "top",
+    polygonLabelAnchor: "center",
+    radius: 5,
+    fillColor: "rgba(204,204,204,0.65)",
+    strokeWidth: 1,
+    strokeColor: "#ffffff",
+    selectionStrokeColor: "orange",
+    selectionStrokeOpacity: 0.5,
+    selectionWidth: 3,
+    hoverStrokeColor: "transparent"
+  }
+});
+let AnnotationPlugin = _AnnotationPlugin;
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const debug$1 = Debug__default("flow:data-join-map-plugin");
+const _DataJoin = class _DataJoin {
+  constructor(id, map, options) {
+    this.id = id;
+    this.map = map;
+    __publicField$2(this, "autorunDisposer", null);
+    __publicField$2(this, "dataExpression", null);
+    __publicField$2(this, "options");
+    __publicField$2(this, "parameterExpressions", {});
+    this.options = {
+      ..._DataJoin.defaultOptions,
+      ...options
+    };
+  }
+  get source() {
+    return this.options.source;
+  }
+  start() {
+    this.stop();
+    if (stringUtils.isString(this.options.data)) {
+      if (stringUtils.isURL(this.options.data))
+        this.options.data = `'${this.options.data}'`;
+      this.dataExpression = new mapFeatureStream.ReactiveExpression(this.options.data);
+      this.dataExpression.bindState(this.map.context.state);
+    } else {
+      this.dataExpression = null;
+    }
+    if (stringUtils.isArrayFull(this.options.parameters)) {
+      this.parameterExpressions = this.options.parameters.reduce((accum, param) => {
+        const expr = new mapFeatureStream.ReactiveExpression(param.value.toString());
+        expr.bindState(this.map.context.state);
+        accum[param.name] = expr;
+        return accum;
+      }, {});
+    }
+    this.autorunDisposer = mobx.autorun(
+      async () => {
+        let data = this.dataExpression ? mobx.toJS(this.dataExpression.value) : this.options.data;
+        const missingParams = this.options.parameters.map(
+          (p) => p.required && stringUtils.isNil(this.parameterExpressions[p.name].value) ? p.name : void 0
+        ).filter((p) => !!p);
+        if (stringUtils.isNull(data)) {
+          debug$1(`FlowMap<${this.map.id}>: Skipping data join '${this.id}' (null data)`);
+          return;
+        }
+        if (missingParams.length) {
+          debug$1(`FlowMap<${this.map.id}>: Skipping data join '${this.id}' (null required parameters: ${missingParams.join(", ")})`);
+          return;
+        }
+        debug$1(`FlowMap<${this.map.id}>: Performing data join '${this.id}'`);
+        if (stringUtils.isString(data)) {
+          try {
+            data = await this.loadData(data);
+          } catch (e) {
+            this.map.emitError(`Failed to load data for data join '${this.id}' - ${e.message}`, e);
+            data = [];
+          }
+        }
+        this.doDataJoin(data);
+      },
+      { name: `FlowDataJoin.${this.map.id}.${this.id})` }
+    );
+  }
+  stop() {
+    if (this.autorunDisposer) {
+      this.autorunDisposer();
+      this.autorunDisposer = null;
+    }
+  }
+  doDataJoin(data) {
+    const source = this.map.getSource(this.options.source);
+    const sourceLayer = source.type === "vector" ? this.options.sourceLayer || "geometry" : void 0;
+    if (this.options.clear) {
+      this.map.removeFeatureState({ source: source.id, sourceLayer }, this.id);
+    }
+    const featureData = data.reduce((accum, d) => {
+      accum[d[this.options.foreignKey]] = { [this.id]: d };
+      return accum;
+    }, {});
+    this.map.setFeatureStateBulk({ source: source.id, sourceLayer }, featureData);
+  }
+  loadData(datasetOrUrl) {
+    if (stringUtils.isURL(datasetOrUrl)) {
+      const url = new URL(datasetOrUrl);
+      const params = new URLSearchParams(url.searchParams);
+      if (stringUtils.isArrayFull(this.options.parameters)) {
+        this.options.parameters.forEach((p) => {
+          params.append(p.name, this.parameterExpressions[p.name].value);
+        });
+      }
+      url.search = params.toString();
+      const headers = new Headers({ Accept: "application/json" });
+      const request = new Request(url.toString(), {
+        method: "GET",
+        mode: "cors",
+        headers,
+        cache: "default"
+      });
+      return fetch(request).then((response) => {
+        if (!response.ok) {
+          throw new Error(`status=${response.status} ${response.statusText}`);
+        }
+        return response.json();
+      });
+    } else {
+      const params = {};
+      if (stringUtils.isArrayFull(this.options.parameters)) {
+        this.options.parameters.forEach((p) => {
+          params[p.name] = this.parameterExpressions[p.name].value;
+        });
+      }
+      return this.map.context.flowClient.datasets.query(datasetOrUrl, {}, params);
+    }
+  }
+};
+__publicField$2(_DataJoin, "defaultOptions", {
+  clear: false,
+  parameters: []
+});
+let DataJoin = _DataJoin;
+class DataJoinPlugin extends MapPluginBase {
+  constructor(pluginManager) {
+    super(pluginManager);
+    __publicField$2(this, "_joins", /* @__PURE__ */ new Map());
+    __publicField$2(this, "name", "DataJoinPlugin");
+  }
+  addDataJoin(id, options) {
+    const dataJoin = new DataJoin(id, this.map, options);
+    this._joins.set(id, dataJoin);
+    dataJoin.start();
+  }
+  bindState(state) {
+    this._joins.forEach((join) => join.start());
+  }
+  destroy() {
+    this._joins.forEach((join) => join.stop());
+    this._joins.clear();
+  }
+  handleSourceRemoved(event) {
+    this._joins.forEach((join) => {
+      if (join.source === event.source) {
+        join.stop();
+        this._joins.delete(join.id);
+      }
+    });
+  }
+  removeDataJoin(id) {
+    const dataJoin = this._joins.get(id);
+    if (dataJoin) {
+      dataJoin.stop();
+      this._joins.delete(id);
+    } else {
+      throw new mapFeatureStream.FlowError(`Cannot remove unrecognized data join '${id}'`);
+    }
+  }
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class HoverEffectPlugin extends MapPluginBase {
+  constructor(pluginManager) {
+    super(pluginManager);
+    __publicField$1(this, "hoveredFeature", null);
+    __publicField$1(this, "name", "HoverEffectPlugin");
+  }
+  handleMouseMove(event) {
+    const hoveredFeature = event.features[0];
+    if (hoveredFeature) {
+      this.map.maplibreMap._container.classList.add("feature-hovered");
+    } else {
+      this.map.maplibreMap._container.classList.remove("feature-hovered");
+    }
+    if (!this.compareFeatures(hoveredFeature, this.hoveredFeature)) {
+      this.clearHover();
+      if (isFeatureWithId(hoveredFeature) && stringUtils.isDefined(this.map.getSource(hoveredFeature.source)?.featureId)) {
+        this.map.setFeatureState(hoveredFeature, { hover: true }, false);
+        this.hoveredFeature = hoveredFeature;
+      }
+    }
+  }
+  handleMouseOut(event) {
+    this.clearHover();
+  }
+  handleSetExclusivePlugin(exclusivePlugins) {
+    if (exclusivePlugins.length) {
+      this.clearHover();
+      this.map.maplibreMap._container.classList.remove("feature-hovered");
+    }
+  }
+  compareFeatures(f1, f2) {
+    if (f1 === f2) {
+      return true;
+    }
+    if (stringUtils.isObject(f1) && stringUtils.isObject(f2)) {
+      return f1.id == f2.id && f1.source === f2.source && f1.sourceLayer == f2.sourceLayer;
+    }
+    return false;
+  }
+  clearHover() {
+    if (this.hoveredFeature && this.map.getSource(this.hoveredFeature.source)) {
+      this.map.removeFeatureState(this.hoveredFeature, "hover", false);
+      this.hoveredFeature = null;
+    }
+  }
+}
+
+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);
+  return value;
+};
+const debug = Debug__default("flow:url-sync-plugin");
+class UrlSyncPlugin extends MapPluginBase {
+  constructor(pluginManager) {
+    super(pluginManager);
+    __publicField(this, "name", "UrlSyncPlugin");
+  }
+  initialize() {
+    const searchParams = new URLSearchParams(window.location.search);
+    const hash = searchParams.get(this.map.id);
+    if (hash) {
+      const center = this.hashToMapState(hash);
+      debug("Setting map position from URL", center);
+      this.map.setCenter(center);
+    }
+  }
+  handleMoveEnd(event) {
+    const center = this.mapStateToHash(this.map.getCenter());
+    const searchParams = new URLSearchParams(window.location.search);
+    searchParams.set(this.map.id, center);
+    const newUrl = `${location.pathname}?${searchParams.toString()}`;
+    debug("Updating URL with map position", center);
+    window.history.replaceState({}, "", newUrl);
+  }
+  mapStateToHash(mapCenter) {
+    const state = {
+      z: mapCenter.zoom.toFixed(3),
+      x: mapCenter.lng.toFixed(3),
+      y: mapCenter.lat.toFixed(3),
+      pitch: mapCenter.pitch.toFixed(1),
+      bearing: mapCenter.bearing.toFixed(1)
+    };
+    return `${state.z}_${state.x}_${state.y}_${state.pitch}_${state.bearing}`;
+  }
+  hashToMapState(hash) {
+    const [zoom, x, y, pitch, bearing] = hash.split("_");
+    return {
+      lng: +x,
+      lat: +y,
+      zoom: +zoom,
+      pitch: +pitch,
+      bearing: +bearing
+    };
+  }
+}
+
+exports.PluginManager = mapFeatureStream.PluginManager;
+exports.AnnotationEvent = AnnotationEvent;
+exports.AnnotationPlugin = AnnotationPlugin;
+exports.DataJoin = DataJoin;
+exports.DataJoinPlugin = DataJoinPlugin;
+exports.HoverEffectPlugin = HoverEffectPlugin;
+exports.MapPluginBase = MapPluginBase;
+exports.PopupPlugin = PopupPlugin;
+exports.SelectionEvent = SelectionEvent;
+exports.SelectionPlugin = SelectionPlugin;
+exports.UrlSyncPlugin = UrlSyncPlugin;