@emuanalytics/flow-rdf-core 4.0.4 → 4.0.5

package/dist/lib/map/plugins/annotations/annotation-layers.mjs

@@ -0,0 +1,163 @@
+import { MapDataSource } from '../../../map-style/map-data-source.mjs';
+import { MapLayer } from '../../../map-style/map-layer.mjs';
+
+function addAnnotationLayers(map) {
+  map.transaction(() => {
+    const annotationSource = new MapDataSource({
+      id: "map-annotations",
+      type: "geojson",
+      src: { type: "FeatureCollection", features: [] },
+      featureId: "id"
+    });
+    map.addSource(annotationSource);
+    const polygonFillLayer = new 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 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 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 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 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 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 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 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 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 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");
+}
+
+export { addAnnotationLayers };

package/dist/lib/map/plugins/annotations/annotation.events.mjs

@@ -0,0 +1,27 @@
+import { MapEvent } from '../../support/map-events.mjs';
+
+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;
+};
+class AnnotationEvent extends MapEvent {
+  constructor(type, map, data) {
+    super(type, map);
+    __publicField(this, "mode");
+    __publicField(this, "canUndo");
+    __publicField(this, "canRedo");
+    __publicField(this, "activeFeatureId");
+    __publicField(this, "activeFeatureType");
+    __publicField(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;
+  }
+}
+
+export { AnnotationEvent };

package/dist/lib/map/plugins/annotations/annotation.plugin.mjs

@@ -0,0 +1,498 @@
+import MapboxDraw from '@emuanalytics/mapbox-gl-draw';
+import turfArea from '@turf/area';
+import turfBBox from '@turf/bbox';
+import turfBooleanEqual from '@turf/boolean-equal';
+import turfBuffer from '@turf/buffer';
+import turfLength from '@turf/length';
+import Debug from 'debug';
+import { isPolygon, isLineString, isPoint } from '../../../utils/feature-type-checks.mjs';
+import { isNumber, isStringFull } from '../../../utils/type-checks.mjs';
+import { randomId } from '../../../utils/random-id.mjs';
+import { MapPluginBase } from '../map-plugin-base.mjs';
+import { SelectionPlugin } from '../selection/selection.plugin.mjs';
+import { addAnnotationLayers } from './annotation-layers.mjs';
+import { AnnotationEvent } from './annotation.events.mjs';
+import DirectMode from './maplibre-gl-draw-circle/lib/modes/DirectModeOverride.mjs';
+import DragCircleMode from './maplibre-gl-draw-circle/lib/modes/DragCircleMode.mjs';
+import { FlowCoreError } from '../../../errors/flow-error.mjs';
+
+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;
+};
+Debug("flow:annotation-plugin");
+const _AnnotationPlugin = class _AnnotationPlugin extends MapPluginBase {
+  constructor(pluginManager, options) {
+    super(pluginManager, options);
+    __publicField(this, "name", "AnnotationPlugin");
+    // Feature data model
+    __publicField(this, "_features", /* @__PURE__ */ new Map());
+    __publicField(this, "_featureIds", []);
+    // Undo/redo stacks
+    __publicField(this, "_undoStack", []);
+    __publicField(this, "_redoStack", []);
+    // Editing state
+    __publicField(this, "_mode", "idle");
+    __publicField(this, "_activeFeatureId", null);
+    __publicField(this, "_activeFeatureType", null);
+    __publicField(this, "_onCommitCleanup", []);
+    __publicField(this, "_annotationDataSource");
+    __publicField(this, "_drawControl", null);
+    __publicField(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 FlowCoreError(`<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(turfBuffer(feature, 50)) : turfBBox(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(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({
+      displayControlsDefault: false,
+      keybindings: false,
+      modes: {
+        ...MapboxDraw.modes,
+        drag_circle: DragCircleMode,
+        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 (isNumber(feature.id) || isStringFull(feature.id)) {
+      return feature.id.toString();
+    } else {
+      return 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 (isPolygon(feature)) {
+      return feature.geometry.coordinates[0][0] !== null && feature.geometry.coordinates[0].length > 3 && turfArea(feature) > 0;
+    } else if (isLineString(feature)) {
+      return feature.geometry.coordinates.length > 1 && turfLength(feature) > 0;
+    } else if (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(_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;
+
+export { AnnotationPlugin };