@map-colonies/react-components 3.12.2 → 3.12.3

package/src/lib/cesium-map/tools/draw/drawHelper.ts

@@ -1,2116 +1,2116 @@
-// inspired by https://github.com/leforthomas/cesium-drawhelper
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import * as Cesium from 'cesium';
-import './drawHelper.css';
-/* eslint-disable */
-var DrawHelper = (function () {
-  // static variables
-  var ellipsoid = Cesium.Ellipsoid.WGS84;
-  var drawingVertexColor;
-  var material = Cesium.Material.fromType(Cesium.Material.ColorType);
-
-  // constructor
-  function _(
-    cesiumWidget,
-    materialClr = new Cesium.Color(1.0, 1.0, 0.0, 0.5),
-    drawingVertexClr = new Cesium.Color(1.0, 1.0, 1.0, 1.0)
-  ) {
-    this._scene = cesiumWidget.scene;
-
-    // UPDATE scoped varibles
-    material.uniforms.color = materialClr;
-    drawingVertexColor = drawingVertexClr;
-
-    //MC_CHANGE disable/override tooltip
-    this._tooltip = {
-      setVisible: () => {},
-      showAt: () => {},
-    };
-    // this._tooltip = createTooltip(cesiumWidget.container);
-    this._surfaces = [];
-
-    this.initialiseHandlers();
-
-    this.enhancePrimitives();
-  }
-
-  _.prototype.initialiseHandlers = function () {
-    var scene = this._scene;
-    var _self = this;
-    // scene events
-    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-    function callPrimitiveCallback(name, position) {
-      if (_self._handlersMuted == true) return;
-      var pickedObject = scene.pick(position);
-      if (
-        pickedObject &&
-        pickedObject.primitive &&
-        pickedObject.primitive[name]
-      ) {
-        pickedObject.primitive[name](position);
-      }
-    }
-    handler.setInputAction(function (movement) {
-      callPrimitiveCallback('leftClick', movement.position);
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-    handler.setInputAction(function (movement) {
-      callPrimitiveCallback('leftDoubleClick', movement.position);
-    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-    var mouseOutObject;
-    handler.setInputAction(function (movement) {
-      if (_self._handlersMuted == true) return;
-      var pickedObject = scene.pick(movement.endPosition);
-      if (
-        mouseOutObject &&
-        (!pickedObject || mouseOutObject != pickedObject.primitive)
-      ) {
-        !(mouseOutObject.isDestroyed && mouseOutObject.isDestroyed()) &&
-          mouseOutObject.mouseOut(movement.endPosition);
-        mouseOutObject = null;
-      }
-      if (pickedObject && pickedObject.primitive) {
-        pickedObject = pickedObject.primitive;
-        if (pickedObject.mouseOut) {
-          mouseOutObject = pickedObject;
-        }
-        if (pickedObject.mouseMove) {
-          pickedObject.mouseMove(movement.endPosition);
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-    handler.setInputAction(function (movement) {
-      callPrimitiveCallback('leftUp', movement.position);
-    }, Cesium.ScreenSpaceEventType.LEFT_UP);
-    handler.setInputAction(function (movement) {
-      callPrimitiveCallback('leftDown', movement.position);
-    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-  };
-
-  _.prototype.setListener = function (primitive, type, callback) {
-    primitive[type] = callback;
-  };
-
-  _.prototype.muteHandlers = function (muted) {
-    this._handlersMuted = muted;
-  };
-
-  // register event handling for an editable shape
-  // shape should implement setEditMode and setHighlighted
-  _.prototype.registerEditableShape = function (surface) {
-    var _self = this;
-
-    // handlers for interactions
-    // highlight polygon when mouse is entering
-    setListener(surface, 'mouseMove', function (position) {
-      surface.setHighlighted(true);
-      if (!surface._editMode) {
-        _self._tooltip.showAt(position, 'Click to edit this shape');
-      }
-    });
-    // hide the highlighting when mouse is leaving the polygon
-    setListener(surface, 'mouseOut', function (position) {
-      surface.setHighlighted(false);
-      _self._tooltip.setVisible(false);
-    });
-    setListener(surface, 'leftClick', function (position) {
-      surface.setEditMode(true);
-    });
-  };
-
-  _.prototype.startDrawing = function (cleanUp) {
-    // undo any current edit of shapes
-    this.disableAllEditMode();
-    // check for cleanUp first
-    if (this.editCleanUp) {
-      this.editCleanUp();
-    }
-    this.editCleanUp = cleanUp;
-    this.muteHandlers(true);
-  };
-
-  _.prototype.stopDrawing = function () {
-    // check for cleanUp first
-    if (this.editCleanUp) {
-      this.editCleanUp();
-      this.editCleanUp = null;
-    }
-    this.muteHandlers(false);
-  };
-
-  // make sure only one shape is highlighted at a time
-  _.prototype.disableAllHighlights = function () {
-    this.setHighlighted(undefined);
-  };
-
-  _.prototype.setHighlighted = function (surface) {
-    if (
-      this._highlightedSurface &&
-      !this._highlightedSurface.isDestroyed() &&
-      this._highlightedSurface != surface
-    ) {
-      this._highlightedSurface.setHighlighted(false);
-    }
-    this._highlightedSurface = surface;
-  };
-
-  _.prototype.disableAllEditMode = function () {
-    this.setEdited(undefined);
-  };
-
-  _.prototype.setEdited = function (surface) {
-    if (this._editedSurface && !this._editedSurface.isDestroyed()) {
-      this._editedSurface.setEditMode(false);
-    }
-    this._editedSurface = surface;
-  };
-
-  var defaultShapeOptions = {
-    ellipsoid: Cesium.Ellipsoid.WGS84,
-    textureRotationAngle: 0.0,
-    height: 0.0,
-    asynchronous: true,
-    show: true,
-    debugShowBoundingVolume: false,
-  };
-
-  var defaultSurfaceOptions = copyOptions(defaultShapeOptions, {
-    appearance: new Cesium.EllipsoidSurfaceAppearance({
-      aboveGround: false,
-    }),
-    material: material,
-    granularity: Math.PI / 180.0,
-  });
-
-  var defaultPolygonOptions = copyOptions(defaultShapeOptions, {});
-  var defaultExtentOptions = copyOptions(defaultShapeOptions, {});
-  var defaultCircleOptions = copyOptions(defaultShapeOptions, {});
-  var defaultEllipseOptions = copyOptions(defaultSurfaceOptions, {
-    rotation: 0,
-  });
-
-  var defaultPolylineOptions = copyOptions(defaultShapeOptions, {
-    width: 5,
-    geodesic: true,
-    granularity: 10000,
-    appearance: new Cesium.PolylineMaterialAppearance({
-      aboveGround: false,
-    }),
-    material: material,
-  });
-
-  //    Cesium.Polygon.prototype.setStrokeStyle = setStrokeStyle;
-  //
-  //    Cesium.Polygon.prototype.drawOutline = drawOutline;
-  //
-
-  var ChangeablePrimitive = (function () {
-    function _() {}
-
-    _.prototype.initialiseOptions = function (options) {
-      fillOptions(this, options);
-
-      this._ellipsoid = undefined;
-      this._granularity = undefined;
-      this._height = undefined;
-      this._textureRotationAngle = undefined;
-      this._id = undefined;
-
-      // set the flags to initiate a first drawing
-      this._createPrimitive = true;
-      this._primitive = undefined;
-      this._outlinePolygon = undefined;
-    };
-
-    _.prototype.setAttribute = function (name, value) {
-      this[name] = value;
-      this._createPrimitive = true;
-    };
-
-    _.prototype.getAttribute = function (name) {
-      return this[name];
-    };
-
-    /**
-     * @private
-     */
-    _.prototype.update = function (context, frameState, commandList) {
-      if (!Cesium.defined(this.ellipsoid)) {
-        throw new Cesium.DeveloperError('this.ellipsoid must be defined.');
-      }
-
-      if (!Cesium.defined(this.appearance)) {
-        throw new Cesium.DeveloperError('this.material must be defined.');
-      }
-
-      if (this.granularity < 0.0) {
-        throw new Cesium.DeveloperError(
-          'this.granularity and scene2D/scene3D overrides must be greater than zero.'
-        );
-      }
-
-      if (!this.show) {
-        return;
-      }
-
-      if (!this._createPrimitive && !Cesium.defined(this._primitive)) {
-        // No positions/hierarchy to draw
-        return;
-      }
-
-      if (
-        this._createPrimitive ||
-        this._ellipsoid !== this.ellipsoid ||
-        this._granularity !== this.granularity ||
-        this._height !== this.height ||
-        this._textureRotationAngle !== this.textureRotationAngle ||
-        this._id !== this.id
-      ) {
-        var geometry = this.getGeometry();
-        if (!geometry) {
-          return;
-        }
-
-        this._createPrimitive = false;
-        this._ellipsoid = this.ellipsoid;
-        this._granularity = this.granularity;
-        this._height = this.height;
-        this._textureRotationAngle = this.textureRotationAngle;
-        this._id = this.id;
-
-        this._primitive = this._primitive && this._primitive.destroy();
-
-        this._primitive = new Cesium.Primitive({
-          geometryInstances: new Cesium.GeometryInstance({
-            geometry: geometry,
-            id: this.id,
-            pickPrimitive: this,
-          }),
-          appearance: this.appearance,
-          asynchronous: this.asynchronous,
-        });
-
-        this._outlinePolygon =
-          this._outlinePolygon && this._outlinePolygon.destroy();
-        if (this.strokeColor && this.getOutlineGeometry) {
-          // create the highlighting frame
-          this._outlinePolygon = new Cesium.Primitive({
-            geometryInstances: new Cesium.GeometryInstance({
-              geometry: this.getOutlineGeometry(),
-              attributes: {
-                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
-                  this.strokeColor
-                ),
-              },
-            }),
-            appearance: new Cesium.PerInstanceColorAppearance({
-              flat: true,
-              renderState: {
-                depthTest: {
-                  enabled: true,
-                },
-                //MC_CHANGE
-                lineWidth: this.strokeWidth || 4.0,
-                // lineWidth : Math.min(this.strokeWidth || 4.0, context._aliasedLineWidthRange[1])
-              },
-            }),
-          });
-        }
-      }
-
-      var primitive = this._primitive;
-      primitive.appearance.material = this.material;
-      primitive.debugShowBoundingVolume = this.debugShowBoundingVolume;
-
-      primitive.update(context, frameState, commandList);
-
-      this._outlinePolygon &&
-        this._outlinePolygon.update(context, frameState, commandList);
-    };
-
-    _.prototype.isDestroyed = function () {
-      return false;
-    };
-
-    _.prototype.destroy = function () {
-      this._primitive = this._primitive && this._primitive.destroy();
-      return Cesium.destroyObject(this);
-    };
-
-    _.prototype.setStrokeStyle = function (strokeColor, strokeWidth) {
-      if (
-        !this.strokeColor ||
-        !this.strokeColor.equals(strokeColor) ||
-        this.strokeWidth != strokeWidth
-      ) {
-        this._createPrimitive = true;
-        this.strokeColor = strokeColor;
-        this.strokeWidth = strokeWidth;
-      }
-    };
-
-    return _;
-  })();
-
-  _.ExtentPrimitive = (function () {
-    function _(options) {
-      if (!Cesium.defined(options.extent)) {
-        throw new Cesium.DeveloperError('Extent is required');
-      }
-
-      options = copyOptions(options, defaultSurfaceOptions);
-
-      this.initialiseOptions(options);
-
-      this.setExtent(options.extent);
-    }
-
-    _.prototype = new ChangeablePrimitive();
-
-    _.prototype.setExtent = function (extent) {
-      this.setAttribute('extent', extent);
-    };
-
-    _.prototype.getExtent = function () {
-      return this.getAttribute('extent');
-    };
-
-    _.prototype.getGeometry = function () {
-      if (!Cesium.defined(this.extent)) {
-        return;
-      }
-
-      return new Cesium.RectangleGeometry({
-        rectangle: this.extent,
-        height: this.height,
-        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
-        stRotation: this.textureRotationAngle,
-        ellipsoid: this.ellipsoid,
-        granularity: this.granularity,
-      });
-    };
-
-    _.prototype.getOutlineGeometry = function () {
-      return new Cesium.RectangleOutlineGeometry({
-        rectangle: this.extent,
-      });
-    };
-
-    return _;
-  })();
-
-  _.PolygonPrimitive = (function () {
-    function _(options) {
-      options = copyOptions(options, defaultSurfaceOptions);
-
-      this.initialiseOptions(options);
-
-      this.isPolygon = true;
-    }
-
-    _.prototype = new ChangeablePrimitive();
-
-    _.prototype.setPositions = function (positions) {
-      this.setAttribute('positions', positions);
-    };
-
-    _.prototype.getPositions = function () {
-      return this.getAttribute('positions');
-    };
-
-    _.prototype.getGeometry = function () {
-      if (!Cesium.defined(this.positions) || this.positions.length < 3) {
-        return;
-      }
-
-      return Cesium.PolygonGeometry.fromPositions({
-        positions: this.positions,
-        height: this.height,
-        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
-        stRotation: this.textureRotationAngle,
-        ellipsoid: this.ellipsoid,
-        granularity: this.granularity,
-      });
-    };
-
-    _.prototype.getOutlineGeometry = function () {
-      return Cesium.PolygonOutlineGeometry.fromPositions({
-        positions: this.getPositions(),
-      });
-    };
-
-    return _;
-  })();
-
-  _.CirclePrimitive = (function () {
-    function _(options) {
-      if (!(Cesium.defined(options.center) && Cesium.defined(options.radius))) {
-        throw new Cesium.DeveloperError('Center and radius are required');
-      }
-
-      options = copyOptions(options, defaultSurfaceOptions);
-
-      this.initialiseOptions(options);
-
-      this.setRadius(options.radius);
-    }
-
-    _.prototype = new ChangeablePrimitive();
-
-    _.prototype.setCenter = function (center) {
-      this.setAttribute('center', center);
-    };
-
-    _.prototype.setRadius = function (radius) {
-      this.setAttribute('radius', Math.max(0.1, radius));
-    };
-
-    _.prototype.getCenter = function () {
-      return this.getAttribute('center');
-    };
-
-    _.prototype.getRadius = function () {
-      return this.getAttribute('radius');
-    };
-
-    _.prototype.getGeometry = function () {
-      if (!(Cesium.defined(this.center) && Cesium.defined(this.radius))) {
-        return;
-      }
-
-      return new Cesium.CircleGeometry({
-        center: this.center,
-        radius: this.radius,
-        height: this.height,
-        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
-        stRotation: this.textureRotationAngle,
-        ellipsoid: this.ellipsoid,
-        granularity: this.granularity,
-      });
-    };
-
-    _.prototype.getOutlineGeometry = function () {
-      return new Cesium.CircleOutlineGeometry({
-        center: this.getCenter(),
-        radius: this.getRadius(),
-      });
-    };
-
-    return _;
-  })();
-
-  _.EllipsePrimitive = (function () {
-    function _(options) {
-      if (
-        !(
-          Cesium.defined(options.center) &&
-          Cesium.defined(options.semiMajorAxis) &&
-          Cesium.defined(options.semiMinorAxis)
-        )
-      ) {
-        throw new Cesium.DeveloperError(
-          'Center and semi major and semi minor axis are required'
-        );
-      }
-
-      options = copyOptions(options, defaultEllipseOptions);
-
-      this.initialiseOptions(options);
-    }
-
-    _.prototype = new ChangeablePrimitive();
-
-    _.prototype.setCenter = function (center) {
-      this.setAttribute('center', center);
-    };
-
-    _.prototype.setSemiMajorAxis = function (semiMajorAxis) {
-      if (semiMajorAxis < this.getSemiMinorAxis()) return;
-      this.setAttribute('semiMajorAxis', semiMajorAxis);
-    };
-
-    _.prototype.setSemiMinorAxis = function (semiMinorAxis) {
-      if (semiMinorAxis > this.getSemiMajorAxis()) return;
-      this.setAttribute('semiMinorAxis', semiMinorAxis);
-    };
-
-    _.prototype.setRotation = function (rotation) {
-      return this.setAttribute('rotation', rotation);
-    };
-
-    _.prototype.getCenter = function () {
-      return this.getAttribute('center');
-    };
-
-    _.prototype.getSemiMajorAxis = function () {
-      return this.getAttribute('semiMajorAxis');
-    };
-
-    _.prototype.getSemiMinorAxis = function () {
-      return this.getAttribute('semiMinorAxis');
-    };
-
-    _.prototype.getRotation = function () {
-      return this.getAttribute('rotation');
-    };
-
-    _.prototype.getGeometry = function () {
-      if (
-        !(
-          Cesium.defined(this.center) &&
-          Cesium.defined(this.semiMajorAxis) &&
-          Cesium.defined(this.semiMinorAxis)
-        )
-      ) {
-        return;
-      }
-
-      return new Cesium.EllipseGeometry({
-        ellipsoid: this.ellipsoid,
-        center: this.center,
-        semiMajorAxis: this.semiMajorAxis,
-        semiMinorAxis: this.semiMinorAxis,
-        rotation: this.rotation,
-        height: this.height,
-        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
-        stRotation: this.textureRotationAngle,
-        ellipsoid: this.ellipsoid,
-        granularity: this.granularity,
-      });
-    };
-
-    _.prototype.getOutlineGeometry = function () {
-      return new Cesium.EllipseOutlineGeometry({
-        center: this.getCenter(),
-        semiMajorAxis: this.getSemiMajorAxis(),
-        semiMinorAxis: this.getSemiMinorAxis(),
-        rotation: this.getRotation(),
-      });
-    };
-
-    return _;
-  })();
-
-  _.PolylinePrimitive = (function () {
-    function _(options) {
-      options = copyOptions(options, defaultPolylineOptions);
-
-      this.initialiseOptions(options);
-    }
-
-    _.prototype = new ChangeablePrimitive();
-
-    _.prototype.setPositions = function (positions) {
-      this.setAttribute('positions', positions);
-    };
-
-    _.prototype.setWidth = function (width) {
-      this.setAttribute('width', width);
-    };
-
-    _.prototype.setGeodesic = function (geodesic) {
-      this.setAttribute('geodesic', geodesic);
-    };
-
-    _.prototype.getPositions = function () {
-      return this.getAttribute('positions');
-    };
-
-    _.prototype.getWidth = function () {
-      return this.getAttribute('width');
-    };
-
-    _.prototype.getGeodesic = function (geodesic) {
-      return this.getAttribute('geodesic');
-    };
-
-    _.prototype.getGeometry = function () {
-      if (!Cesium.defined(this.positions) || this.positions.length < 2) {
-        return;
-      }
-
-      return new Cesium.PolylineGeometry({
-        positions: this.positions,
-        height: this.height,
-        width: this.width < 1 ? 1 : this.width,
-        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
-        ellipsoid: this.ellipsoid,
-      });
-    };
-
-    return _;
-  })();
-
-  var defaultBillboard = {
-    iconUrl: './assets/img/dragIcon.png',
-    shiftX: 0,
-    shiftY: 0,
-  };
-
-  var dragBillboard = {
-    iconUrl: './assets/img/dragIcon.png',
-    shiftX: 0,
-    shiftY: 0,
-  };
-
-  var dragHalfBillboard = {
-    iconUrl: './assets/img/dragIconLight.png',
-    shiftX: 0,
-    shiftY: 0,
-  };
-
-  _.prototype.createBillboardGroup = function (points, options, callbacks) {
-    var markers = new _.BillboardGroup(this, options);
-    markers.addBillboards(points, callbacks);
-    return markers;
-  };
-
-  _.BillboardGroup = function (drawHelper, options) {
-    this._drawHelper = drawHelper;
-    this._scene = drawHelper._scene;
-
-    this._options = copyOptions(options, defaultBillboard);
-
-    // create one common billboard collection for all billboards
-    var b = new Cesium.BillboardCollection();
-    this._scene.primitives.add(b);
-    this._billboards = b;
-    // keep an ordered list of billboards
-    this._orderedBillboards = [];
-  };
-
-  _.BillboardGroup.prototype.createBillboard = function (position, callbacks) {
-    var billboard = this._billboards.add({
-      show: true,
-      position: position,
-      pixelOffset: new Cesium.Cartesian2(
-        this._options.shiftX,
-        this._options.shiftY
-      ),
-      eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
-      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-      verticalOrigin: Cesium.VerticalOrigin.CENTER,
-      scale: 1.0,
-      image: this._options.iconUrl,
-      color: drawingVertexColor,
-    });
-
-    // if editable
-    if (callbacks) {
-      var _self = this;
-      var screenSpaceCameraController = this._scene.screenSpaceCameraController;
-      function enableRotation(enable) {
-        screenSpaceCameraController.enableRotate = enable;
-      }
-      function getIndex() {
-        // find index
-        for (
-          var i = 0, I = _self._orderedBillboards.length;
-          i < I && _self._orderedBillboards[i] != billboard;
-          ++i
-        );
-        return i;
-      }
-      if (callbacks.dragHandlers) {
-        var _self = this;
-        setListener(billboard, 'leftDown', function (position) {
-          // TODO - start the drag handlers here
-          // create handlers for mouseOut and leftUp for the billboard and a mouseMove
-          function onDrag(position) {
-            billboard.position = position;
-            // find index
-            for (
-              var i = 0, I = _self._orderedBillboards.length;
-              i < I && _self._orderedBillboards[i] != billboard;
-              ++i
-            );
-            callbacks.dragHandlers.onDrag &&
-              callbacks.dragHandlers.onDrag(getIndex(), position);
-          }
-          function onDragEnd(position) {
-            handler.destroy();
-            enableRotation(true);
-            callbacks.dragHandlers.onDragEnd &&
-              callbacks.dragHandlers.onDragEnd(getIndex(), position);
-          }
-
-          var handler = new Cesium.ScreenSpaceEventHandler(_self._scene.canvas);
-
-          handler.setInputAction(function (movement) {
-            var cartesian = _self._scene.camera.pickEllipsoid(
-              movement.endPosition,
-              ellipsoid
-            );
-            if (cartesian) {
-              onDrag(cartesian);
-            } else {
-              onDragEnd(cartesian);
-            }
-          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
-          handler.setInputAction(function (movement) {
-            onDragEnd(
-              _self._scene.camera.pickEllipsoid(movement.position, ellipsoid)
-            );
-          }, Cesium.ScreenSpaceEventType.LEFT_UP);
-
-          enableRotation(false);
-
-          callbacks.dragHandlers.onDragStart &&
-            callbacks.dragHandlers.onDragStart(
-              getIndex(),
-              _self._scene.camera.pickEllipsoid(position, ellipsoid)
-            );
-        });
-      }
-      if (callbacks.onDoubleClick) {
-        setListener(billboard, 'leftDoubleClick', function (position) {
-          callbacks.onDoubleClick(getIndex());
-        });
-      }
-      if (callbacks.onClick) {
-        setListener(billboard, 'leftClick', function (position) {
-          callbacks.onClick(getIndex());
-        });
-      }
-      if (callbacks.tooltip) {
-        setListener(billboard, 'mouseMove', function (position) {
-          _self._drawHelper._tooltip.showAt(position, callbacks.tooltip());
-        });
-        setListener(billboard, 'mouseOut', function (position) {
-          _self._drawHelper._tooltip.setVisible(false);
-        });
-      }
-    }
-
-    return billboard;
-  };
-
-  _.BillboardGroup.prototype.insertBillboard = function (
-    index,
-    position,
-    callbacks
-  ) {
-    this._orderedBillboards.splice(
-      index,
-      0,
-      this.createBillboard(position, callbacks)
-    );
-  };
-
-  _.BillboardGroup.prototype.addBillboard = function (position, callbacks) {
-    this._orderedBillboards.push(this.createBillboard(position, callbacks));
-  };
-
-  _.BillboardGroup.prototype.addBillboards = function (positions, callbacks) {
-    var index = 0;
-    for (; index < positions.length; index++) {
-      this.addBillboard(positions[index], callbacks);
-    }
-  };
-
-  _.BillboardGroup.prototype.updateBillboardsPositions = function (positions) {
-    var index = 0;
-    for (; index < positions.length; index++) {
-      this.getBillboard(index).position = positions[index];
-    }
-  };
-
-  _.BillboardGroup.prototype.countBillboards = function () {
-    return this._orderedBillboards.length;
-  };
-
-  _.BillboardGroup.prototype.getBillboard = function (index) {
-    return this._orderedBillboards[index];
-  };
-
-  _.BillboardGroup.prototype.removeBillboard = function (index) {
-    this._billboards.remove(this.getBillboard(index));
-    this._orderedBillboards.splice(index, 1);
-  };
-
-  _.BillboardGroup.prototype.remove = function () {
-    this._billboards =
-      this._billboards &&
-      this._billboards.removeAll() &&
-      this._billboards.destroy();
-  };
-
-  _.BillboardGroup.prototype.setOnTop = function () {
-    this._scene.primitives.raiseToTop(this._billboards);
-  };
-
-  _.prototype.startDrawingMarker = function (options) {
-    var options = copyOptions(options, defaultBillboard);
-
-    this.startDrawing(function () {
-      markers.remove();
-      mouseHandler.destroy();
-      tooltip.setVisible(false);
-    });
-
-    var _self = this;
-    var scene = this._scene;
-    var primitives = scene.primitives;
-    var tooltip = this._tooltip;
-
-    var markers = new _.BillboardGroup(this, options);
-
-    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-
-    // Now wait for start
-    mouseHandler.setInputAction(function (movement) {
-      if (movement.position != null) {
-        var cartesian = scene.camera.pickEllipsoid(
-          movement.position,
-          ellipsoid
-        );
-        if (cartesian) {
-          markers.addBillboard(cartesian);
-          _self.stopDrawing();
-          options.callback(cartesian);
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-    mouseHandler.setInputAction(function (movement) {
-      var position = movement.endPosition;
-      if (position != null) {
-        var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
-        if (cartesian) {
-          tooltip.showAt(
-            position,
-            '<p>Click to add your marker. Position is: </p>' +
-              getDisplayLatLngString(
-                ellipsoid.cartesianToCartographic(cartesian)
-              )
-          );
-        } else {
-          tooltip.showAt(
-            position,
-            '<p>Click on the globe to add your marker.</p>'
-          );
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-  };
-
-  _.prototype.startDrawingPolygon = function (options) {
-    var options = copyOptions(options, defaultSurfaceOptions);
-    this.startDrawingPolyshape(true, options);
-  };
-
-  _.prototype.startDrawingPolyline = function (options) {
-    var options = copyOptions(options, defaultPolylineOptions);
-    this.startDrawingPolyshape(false, options);
-  };
-
-  _.prototype.startDrawingPolyshape = function (isPolygon, options) {
-    this.startDrawing(function () {
-      primitives.remove(poly);
-      markers.remove();
-      mouseHandler.destroy();
-      tooltip.setVisible(false);
-      unsetDrawCursor(scene);
-    });
-
-    var _self = this;
-    var scene = this._scene;
-    var primitives = scene.primitives;
-    var tooltip = this._tooltip;
-
-    var minPoints = isPolygon ? 3 : 2;
-    var poly;
-    if (isPolygon) {
-      poly = new DrawHelper.PolygonPrimitive(options);
-    } else {
-      poly = new DrawHelper.PolylinePrimitive(options);
-    }
-    poly.asynchronous = false;
-    primitives.add(poly);
-
-    var positions = [];
-    var markers = new _.BillboardGroup(this, defaultBillboard);
-
-    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-    setDrawCursor(scene);
-
-    // Now wait for start
-    mouseHandler.setInputAction(function (movement) {
-      if (movement.position != null) {
-        var cartesian = scene.camera.pickEllipsoid(
-          movement.position,
-          ellipsoid
-        );
-        if (cartesian) {
-          // first click
-          if (positions.length == 0) {
-            positions.push(cartesian.clone());
-            markers.addBillboard(positions[0]);
-          }
-          if (positions.length >= minPoints) {
-            poly.positions = positions;
-            poly._createPrimitive = true;
-          }
-          // add new point to polygon
-          // this one will move with the mouse
-          positions.push(cartesian);
-          // add marker at the new position
-          markers.addBillboard(cartesian);
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-    mouseHandler.setInputAction(function (movement) {
-      var position = movement.endPosition;
-      if (position != null) {
-        if (positions.length == 0) {
-          tooltip.showAt(position, '<p>Click to add first point</p>');
-        } else {
-          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
-          if (cartesian) {
-            positions.pop();
-            // make sure it is slightly different
-            cartesian.y += 1 + Math.random();
-            positions.push(cartesian);
-            if (positions.length >= minPoints) {
-              poly.positions = positions;
-              poly._createPrimitive = true;
-            }
-            // update marker
-            markers.getBillboard(positions.length - 1).position = cartesian;
-            // show tooltip
-            tooltip.showAt(
-              position,
-              '<p>Click to add new point (' +
-                positions.length +
-                ')</p>' +
-                (positions.length > minPoints
-                  ? '<p>Double click to finish drawing</p>'
-                  : '')
-            );
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
-    mouseHandler.setInputAction(function (movement) {
-      var position = movement.position;
-      if (position != null) {
-        if (positions.length < minPoints + 2) {
-          return;
-        } else {
-          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
-          if (cartesian) {
-            unsetDrawCursor(scene);
-            _self.stopDrawing();
-            if (typeof options.callback == 'function') {
-              // remove overlapping ones
-              var index = positions.length - 1;
-              options.callback(positions);
-            }
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-  };
-
-  function getExtentCorners(value) {
-    return ellipsoid.cartographicArrayToCartesianArray([
-      Cesium.Rectangle.northwest(value),
-      Cesium.Rectangle.northeast(value),
-      Cesium.Rectangle.southeast(value),
-      Cesium.Rectangle.southwest(value),
-    ]);
-  }
-
-  // MC_CHANGE add to change draw mode cursor
-  function setDrawCursor(scene) {
-    if (scene) {
-      scene.canvas.style.cursor = 'crosshair';
-    }
-  }
-
-  // MC_CHANGE add to restore regular mode
-  function unsetDrawCursor(scene) {
-    if (scene) {
-      scene.canvas.style.cursor = '';
-    }
-  }
-
-  _.prototype.startDrawingExtent = function (options) {
-    var options = copyOptions(options, defaultSurfaceOptions);
-
-    this.startDrawing(function () {
-      if (extent != null) {
-        primitives.remove(extent);
-      }
-      //MC_CHANGE if added
-      if (markers != null) {
-        markers.remove();
-      }
-      mouseHandler.destroy();
-      tooltip.setVisible(false);
-      unsetDrawCursor(scene);
-    });
-
-    var _self = this;
-    var scene = this._scene;
-    var primitives = this._scene.primitives;
-    var tooltip = this._tooltip;
-
-    var firstPoint = null;
-    var extent = null;
-    var markers = null;
-
-    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-    setDrawCursor(scene);
-
-    function updateExtent(value) {
-      if (extent == null) {
-        //MC_CHANGE
-        extent = new DrawHelper.ExtentPrimitive({
-          extent: value,
-          material: options.material,
-        });
-        //extent = new Cesium.RectanglePrimitive();
-        extent.asynchronous = false;
-        primitives.add(extent);
-      }
-      extent.setExtent(value);
-      // update the markers
-      var corners = getExtentCorners(value);
-      // create if they do not yet exist
-      if (markers == null) {
-        markers = new _.BillboardGroup(_self, defaultBillboard);
-        markers.addBillboards(corners);
-      } else {
-        markers.updateBillboardsPositions(corners);
-      }
-    }
-
-    // Now wait for start
-    mouseHandler.setInputAction(function (movement) {
-      if (movement.position != null) {
-        var cartesian = scene.camera.pickEllipsoid(
-          movement.position,
-          ellipsoid
-        );
-        if (cartesian) {
-          if (extent == null) {
-            // create the rectangle
-            firstPoint = ellipsoid.cartesianToCartographic(cartesian);
-            var value = getExtent(firstPoint, firstPoint);
-            updateExtent(value);
-          } else {
-            _self.stopDrawing();
-            if (typeof options.callback == 'function') {
-              options.callback(
-                getExtent(
-                  firstPoint,
-                  ellipsoid.cartesianToCartographic(cartesian)
-                )
-              );
-            }
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-
-    mouseHandler.setInputAction(function (movement) {
-      var position = movement.endPosition;
-      if (position != null) {
-        if (extent == null) {
-          tooltip.showAt(position, '<p>Click to start drawing rectangle</p>');
-        } else {
-          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
-          if (cartesian) {
-            var value = getExtent(
-              firstPoint,
-              ellipsoid.cartesianToCartographic(cartesian)
-            );
-            updateExtent(value);
-            tooltip.showAt(
-              position,
-              '<p>Drag to change rectangle extent</p><p>Click again to finish drawing</p>'
-            );
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-  };
-
-  _.prototype.startDrawingCircle = function (options) {
-    var options = copyOptions(options, defaultSurfaceOptions);
-
-    this.startDrawing(function cleanUp() {
-      if (circle != null) {
-        primitives.remove(circle);
-      }
-      markers.remove();
-      mouseHandler.destroy();
-      tooltip.setVisible(false);
-    });
-
-    var _self = this;
-    var scene = this._scene;
-    var primitives = this._scene.primitives;
-    var tooltip = this._tooltip;
-
-    var circle = null;
-    var markers = null;
-
-    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
-
-    // Now wait for start
-    mouseHandler.setInputAction(function (movement) {
-      if (movement.position != null) {
-        var cartesian = scene.camera.pickEllipsoid(
-          movement.position,
-          ellipsoid
-        );
-        if (cartesian) {
-          if (circle == null) {
-            // create the circle
-            circle = new _.CirclePrimitive({
-              center: cartesian,
-              radius: 0,
-              asynchronous: false,
-              material: options.material,
-            });
-            primitives.add(circle);
-            markers = new _.BillboardGroup(_self, defaultBillboard);
-            markers.addBillboards([cartesian]);
-          } else {
-            if (typeof options.callback == 'function') {
-              options.callback(circle.getCenter(), circle.getRadius());
-            }
-            _self.stopDrawing();
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
-
-    mouseHandler.setInputAction(function (movement) {
-      var position = movement.endPosition;
-      if (position != null) {
-        if (circle == null) {
-          tooltip.showAt(position, '<p>Click to start drawing the circle</p>');
-        } else {
-          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
-          if (cartesian) {
-            circle.setRadius(
-              Cesium.Cartesian3.distance(circle.getCenter(), cartesian)
-            );
-            markers.updateBillboardsPositions(cartesian);
-            tooltip.showAt(
-              position,
-              '<p>Move mouse to change circle radius</p><p>Click again to finish drawing</p>'
-            );
-          }
-        }
-      }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-  };
-
-  _.prototype.enhancePrimitives = function () {
-    var drawHelper = this;
-
-    Cesium.Billboard.prototype.setEditable = function () {
-      if (this._editable) {
-        return;
-      }
-
-      this._editable = true;
-
-      var billboard = this;
-
-      var _self = this;
-
-      function enableRotation(enable) {
-        drawHelper._scene.screenSpaceCameraController.enableRotate = enable;
-      }
-
-      setListener(billboard, 'leftDown', function (position) {
-        // TODO - start the drag handlers here
-        // create handlers for mouseOut and leftUp for the billboard and a mouseMove
-        function onDrag(position) {
-          billboard.position = position;
-          _self.executeListeners({ name: 'drag', positions: position });
-        }
-        function onDragEnd(position) {
-          handler.destroy();
-          enableRotation(true);
-          _self.executeListeners({ name: 'dragEnd', positions: position });
-        }
-
-        var handler = new Cesium.ScreenSpaceEventHandler(
-          drawHelper._scene.canvas
-        );
-
-        handler.setInputAction(function (movement) {
-          var cartesian = drawHelper._scene.camera.pickEllipsoid(
-            movement.endPosition,
-            ellipsoid
-          );
-          if (cartesian) {
-            onDrag(cartesian);
-          } else {
-            onDragEnd(cartesian);
-          }
-        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-
-        handler.setInputAction(function (movement) {
-          onDragEnd(
-            drawHelper._scene.camera.pickEllipsoid(movement.position, ellipsoid)
-          );
-        }, Cesium.ScreenSpaceEventType.LEFT_UP);
-
-        enableRotation(false);
-      });
-
-      enhanceWithListeners(billboard);
-    };
-
-    function setHighlighted(highlighted) {
-      var scene = drawHelper._scene;
-
-      // if no change
-      // if already highlighted, the outline polygon will be available
-      if (this._highlighted && this._highlighted == highlighted) {
-        return;
-      }
-      // disable if already in edit mode
-      if (this._editMode === true) {
-        return;
-      }
-      this._highlighted = highlighted;
-      // highlight by creating an outline polygon matching the polygon points
-      if (highlighted) {
-        // make sure all other shapes are not highlighted
-        drawHelper.setHighlighted(this);
-        this._strokeColor = this.strokeColor;
-        this.setStrokeStyle(
-          Cesium.Color.fromCssColorString('white'),
-          this.strokeWidth
-        );
-      } else {
-        if (this._strokeColor) {
-          this.setStrokeStyle(this._strokeColor, this.strokeWidth);
-        } else {
-          this.setStrokeStyle(undefined, undefined);
-        }
-      }
-    }
-
-    function setEditMode(editMode) {
-      // if no change
-      if (this._editMode == editMode) {
-        return;
-      }
-      // make sure all other shapes are not in edit mode before starting the editing of this shape
-      drawHelper.disableAllHighlights();
-      // display markers
-      if (editMode) {
-        drawHelper.setEdited(this);
-        var scene = drawHelper._scene;
-        var _self = this;
-        // create the markers and handlers for the editing
-        if (this._markers == null) {
-          var markers = new _.BillboardGroup(drawHelper, dragBillboard);
-          var editMarkers = new _.BillboardGroup(drawHelper, dragHalfBillboard);
-          // function for updating the edit markers around a certain point
-          function updateHalfMarkers(index, positions) {
-            // update the half markers before and after the index
-            var editIndex = index - 1 < 0 ? positions.length - 1 : index - 1;
-            if (editIndex < editMarkers.countBillboards()) {
-              editMarkers.getBillboard(
-                editIndex
-              ).position = calculateHalfMarkerPosition(editIndex);
-            }
-            editIndex = index;
-            if (editIndex < editMarkers.countBillboards()) {
-              editMarkers.getBillboard(
-                editIndex
-              ).position = calculateHalfMarkerPosition(editIndex);
-            }
-          }
-          function onEdited() {
-            _self.executeListeners({
-              name: 'onEdited',
-              positions: _self.positions,
-            });
-          }
-          var handleMarkerChanges = {
-            dragHandlers: {
-              onDrag: function (index, position) {
-                _self.positions[index] = position;
-                updateHalfMarkers(index, _self.positions);
-                _self._createPrimitive = true;
-              },
-              onDragEnd: function (index, position) {
-                _self._createPrimitive = true;
-                onEdited();
-              },
-            },
-            onDoubleClick: function (index) {
-              if (_self.positions.length < 4) {
-                return;
-              }
-              // remove the point and the corresponding markers
-              _self.positions.splice(index, 1);
-              _self._createPrimitive = true;
-              markers.removeBillboard(index);
-              editMarkers.removeBillboard(index);
-              updateHalfMarkers(index, _self.positions);
-              onEdited();
-            },
-            tooltip: function () {
-              if (_self.positions.length > 3) {
-                return 'Double click to remove this point';
-              }
-            },
-          };
-          // add billboards and keep an ordered list of them for the polygon edges
-          markers.addBillboards(_self.positions, handleMarkerChanges);
-          this._markers = markers;
-          function calculateHalfMarkerPosition(index) {
-            var positions = _self.positions;
-            return ellipsoid.cartographicToCartesian(
-              new Cesium.EllipsoidGeodesic(
-                ellipsoid.cartesianToCartographic(positions[index]),
-                ellipsoid.cartesianToCartographic(
-                  positions[index < positions.length - 1 ? index + 1 : 0]
-                )
-              ).interpolateUsingFraction(0.5)
-            );
-          }
-          var halfPositions = [];
-          var index = 0;
-          var length = _self.positions.length + (this.isPolygon ? 0 : -1);
-          for (; index < length; index++) {
-            halfPositions.push(calculateHalfMarkerPosition(index));
-          }
-          var handleEditMarkerChanges = {
-            dragHandlers: {
-              onDragStart: function (index, position) {
-                // add a new position to the polygon but not a new marker yet
-                this.index = index + 1;
-                _self.positions.splice(this.index, 0, position);
-                _self._createPrimitive = true;
-              },
-              onDrag: function (index, position) {
-                _self.positions[this.index] = position;
-                _self._createPrimitive = true;
-              },
-              onDragEnd: function (index, position) {
-                // create new sets of makers for editing
-                markers.insertBillboard(
-                  this.index,
-                  position,
-                  handleMarkerChanges
-                );
-                editMarkers.getBillboard(
-                  this.index - 1
-                ).position = calculateHalfMarkerPosition(this.index - 1);
-                editMarkers.insertBillboard(
-                  this.index,
-                  calculateHalfMarkerPosition(this.index),
-                  handleEditMarkerChanges
-                );
-                _self._createPrimitive = true;
-                onEdited();
-              },
-            },
-            tooltip: function () {
-              return 'Drag to create a new point';
-            },
-          };
-          editMarkers.addBillboards(halfPositions, handleEditMarkerChanges);
-          this._editMarkers = editMarkers;
-          // add a handler for clicking in the globe
-          this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
-            scene.canvas
-          );
-          this._globeClickhandler.setInputAction(function (movement) {
-            var pickedObject = scene.pick(movement.position);
-            if (!(pickedObject && pickedObject.primitive)) {
-              _self.setEditMode(false);
-            }
-          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-          // set on top of the polygon
-          markers.setOnTop();
-          editMarkers.setOnTop();
-        }
-        this._editMode = true;
-      } else {
-        if (this._markers != null) {
-          this._markers.remove();
-          this._editMarkers.remove();
-          this._markers = null;
-          this._editMarkers = null;
-          this._globeClickhandler.destroy();
-        }
-        this._editMode = false;
-      }
-    }
-
-    DrawHelper.PolylinePrimitive.prototype.setEditable = function () {
-      if (this.setEditMode) {
-        return;
-      }
-
-      var polyline = this;
-      polyline.isPolygon = false;
-      polyline.asynchronous = false;
-
-      drawHelper.registerEditableShape(polyline);
-
-      polyline.setEditMode = setEditMode;
-
-      var originalWidth = this.width;
-
-      polyline.setHighlighted = function (highlighted) {
-        // disable if already in edit mode
-        if (this._editMode === true) {
-          return;
-        }
-        if (highlighted) {
-          drawHelper.setHighlighted(this);
-          this.setWidth(originalWidth * 2);
-        } else {
-          this.setWidth(originalWidth);
-        }
-      };
-
-      polyline.getExtent = function () {
-        return Cesium.Extent.fromCartographicArray(
-          ellipsoid.cartesianArrayToCartographicArray(this.positions)
-        );
-      };
-
-      enhanceWithListeners(polyline);
-
-      polyline.setEditMode(false);
-    };
-
-    DrawHelper.PolygonPrimitive.prototype.setEditable = function () {
-      var polygon = this;
-      polygon.asynchronous = false;
-
-      var scene = drawHelper._scene;
-
-      drawHelper.registerEditableShape(polygon);
-
-      polygon.setEditMode = setEditMode;
-
-      polygon.setHighlighted = setHighlighted;
-
-      enhanceWithListeners(polygon);
-
-      polygon.setEditMode(false);
-    };
-
-    DrawHelper.ExtentPrimitive.prototype.setEditable = function () {
-      if (this.setEditMode) {
-        return;
-      }
-
-      var extent = this;
-      var scene = drawHelper._scene;
-
-      drawHelper.registerEditableShape(extent);
-      extent.asynchronous = false;
-
-      extent.setEditMode = function (editMode) {
-        // if no change
-        if (this._editMode == editMode) {
-          return;
-        }
-        drawHelper.disableAllHighlights();
-        // display markers
-        if (editMode) {
-          // make sure all other shapes are not in edit mode before starting the editing of this shape
-          drawHelper.setEdited(this);
-          // create the markers and handlers for the editing
-          if (this._markers == null) {
-            var markers = new _.BillboardGroup(drawHelper, dragBillboard);
-            function onEdited() {
-              extent.executeListeners({
-                name: 'onEdited',
-                extent: extent.extent,
-              });
-            }
-            var handleMarkerChanges = {
-              dragHandlers: {
-                onDrag: function (index, position) {
-                  var corner = markers.getBillboard((index + 2) % 4).position;
-                  extent.setExtent(
-                    getExtent(
-                      ellipsoid.cartesianToCartographic(corner),
-                      ellipsoid.cartesianToCartographic(position)
-                    )
-                  );
-                  markers.updateBillboardsPositions(
-                    getExtentCorners(extent.extent)
-                  );
-                },
-                onDragEnd: function (index, position) {
-                  onEdited();
-                },
-              },
-              tooltip: function () {
-                return 'Drag to change the corners of this extent';
-              },
-            };
-            markers.addBillboards(
-              getExtentCorners(extent.extent),
-              handleMarkerChanges
-            );
-            this._markers = markers;
-            // add a handler for clicking in the globe
-            this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
-              scene.canvas
-            );
-            this._globeClickhandler.setInputAction(function (movement) {
-              var pickedObject = scene.pick(movement.position);
-              // disable edit if pickedobject is different or not an object
-              if (
-                !(
-                  pickedObject &&
-                  !pickedObject.isDestroyed() &&
-                  pickedObject.primitive
-                )
-              ) {
-                extent.setEditMode(false);
-              }
-            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-            // set on top of the polygon
-            markers.setOnTop();
-          }
-          this._editMode = true;
-        } else {
-          if (this._markers != null) {
-            this._markers.remove();
-            this._markers = null;
-            this._globeClickhandler.destroy();
-          }
-          this._editMode = false;
-        }
-      };
-
-      extent.setHighlighted = setHighlighted;
-
-      enhanceWithListeners(extent);
-
-      extent.setEditMode(false);
-    };
-
-    _.EllipsePrimitive.prototype.setEditable = function () {
-      if (this.setEditMode) {
-        return;
-      }
-
-      var ellipse = this;
-      var scene = drawHelper._scene;
-
-      ellipse.asynchronous = false;
-
-      drawHelper.registerEditableShape(ellipse);
-
-      ellipse.setEditMode = function (editMode) {
-        // if no change
-        if (this._editMode == editMode) {
-          return;
-        }
-        drawHelper.disableAllHighlights();
-        // display markers
-        if (editMode) {
-          // make sure all other shapes are not in edit mode before starting the editing of this shape
-          drawHelper.setEdited(this);
-          var _self = this;
-          // create the markers and handlers for the editing
-          if (this._markers == null) {
-            var markers = new _.BillboardGroup(drawHelper, dragBillboard);
-            function getMarkerPositions() {
-              return Cesium.Shapes.computeEllipseBoundary(
-                ellipsoid,
-                ellipse.getCenter(),
-                ellipse.getSemiMajorAxis(),
-                ellipse.getSemiMinorAxis(),
-                ellipse.getRotation() + Math.PI / 2,
-                Math.PI / 2.0
-              ).splice(0, 4);
-            }
-            function onEdited() {
-              ellipse.executeListeners({
-                name: 'onEdited',
-                center: ellipse.getCenter(),
-                semiMajorAxis: ellipse.getSemiMajorAxis(),
-                semiMinorAxis: ellipse.getSemiMinorAxis(),
-                rotation: 0,
-              });
-            }
-            var handleMarkerChanges = {
-              dragHandlers: {
-                onDrag: function (index, position) {
-                  var distance = Cesium.Cartesian3.distance(
-                    ellipse.getCenter(),
-                    position
-                  );
-                  if (index % 2 == 0) {
-                    ellipse.setSemiMajorAxis(distance);
-                  } else {
-                    ellipse.setSemiMinorAxis(distance);
-                  }
-                  markers.updateBillboardsPositions(getMarkerPositions());
-                },
-                onDragEnd: function (index, position) {
-                  onEdited();
-                },
-              },
-              tooltip: function () {
-                return 'Drag to change the excentricity and radius';
-              },
-            };
-            markers.addBillboards(getMarkerPositions(), handleMarkerChanges);
-            this._markers = markers;
-            // add a handler for clicking in the globe
-            this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
-              scene.canvas
-            );
-            this._globeClickhandler.setInputAction(function (movement) {
-              var pickedObject = scene.pick(movement.position);
-              if (!(pickedObject && pickedObject.primitive)) {
-                _self.setEditMode(false);
-              }
-            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-            // set on top of the polygon
-            markers.setOnTop();
-          }
-          this._editMode = true;
-        } else {
-          if (this._markers != null) {
-            this._markers.remove();
-            this._markers = null;
-            this._globeClickhandler.destroy();
-          }
-          this._editMode = false;
-        }
-      };
-
-      ellipse.setHighlighted = setHighlighted;
-
-      enhanceWithListeners(ellipse);
-
-      ellipse.setEditMode(false);
-    };
-
-    _.CirclePrimitive.prototype.getCircleCartesianCoordinates = function (
-      granularity
-    ) {
-      var geometry = Cesium.CircleOutlineGeometry.createGeometry(
-        new Cesium.CircleOutlineGeometry({
-          ellipsoid: ellipsoid,
-          center: this.getCenter(),
-          radius: this.getRadius(),
-          granularity: granularity,
-        })
-      );
-      var count = 0,
-        value,
-        values = [];
-      for (; count < geometry.attributes.position.values.length; count += 3) {
-        value = geometry.attributes.position.values;
-        values.push(
-          new Cesium.Cartesian3(
-            value[count],
-            value[count + 1],
-            value[count + 2]
-          )
-        );
-      }
-      return values;
-    };
-
-    _.CirclePrimitive.prototype.setEditable = function () {
-      if (this.setEditMode) {
-        return;
-      }
-
-      var circle = this;
-      var scene = drawHelper._scene;
-
-      circle.asynchronous = false;
-
-      drawHelper.registerEditableShape(circle);
-
-      circle.setEditMode = function (editMode) {
-        // if no change
-        if (this._editMode == editMode) {
-          return;
-        }
-        drawHelper.disableAllHighlights();
-        // display markers
-        if (editMode) {
-          // make sure all other shapes are not in edit mode before starting the editing of this shape
-          drawHelper.setEdited(this);
-          var _self = this;
-          // create the markers and handlers for the editing
-          if (this._markers == null) {
-            var markers = new _.BillboardGroup(drawHelper, dragBillboard);
-            function getMarkerPositions() {
-              return _self.getCircleCartesianCoordinates(
-                Cesium.Math.PI_OVER_TWO
-              );
-            }
-            function onEdited() {
-              circle.executeListeners({
-                name: 'onEdited',
-                center: circle.getCenter(),
-                radius: circle.getRadius(),
-              });
-            }
-            var handleMarkerChanges = {
-              dragHandlers: {
-                onDrag: function (index, position) {
-                  circle.setRadius(
-                    Cesium.Cartesian3.distance(circle.getCenter(), position)
-                  );
-                  markers.updateBillboardsPositions(getMarkerPositions());
-                },
-                onDragEnd: function (index, position) {
-                  onEdited();
-                },
-              },
-              tooltip: function () {
-                return 'Drag to change the radius';
-              },
-            };
-            markers.addBillboards(getMarkerPositions(), handleMarkerChanges);
-            this._markers = markers;
-            // add a handler for clicking in the globe
-            this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
-              scene.canvas
-            );
-            this._globeClickhandler.setInputAction(function (movement) {
-              var pickedObject = scene.pick(movement.position);
-              if (!(pickedObject && pickedObject.primitive)) {
-                _self.setEditMode(false);
-              }
-            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-
-            // set on top of the polygon
-            markers.setOnTop();
-          }
-          this._editMode = true;
-        } else {
-          if (this._markers != null) {
-            this._markers.remove();
-            this._markers = null;
-            this._globeClickhandler.destroy();
-          }
-          this._editMode = false;
-        }
-      };
-
-      circle.setHighlighted = setHighlighted;
-
-      enhanceWithListeners(circle);
-
-      circle.setEditMode(false);
-    };
-  };
-
-  _.DrawHelperWidget = (function () {
-    // constructor
-    function _(drawHelper, options) {
-      // container must be specified
-      if (!Cesium.defined(options.container)) {
-        throw new Cesium.DeveloperError('Container is required');
-      }
-
-      var drawOptions = {
-        markerIcon: './assets/img/glyphicons_242_google_maps.png',
-        polylineIcon: './assets/img/glyphicons_097_vector_path_line.png',
-        polygonIcon: './assets/img/glyphicons_096_vector_path_polygon.png',
-        circleIcon: './assets/img/glyphicons_095_vector_path_circle.png',
-        extentIcon: './assets/img/glyphicons_094_vector_path_square.png',
-        clearIcon: './assets/img/glyphicons_067_cleaning.png',
-        polylineDrawingOptions: defaultPolylineOptions,
-        polygonDrawingOptions: defaultPolygonOptions,
-        extentDrawingOptions: defaultExtentOptions,
-        circleDrawingOptions: defaultCircleOptions,
-      };
-
-      fillOptions(options, drawOptions);
-
-      var _self = this;
-
-      var toolbar = document.createElement('DIV');
-      toolbar.className = 'toolbar';
-      options.container.appendChild(toolbar);
-
-      function addIcon(id, url, title, callback) {
-        var div = document.createElement('DIV');
-        div.className = 'button';
-        div.title = title;
-        toolbar.appendChild(div);
-        div.onclick = callback;
-        var span = document.createElement('SPAN');
-        div.appendChild(span);
-        var image = document.createElement('IMG');
-        image.src = url;
-        span.appendChild(image);
-        return div;
-      }
-
-      var scene = drawHelper._scene;
-
-      addIcon(
-        'marker',
-        options.markerIcon,
-        'Click to start drawing a 2D marker',
-        function () {
-          drawHelper.startDrawingMarker({
-            callback: function (position) {
-              _self.executeListeners({
-                name: 'markerCreated',
-                position: position,
-              });
-            },
-          });
-        }
-      );
-
-      addIcon(
-        'polyline',
-        options.polylineIcon,
-        'Click to start drawing a 2D polyline',
-        function () {
-          drawHelper.startDrawingPolyline({
-            callback: function (positions) {
-              _self.executeListeners({
-                name: 'polylineCreated',
-                positions: positions,
-              });
-            },
-          });
-        }
-      );
-
-      addIcon(
-        'polygon',
-        options.polygonIcon,
-        'Click to start drawing a 2D polygon',
-        function () {
-          drawHelper.startDrawingPolygon({
-            callback: function (positions) {
-              _self.executeListeners({
-                name: 'polygonCreated',
-                positions: positions,
-              });
-            },
-          });
-        }
-      );
-
-      addIcon(
-        'extent',
-        options.extentIcon,
-        'Click to start drawing an Extent',
-        function () {
-          drawHelper.startDrawingExtent({
-            callback: function (extent) {
-              _self.executeListeners({ name: 'extentCreated', extent: extent });
-            },
-          });
-        }
-      );
-
-      addIcon(
-        'circle',
-        options.circleIcon,
-        'Click to start drawing a Circle',
-        function () {
-          drawHelper.startDrawingCircle({
-            callback: function (center, radius) {
-              _self.executeListeners({
-                name: 'circleCreated',
-                center: center,
-                radius: radius,
-              });
-            },
-          });
-        }
-      );
-
-      // add a clear button at the end
-      // add a divider first
-      var div = document.createElement('DIV');
-      div.className = 'divider';
-      toolbar.appendChild(div);
-      addIcon('clear', options.clearIcon, 'Remove all primitives', function () {
-        scene.primitives.removeAll();
-      });
-
-      enhanceWithListeners(this);
-    }
-
-    return _;
-  })();
-
-  _.prototype.addToolbar = function (container, options) {
-    options = copyOptions(options, { container: container });
-    return new _.DrawHelperWidget(this, options);
-  };
-
-  function getExtent(mn, mx) {
-    var e = new Cesium.Rectangle();
-
-    // Re-order so west < east and south < north
-    e.west = Math.min(mn.longitude, mx.longitude);
-    e.east = Math.max(mn.longitude, mx.longitude);
-    e.south = Math.min(mn.latitude, mx.latitude);
-    e.north = Math.max(mn.latitude, mx.latitude);
-
-    // Check for approx equal (shouldn't require abs due to re-order)
-    var epsilon = Cesium.Math.EPSILON7;
-
-    if (e.east - e.west < epsilon) {
-      e.east += epsilon * 2.0;
-    }
-
-    if (e.north - e.south < epsilon) {
-      e.north += epsilon * 2.0;
-    }
-
-    return e;
-  }
-
-  function createTooltip(frameDiv) {
-    var tooltip = function (frameDiv) {
-      var div = document.createElement('DIV');
-      div.className = 'twipsy right';
-
-      var arrow = document.createElement('DIV');
-      arrow.className = 'twipsy-arrow';
-      div.appendChild(arrow);
-
-      var title = document.createElement('DIV');
-      title.className = 'twipsy-inner';
-      div.appendChild(title);
-
-      this._div = div;
-      this._title = title;
-
-      // add to frame div and display coordinates
-      frameDiv.appendChild(div);
-    };
-
-    tooltip.prototype.setVisible = function (visible) {
-      this._div.style.display = visible ? 'block' : 'none';
-    };
-
-    tooltip.prototype.showAt = function (position, message) {
-      if (position && message) {
-        this.setVisible(true);
-        this._title.innerHTML = message;
-        this._div.style.left = position.x + 10 + 'px';
-        this._div.style.top = position.y - this._div.clientHeight / 2 + 'px';
-      }
-    };
-
-    return new tooltip(frameDiv);
-  }
-
-  function getDisplayLatLngString(cartographic, precision) {
-    return (
-      cartographic.longitude.toFixed(precision || 3) +
-      ', ' +
-      cartographic.latitude.toFixed(precision || 3)
-    );
-  }
-
-  function clone(from, to) {
-    if (from == null || typeof from != 'object') return from;
-    if (from.constructor != Object && from.constructor != Array) return from;
-    if (
-      from.constructor == Date ||
-      from.constructor == RegExp ||
-      from.constructor == Function ||
-      from.constructor == String ||
-      from.constructor == Number ||
-      from.constructor == Boolean
-    )
-      return new from.constructor(from);
-
-    to = to || new from.constructor();
-
-    for (var name in from) {
-      to[name] =
-        typeof to[name] == 'undefined' ? clone(from[name], null) : to[name];
-    }
-
-    return to;
-  }
-
-  function fillOptions(options, defaultOptions) {
-    options = options || {};
-    var option;
-    for (option in defaultOptions) {
-      if (options[option] === undefined) {
-        options[option] = clone(defaultOptions[option]);
-      }
-    }
-  }
-
-  // shallow copy
-  function copyOptions(options, defaultOptions) {
-    var newOptions = clone(options),
-      option;
-    for (option in defaultOptions) {
-      if (newOptions[option] === undefined) {
-        newOptions[option] = clone(defaultOptions[option]);
-      }
-    }
-    return newOptions;
-  }
-
-  function setListener(primitive, type, callback) {
-    primitive[type] = callback;
-  }
-
-  function enhanceWithListeners(element) {
-    element._listeners = {};
-
-    element.addListener = function (name, callback) {
-      this._listeners[name] = this._listeners[name] || [];
-      this._listeners[name].push(callback);
-      return this._listeners[name].length;
-    };
-
-    element.executeListeners = function (event, defaultCallback) {
-      if (
-        this._listeners[event.name] &&
-        this._listeners[event.name].length > 0
-      ) {
-        var index = 0;
-        for (; index < this._listeners[event.name].length; index++) {
-          this._listeners[event.name][index](event);
-        }
-      } else {
-        if (defaultCallback) {
-          defaultCallback(event);
-        }
-      }
-    };
-  }
-
-  return _;
-})();
-
-export { DrawHelper };
+// inspired by https://github.com/leforthomas/cesium-drawhelper
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import * as Cesium from 'cesium';
+import './drawHelper.css';
+/* eslint-disable */
+var DrawHelper = (function () {
+  // static variables
+  var ellipsoid = Cesium.Ellipsoid.WGS84;
+  var drawingVertexColor;
+  var material = Cesium.Material.fromType(Cesium.Material.ColorType);
+
+  // constructor
+  function _(
+    cesiumWidget,
+    materialClr = new Cesium.Color(1.0, 1.0, 0.0, 0.5),
+    drawingVertexClr = new Cesium.Color(1.0, 1.0, 1.0, 1.0)
+  ) {
+    this._scene = cesiumWidget.scene;
+
+    // UPDATE scoped varibles
+    material.uniforms.color = materialClr;
+    drawingVertexColor = drawingVertexClr;
+
+    //MC_CHANGE disable/override tooltip
+    this._tooltip = {
+      setVisible: () => {},
+      showAt: () => {},
+    };
+    // this._tooltip = createTooltip(cesiumWidget.container);
+    this._surfaces = [];
+
+    this.initialiseHandlers();
+
+    this.enhancePrimitives();
+  }
+
+  _.prototype.initialiseHandlers = function () {
+    var scene = this._scene;
+    var _self = this;
+    // scene events
+    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+    function callPrimitiveCallback(name, position) {
+      if (_self._handlersMuted == true) return;
+      var pickedObject = scene.pick(position);
+      if (
+        pickedObject &&
+        pickedObject.primitive &&
+        pickedObject.primitive[name]
+      ) {
+        pickedObject.primitive[name](position);
+      }
+    }
+    handler.setInputAction(function (movement) {
+      callPrimitiveCallback('leftClick', movement.position);
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    handler.setInputAction(function (movement) {
+      callPrimitiveCallback('leftDoubleClick', movement.position);
+    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+    var mouseOutObject;
+    handler.setInputAction(function (movement) {
+      if (_self._handlersMuted == true) return;
+      var pickedObject = scene.pick(movement.endPosition);
+      if (
+        mouseOutObject &&
+        (!pickedObject || mouseOutObject != pickedObject.primitive)
+      ) {
+        !(mouseOutObject.isDestroyed && mouseOutObject.isDestroyed()) &&
+          mouseOutObject.mouseOut(movement.endPosition);
+        mouseOutObject = null;
+      }
+      if (pickedObject && pickedObject.primitive) {
+        pickedObject = pickedObject.primitive;
+        if (pickedObject.mouseOut) {
+          mouseOutObject = pickedObject;
+        }
+        if (pickedObject.mouseMove) {
+          pickedObject.mouseMove(movement.endPosition);
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    handler.setInputAction(function (movement) {
+      callPrimitiveCallback('leftUp', movement.position);
+    }, Cesium.ScreenSpaceEventType.LEFT_UP);
+    handler.setInputAction(function (movement) {
+      callPrimitiveCallback('leftDown', movement.position);
+    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+  };
+
+  _.prototype.setListener = function (primitive, type, callback) {
+    primitive[type] = callback;
+  };
+
+  _.prototype.muteHandlers = function (muted) {
+    this._handlersMuted = muted;
+  };
+
+  // register event handling for an editable shape
+  // shape should implement setEditMode and setHighlighted
+  _.prototype.registerEditableShape = function (surface) {
+    var _self = this;
+
+    // handlers for interactions
+    // highlight polygon when mouse is entering
+    setListener(surface, 'mouseMove', function (position) {
+      surface.setHighlighted(true);
+      if (!surface._editMode) {
+        _self._tooltip.showAt(position, 'Click to edit this shape');
+      }
+    });
+    // hide the highlighting when mouse is leaving the polygon
+    setListener(surface, 'mouseOut', function (position) {
+      surface.setHighlighted(false);
+      _self._tooltip.setVisible(false);
+    });
+    setListener(surface, 'leftClick', function (position) {
+      surface.setEditMode(true);
+    });
+  };
+
+  _.prototype.startDrawing = function (cleanUp) {
+    // undo any current edit of shapes
+    this.disableAllEditMode();
+    // check for cleanUp first
+    if (this.editCleanUp) {
+      this.editCleanUp();
+    }
+    this.editCleanUp = cleanUp;
+    this.muteHandlers(true);
+  };
+
+  _.prototype.stopDrawing = function () {
+    // check for cleanUp first
+    if (this.editCleanUp) {
+      this.editCleanUp();
+      this.editCleanUp = null;
+    }
+    this.muteHandlers(false);
+  };
+
+  // make sure only one shape is highlighted at a time
+  _.prototype.disableAllHighlights = function () {
+    this.setHighlighted(undefined);
+  };
+
+  _.prototype.setHighlighted = function (surface) {
+    if (
+      this._highlightedSurface &&
+      !this._highlightedSurface.isDestroyed() &&
+      this._highlightedSurface != surface
+    ) {
+      this._highlightedSurface.setHighlighted(false);
+    }
+    this._highlightedSurface = surface;
+  };
+
+  _.prototype.disableAllEditMode = function () {
+    this.setEdited(undefined);
+  };
+
+  _.prototype.setEdited = function (surface) {
+    if (this._editedSurface && !this._editedSurface.isDestroyed()) {
+      this._editedSurface.setEditMode(false);
+    }
+    this._editedSurface = surface;
+  };
+
+  var defaultShapeOptions = {
+    ellipsoid: Cesium.Ellipsoid.WGS84,
+    textureRotationAngle: 0.0,
+    height: 0.0,
+    asynchronous: true,
+    show: true,
+    debugShowBoundingVolume: false,
+  };
+
+  var defaultSurfaceOptions = copyOptions(defaultShapeOptions, {
+    appearance: new Cesium.EllipsoidSurfaceAppearance({
+      aboveGround: false,
+    }),
+    material: material,
+    granularity: Math.PI / 180.0,
+  });
+
+  var defaultPolygonOptions = copyOptions(defaultShapeOptions, {});
+  var defaultExtentOptions = copyOptions(defaultShapeOptions, {});
+  var defaultCircleOptions = copyOptions(defaultShapeOptions, {});
+  var defaultEllipseOptions = copyOptions(defaultSurfaceOptions, {
+    rotation: 0,
+  });
+
+  var defaultPolylineOptions = copyOptions(defaultShapeOptions, {
+    width: 5,
+    geodesic: true,
+    granularity: 10000,
+    appearance: new Cesium.PolylineMaterialAppearance({
+      aboveGround: false,
+    }),
+    material: material,
+  });
+
+  //    Cesium.Polygon.prototype.setStrokeStyle = setStrokeStyle;
+  //
+  //    Cesium.Polygon.prototype.drawOutline = drawOutline;
+  //
+
+  var ChangeablePrimitive = (function () {
+    function _() {}
+
+    _.prototype.initialiseOptions = function (options) {
+      fillOptions(this, options);
+
+      this._ellipsoid = undefined;
+      this._granularity = undefined;
+      this._height = undefined;
+      this._textureRotationAngle = undefined;
+      this._id = undefined;
+
+      // set the flags to initiate a first drawing
+      this._createPrimitive = true;
+      this._primitive = undefined;
+      this._outlinePolygon = undefined;
+    };
+
+    _.prototype.setAttribute = function (name, value) {
+      this[name] = value;
+      this._createPrimitive = true;
+    };
+
+    _.prototype.getAttribute = function (name) {
+      return this[name];
+    };
+
+    /**
+     * @private
+     */
+    _.prototype.update = function (context, frameState, commandList) {
+      if (!Cesium.defined(this.ellipsoid)) {
+        throw new Cesium.DeveloperError('this.ellipsoid must be defined.');
+      }
+
+      if (!Cesium.defined(this.appearance)) {
+        throw new Cesium.DeveloperError('this.material must be defined.');
+      }
+
+      if (this.granularity < 0.0) {
+        throw new Cesium.DeveloperError(
+          'this.granularity and scene2D/scene3D overrides must be greater than zero.'
+        );
+      }
+
+      if (!this.show) {
+        return;
+      }
+
+      if (!this._createPrimitive && !Cesium.defined(this._primitive)) {
+        // No positions/hierarchy to draw
+        return;
+      }
+
+      if (
+        this._createPrimitive ||
+        this._ellipsoid !== this.ellipsoid ||
+        this._granularity !== this.granularity ||
+        this._height !== this.height ||
+        this._textureRotationAngle !== this.textureRotationAngle ||
+        this._id !== this.id
+      ) {
+        var geometry = this.getGeometry();
+        if (!geometry) {
+          return;
+        }
+
+        this._createPrimitive = false;
+        this._ellipsoid = this.ellipsoid;
+        this._granularity = this.granularity;
+        this._height = this.height;
+        this._textureRotationAngle = this.textureRotationAngle;
+        this._id = this.id;
+
+        this._primitive = this._primitive && this._primitive.destroy();
+
+        this._primitive = new Cesium.Primitive({
+          geometryInstances: new Cesium.GeometryInstance({
+            geometry: geometry,
+            id: this.id,
+            pickPrimitive: this,
+          }),
+          appearance: this.appearance,
+          asynchronous: this.asynchronous,
+        });
+
+        this._outlinePolygon =
+          this._outlinePolygon && this._outlinePolygon.destroy();
+        if (this.strokeColor && this.getOutlineGeometry) {
+          // create the highlighting frame
+          this._outlinePolygon = new Cesium.Primitive({
+            geometryInstances: new Cesium.GeometryInstance({
+              geometry: this.getOutlineGeometry(),
+              attributes: {
+                color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+                  this.strokeColor
+                ),
+              },
+            }),
+            appearance: new Cesium.PerInstanceColorAppearance({
+              flat: true,
+              renderState: {
+                depthTest: {
+                  enabled: true,
+                },
+                //MC_CHANGE
+                lineWidth: this.strokeWidth || 4.0,
+                // lineWidth : Math.min(this.strokeWidth || 4.0, context._aliasedLineWidthRange[1])
+              },
+            }),
+          });
+        }
+      }
+
+      var primitive = this._primitive;
+      primitive.appearance.material = this.material;
+      primitive.debugShowBoundingVolume = this.debugShowBoundingVolume;
+
+      primitive.update(context, frameState, commandList);
+
+      this._outlinePolygon &&
+        this._outlinePolygon.update(context, frameState, commandList);
+    };
+
+    _.prototype.isDestroyed = function () {
+      return false;
+    };
+
+    _.prototype.destroy = function () {
+      this._primitive = this._primitive && this._primitive.destroy();
+      return Cesium.destroyObject(this);
+    };
+
+    _.prototype.setStrokeStyle = function (strokeColor, strokeWidth) {
+      if (
+        !this.strokeColor ||
+        !this.strokeColor.equals(strokeColor) ||
+        this.strokeWidth != strokeWidth
+      ) {
+        this._createPrimitive = true;
+        this.strokeColor = strokeColor;
+        this.strokeWidth = strokeWidth;
+      }
+    };
+
+    return _;
+  })();
+
+  _.ExtentPrimitive = (function () {
+    function _(options) {
+      if (!Cesium.defined(options.extent)) {
+        throw new Cesium.DeveloperError('Extent is required');
+      }
+
+      options = copyOptions(options, defaultSurfaceOptions);
+
+      this.initialiseOptions(options);
+
+      this.setExtent(options.extent);
+    }
+
+    _.prototype = new ChangeablePrimitive();
+
+    _.prototype.setExtent = function (extent) {
+      this.setAttribute('extent', extent);
+    };
+
+    _.prototype.getExtent = function () {
+      return this.getAttribute('extent');
+    };
+
+    _.prototype.getGeometry = function () {
+      if (!Cesium.defined(this.extent)) {
+        return;
+      }
+
+      return new Cesium.RectangleGeometry({
+        rectangle: this.extent,
+        height: this.height,
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        stRotation: this.textureRotationAngle,
+        ellipsoid: this.ellipsoid,
+        granularity: this.granularity,
+      });
+    };
+
+    _.prototype.getOutlineGeometry = function () {
+      return new Cesium.RectangleOutlineGeometry({
+        rectangle: this.extent,
+      });
+    };
+
+    return _;
+  })();
+
+  _.PolygonPrimitive = (function () {
+    function _(options) {
+      options = copyOptions(options, defaultSurfaceOptions);
+
+      this.initialiseOptions(options);
+
+      this.isPolygon = true;
+    }
+
+    _.prototype = new ChangeablePrimitive();
+
+    _.prototype.setPositions = function (positions) {
+      this.setAttribute('positions', positions);
+    };
+
+    _.prototype.getPositions = function () {
+      return this.getAttribute('positions');
+    };
+
+    _.prototype.getGeometry = function () {
+      if (!Cesium.defined(this.positions) || this.positions.length < 3) {
+        return;
+      }
+
+      return Cesium.PolygonGeometry.fromPositions({
+        positions: this.positions,
+        height: this.height,
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        stRotation: this.textureRotationAngle,
+        ellipsoid: this.ellipsoid,
+        granularity: this.granularity,
+      });
+    };
+
+    _.prototype.getOutlineGeometry = function () {
+      return Cesium.PolygonOutlineGeometry.fromPositions({
+        positions: this.getPositions(),
+      });
+    };
+
+    return _;
+  })();
+
+  _.CirclePrimitive = (function () {
+    function _(options) {
+      if (!(Cesium.defined(options.center) && Cesium.defined(options.radius))) {
+        throw new Cesium.DeveloperError('Center and radius are required');
+      }
+
+      options = copyOptions(options, defaultSurfaceOptions);
+
+      this.initialiseOptions(options);
+
+      this.setRadius(options.radius);
+    }
+
+    _.prototype = new ChangeablePrimitive();
+
+    _.prototype.setCenter = function (center) {
+      this.setAttribute('center', center);
+    };
+
+    _.prototype.setRadius = function (radius) {
+      this.setAttribute('radius', Math.max(0.1, radius));
+    };
+
+    _.prototype.getCenter = function () {
+      return this.getAttribute('center');
+    };
+
+    _.prototype.getRadius = function () {
+      return this.getAttribute('radius');
+    };
+
+    _.prototype.getGeometry = function () {
+      if (!(Cesium.defined(this.center) && Cesium.defined(this.radius))) {
+        return;
+      }
+
+      return new Cesium.CircleGeometry({
+        center: this.center,
+        radius: this.radius,
+        height: this.height,
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        stRotation: this.textureRotationAngle,
+        ellipsoid: this.ellipsoid,
+        granularity: this.granularity,
+      });
+    };
+
+    _.prototype.getOutlineGeometry = function () {
+      return new Cesium.CircleOutlineGeometry({
+        center: this.getCenter(),
+        radius: this.getRadius(),
+      });
+    };
+
+    return _;
+  })();
+
+  _.EllipsePrimitive = (function () {
+    function _(options) {
+      if (
+        !(
+          Cesium.defined(options.center) &&
+          Cesium.defined(options.semiMajorAxis) &&
+          Cesium.defined(options.semiMinorAxis)
+        )
+      ) {
+        throw new Cesium.DeveloperError(
+          'Center and semi major and semi minor axis are required'
+        );
+      }
+
+      options = copyOptions(options, defaultEllipseOptions);
+
+      this.initialiseOptions(options);
+    }
+
+    _.prototype = new ChangeablePrimitive();
+
+    _.prototype.setCenter = function (center) {
+      this.setAttribute('center', center);
+    };
+
+    _.prototype.setSemiMajorAxis = function (semiMajorAxis) {
+      if (semiMajorAxis < this.getSemiMinorAxis()) return;
+      this.setAttribute('semiMajorAxis', semiMajorAxis);
+    };
+
+    _.prototype.setSemiMinorAxis = function (semiMinorAxis) {
+      if (semiMinorAxis > this.getSemiMajorAxis()) return;
+      this.setAttribute('semiMinorAxis', semiMinorAxis);
+    };
+
+    _.prototype.setRotation = function (rotation) {
+      return this.setAttribute('rotation', rotation);
+    };
+
+    _.prototype.getCenter = function () {
+      return this.getAttribute('center');
+    };
+
+    _.prototype.getSemiMajorAxis = function () {
+      return this.getAttribute('semiMajorAxis');
+    };
+
+    _.prototype.getSemiMinorAxis = function () {
+      return this.getAttribute('semiMinorAxis');
+    };
+
+    _.prototype.getRotation = function () {
+      return this.getAttribute('rotation');
+    };
+
+    _.prototype.getGeometry = function () {
+      if (
+        !(
+          Cesium.defined(this.center) &&
+          Cesium.defined(this.semiMajorAxis) &&
+          Cesium.defined(this.semiMinorAxis)
+        )
+      ) {
+        return;
+      }
+
+      return new Cesium.EllipseGeometry({
+        ellipsoid: this.ellipsoid,
+        center: this.center,
+        semiMajorAxis: this.semiMajorAxis,
+        semiMinorAxis: this.semiMinorAxis,
+        rotation: this.rotation,
+        height: this.height,
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        stRotation: this.textureRotationAngle,
+        ellipsoid: this.ellipsoid,
+        granularity: this.granularity,
+      });
+    };
+
+    _.prototype.getOutlineGeometry = function () {
+      return new Cesium.EllipseOutlineGeometry({
+        center: this.getCenter(),
+        semiMajorAxis: this.getSemiMajorAxis(),
+        semiMinorAxis: this.getSemiMinorAxis(),
+        rotation: this.getRotation(),
+      });
+    };
+
+    return _;
+  })();
+
+  _.PolylinePrimitive = (function () {
+    function _(options) {
+      options = copyOptions(options, defaultPolylineOptions);
+
+      this.initialiseOptions(options);
+    }
+
+    _.prototype = new ChangeablePrimitive();
+
+    _.prototype.setPositions = function (positions) {
+      this.setAttribute('positions', positions);
+    };
+
+    _.prototype.setWidth = function (width) {
+      this.setAttribute('width', width);
+    };
+
+    _.prototype.setGeodesic = function (geodesic) {
+      this.setAttribute('geodesic', geodesic);
+    };
+
+    _.prototype.getPositions = function () {
+      return this.getAttribute('positions');
+    };
+
+    _.prototype.getWidth = function () {
+      return this.getAttribute('width');
+    };
+
+    _.prototype.getGeodesic = function (geodesic) {
+      return this.getAttribute('geodesic');
+    };
+
+    _.prototype.getGeometry = function () {
+      if (!Cesium.defined(this.positions) || this.positions.length < 2) {
+        return;
+      }
+
+      return new Cesium.PolylineGeometry({
+        positions: this.positions,
+        height: this.height,
+        width: this.width < 1 ? 1 : this.width,
+        vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+        ellipsoid: this.ellipsoid,
+      });
+    };
+
+    return _;
+  })();
+
+  var defaultBillboard = {
+    iconUrl: './assets/img/dragIcon.png',
+    shiftX: 0,
+    shiftY: 0,
+  };
+
+  var dragBillboard = {
+    iconUrl: './assets/img/dragIcon.png',
+    shiftX: 0,
+    shiftY: 0,
+  };
+
+  var dragHalfBillboard = {
+    iconUrl: './assets/img/dragIconLight.png',
+    shiftX: 0,
+    shiftY: 0,
+  };
+
+  _.prototype.createBillboardGroup = function (points, options, callbacks) {
+    var markers = new _.BillboardGroup(this, options);
+    markers.addBillboards(points, callbacks);
+    return markers;
+  };
+
+  _.BillboardGroup = function (drawHelper, options) {
+    this._drawHelper = drawHelper;
+    this._scene = drawHelper._scene;
+
+    this._options = copyOptions(options, defaultBillboard);
+
+    // create one common billboard collection for all billboards
+    var b = new Cesium.BillboardCollection();
+    this._scene.primitives.add(b);
+    this._billboards = b;
+    // keep an ordered list of billboards
+    this._orderedBillboards = [];
+  };
+
+  _.BillboardGroup.prototype.createBillboard = function (position, callbacks) {
+    var billboard = this._billboards.add({
+      show: true,
+      position: position,
+      pixelOffset: new Cesium.Cartesian2(
+        this._options.shiftX,
+        this._options.shiftY
+      ),
+      eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
+      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+      verticalOrigin: Cesium.VerticalOrigin.CENTER,
+      scale: 1.0,
+      image: this._options.iconUrl,
+      color: drawingVertexColor,
+    });
+
+    // if editable
+    if (callbacks) {
+      var _self = this;
+      var screenSpaceCameraController = this._scene.screenSpaceCameraController;
+      function enableRotation(enable) {
+        screenSpaceCameraController.enableRotate = enable;
+      }
+      function getIndex() {
+        // find index
+        for (
+          var i = 0, I = _self._orderedBillboards.length;
+          i < I && _self._orderedBillboards[i] != billboard;
+          ++i
+        );
+        return i;
+      }
+      if (callbacks.dragHandlers) {
+        var _self = this;
+        setListener(billboard, 'leftDown', function (position) {
+          // TODO - start the drag handlers here
+          // create handlers for mouseOut and leftUp for the billboard and a mouseMove
+          function onDrag(position) {
+            billboard.position = position;
+            // find index
+            for (
+              var i = 0, I = _self._orderedBillboards.length;
+              i < I && _self._orderedBillboards[i] != billboard;
+              ++i
+            );
+            callbacks.dragHandlers.onDrag &&
+              callbacks.dragHandlers.onDrag(getIndex(), position);
+          }
+          function onDragEnd(position) {
+            handler.destroy();
+            enableRotation(true);
+            callbacks.dragHandlers.onDragEnd &&
+              callbacks.dragHandlers.onDragEnd(getIndex(), position);
+          }
+
+          var handler = new Cesium.ScreenSpaceEventHandler(_self._scene.canvas);
+
+          handler.setInputAction(function (movement) {
+            var cartesian = _self._scene.camera.pickEllipsoid(
+              movement.endPosition,
+              ellipsoid
+            );
+            if (cartesian) {
+              onDrag(cartesian);
+            } else {
+              onDragEnd(cartesian);
+            }
+          }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+          handler.setInputAction(function (movement) {
+            onDragEnd(
+              _self._scene.camera.pickEllipsoid(movement.position, ellipsoid)
+            );
+          }, Cesium.ScreenSpaceEventType.LEFT_UP);
+
+          enableRotation(false);
+
+          callbacks.dragHandlers.onDragStart &&
+            callbacks.dragHandlers.onDragStart(
+              getIndex(),
+              _self._scene.camera.pickEllipsoid(position, ellipsoid)
+            );
+        });
+      }
+      if (callbacks.onDoubleClick) {
+        setListener(billboard, 'leftDoubleClick', function (position) {
+          callbacks.onDoubleClick(getIndex());
+        });
+      }
+      if (callbacks.onClick) {
+        setListener(billboard, 'leftClick', function (position) {
+          callbacks.onClick(getIndex());
+        });
+      }
+      if (callbacks.tooltip) {
+        setListener(billboard, 'mouseMove', function (position) {
+          _self._drawHelper._tooltip.showAt(position, callbacks.tooltip());
+        });
+        setListener(billboard, 'mouseOut', function (position) {
+          _self._drawHelper._tooltip.setVisible(false);
+        });
+      }
+    }
+
+    return billboard;
+  };
+
+  _.BillboardGroup.prototype.insertBillboard = function (
+    index,
+    position,
+    callbacks
+  ) {
+    this._orderedBillboards.splice(
+      index,
+      0,
+      this.createBillboard(position, callbacks)
+    );
+  };
+
+  _.BillboardGroup.prototype.addBillboard = function (position, callbacks) {
+    this._orderedBillboards.push(this.createBillboard(position, callbacks));
+  };
+
+  _.BillboardGroup.prototype.addBillboards = function (positions, callbacks) {
+    var index = 0;
+    for (; index < positions.length; index++) {
+      this.addBillboard(positions[index], callbacks);
+    }
+  };
+
+  _.BillboardGroup.prototype.updateBillboardsPositions = function (positions) {
+    var index = 0;
+    for (; index < positions.length; index++) {
+      this.getBillboard(index).position = positions[index];
+    }
+  };
+
+  _.BillboardGroup.prototype.countBillboards = function () {
+    return this._orderedBillboards.length;
+  };
+
+  _.BillboardGroup.prototype.getBillboard = function (index) {
+    return this._orderedBillboards[index];
+  };
+
+  _.BillboardGroup.prototype.removeBillboard = function (index) {
+    this._billboards.remove(this.getBillboard(index));
+    this._orderedBillboards.splice(index, 1);
+  };
+
+  _.BillboardGroup.prototype.remove = function () {
+    this._billboards =
+      this._billboards &&
+      this._billboards.removeAll() &&
+      this._billboards.destroy();
+  };
+
+  _.BillboardGroup.prototype.setOnTop = function () {
+    this._scene.primitives.raiseToTop(this._billboards);
+  };
+
+  _.prototype.startDrawingMarker = function (options) {
+    var options = copyOptions(options, defaultBillboard);
+
+    this.startDrawing(function () {
+      markers.remove();
+      mouseHandler.destroy();
+      tooltip.setVisible(false);
+    });
+
+    var _self = this;
+    var scene = this._scene;
+    var primitives = scene.primitives;
+    var tooltip = this._tooltip;
+
+    var markers = new _.BillboardGroup(this, options);
+
+    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+
+    // Now wait for start
+    mouseHandler.setInputAction(function (movement) {
+      if (movement.position != null) {
+        var cartesian = scene.camera.pickEllipsoid(
+          movement.position,
+          ellipsoid
+        );
+        if (cartesian) {
+          markers.addBillboard(cartesian);
+          _self.stopDrawing();
+          options.callback(cartesian);
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    mouseHandler.setInputAction(function (movement) {
+      var position = movement.endPosition;
+      if (position != null) {
+        var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
+        if (cartesian) {
+          tooltip.showAt(
+            position,
+            '<p>Click to add your marker. Position is: </p>' +
+              getDisplayLatLngString(
+                ellipsoid.cartesianToCartographic(cartesian)
+              )
+          );
+        } else {
+          tooltip.showAt(
+            position,
+            '<p>Click on the globe to add your marker.</p>'
+          );
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  };
+
+  _.prototype.startDrawingPolygon = function (options) {
+    var options = copyOptions(options, defaultSurfaceOptions);
+    this.startDrawingPolyshape(true, options);
+  };
+
+  _.prototype.startDrawingPolyline = function (options) {
+    var options = copyOptions(options, defaultPolylineOptions);
+    this.startDrawingPolyshape(false, options);
+  };
+
+  _.prototype.startDrawingPolyshape = function (isPolygon, options) {
+    this.startDrawing(function () {
+      primitives.remove(poly);
+      markers.remove();
+      mouseHandler.destroy();
+      tooltip.setVisible(false);
+      unsetDrawCursor(scene);
+    });
+
+    var _self = this;
+    var scene = this._scene;
+    var primitives = scene.primitives;
+    var tooltip = this._tooltip;
+
+    var minPoints = isPolygon ? 3 : 2;
+    var poly;
+    if (isPolygon) {
+      poly = new DrawHelper.PolygonPrimitive(options);
+    } else {
+      poly = new DrawHelper.PolylinePrimitive(options);
+    }
+    poly.asynchronous = false;
+    primitives.add(poly);
+
+    var positions = [];
+    var markers = new _.BillboardGroup(this, defaultBillboard);
+
+    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+    setDrawCursor(scene);
+
+    // Now wait for start
+    mouseHandler.setInputAction(function (movement) {
+      if (movement.position != null) {
+        var cartesian = scene.camera.pickEllipsoid(
+          movement.position,
+          ellipsoid
+        );
+        if (cartesian) {
+          // first click
+          if (positions.length == 0) {
+            positions.push(cartesian.clone());
+            markers.addBillboard(positions[0]);
+          }
+          if (positions.length >= minPoints) {
+            poly.positions = positions;
+            poly._createPrimitive = true;
+          }
+          // add new point to polygon
+          // this one will move with the mouse
+          positions.push(cartesian);
+          // add marker at the new position
+          markers.addBillboard(cartesian);
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+    mouseHandler.setInputAction(function (movement) {
+      var position = movement.endPosition;
+      if (position != null) {
+        if (positions.length == 0) {
+          tooltip.showAt(position, '<p>Click to add first point</p>');
+        } else {
+          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
+          if (cartesian) {
+            positions.pop();
+            // make sure it is slightly different
+            cartesian.y += 1 + Math.random();
+            positions.push(cartesian);
+            if (positions.length >= minPoints) {
+              poly.positions = positions;
+              poly._createPrimitive = true;
+            }
+            // update marker
+            markers.getBillboard(positions.length - 1).position = cartesian;
+            // show tooltip
+            tooltip.showAt(
+              position,
+              '<p>Click to add new point (' +
+                positions.length +
+                ')</p>' +
+                (positions.length > minPoints
+                  ? '<p>Double click to finish drawing</p>'
+                  : '')
+            );
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+    mouseHandler.setInputAction(function (movement) {
+      var position = movement.position;
+      if (position != null) {
+        if (positions.length < minPoints + 2) {
+          return;
+        } else {
+          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
+          if (cartesian) {
+            unsetDrawCursor(scene);
+            _self.stopDrawing();
+            if (typeof options.callback == 'function') {
+              // remove overlapping ones
+              var index = positions.length - 1;
+              options.callback(positions);
+            }
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+  };
+
+  function getExtentCorners(value) {
+    return ellipsoid.cartographicArrayToCartesianArray([
+      Cesium.Rectangle.northwest(value),
+      Cesium.Rectangle.northeast(value),
+      Cesium.Rectangle.southeast(value),
+      Cesium.Rectangle.southwest(value),
+    ]);
+  }
+
+  // MC_CHANGE add to change draw mode cursor
+  function setDrawCursor(scene) {
+    if (scene) {
+      scene.canvas.style.cursor = 'crosshair';
+    }
+  }
+
+  // MC_CHANGE add to restore regular mode
+  function unsetDrawCursor(scene) {
+    if (scene) {
+      scene.canvas.style.cursor = '';
+    }
+  }
+
+  _.prototype.startDrawingExtent = function (options) {
+    var options = copyOptions(options, defaultSurfaceOptions);
+
+    this.startDrawing(function () {
+      if (extent != null) {
+        primitives.remove(extent);
+      }
+      //MC_CHANGE if added
+      if (markers != null) {
+        markers.remove();
+      }
+      mouseHandler.destroy();
+      tooltip.setVisible(false);
+      unsetDrawCursor(scene);
+    });
+
+    var _self = this;
+    var scene = this._scene;
+    var primitives = this._scene.primitives;
+    var tooltip = this._tooltip;
+
+    var firstPoint = null;
+    var extent = null;
+    var markers = null;
+
+    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+    setDrawCursor(scene);
+
+    function updateExtent(value) {
+      if (extent == null) {
+        //MC_CHANGE
+        extent = new DrawHelper.ExtentPrimitive({
+          extent: value,
+          material: options.material,
+        });
+        //extent = new Cesium.RectanglePrimitive();
+        extent.asynchronous = false;
+        primitives.add(extent);
+      }
+      extent.setExtent(value);
+      // update the markers
+      var corners = getExtentCorners(value);
+      // create if they do not yet exist
+      if (markers == null) {
+        markers = new _.BillboardGroup(_self, defaultBillboard);
+        markers.addBillboards(corners);
+      } else {
+        markers.updateBillboardsPositions(corners);
+      }
+    }
+
+    // Now wait for start
+    mouseHandler.setInputAction(function (movement) {
+      if (movement.position != null) {
+        var cartesian = scene.camera.pickEllipsoid(
+          movement.position,
+          ellipsoid
+        );
+        if (cartesian) {
+          if (extent == null) {
+            // create the rectangle
+            firstPoint = ellipsoid.cartesianToCartographic(cartesian);
+            var value = getExtent(firstPoint, firstPoint);
+            updateExtent(value);
+          } else {
+            _self.stopDrawing();
+            if (typeof options.callback == 'function') {
+              options.callback(
+                getExtent(
+                  firstPoint,
+                  ellipsoid.cartesianToCartographic(cartesian)
+                )
+              );
+            }
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+    mouseHandler.setInputAction(function (movement) {
+      var position = movement.endPosition;
+      if (position != null) {
+        if (extent == null) {
+          tooltip.showAt(position, '<p>Click to start drawing rectangle</p>');
+        } else {
+          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
+          if (cartesian) {
+            var value = getExtent(
+              firstPoint,
+              ellipsoid.cartesianToCartographic(cartesian)
+            );
+            updateExtent(value);
+            tooltip.showAt(
+              position,
+              '<p>Drag to change rectangle extent</p><p>Click again to finish drawing</p>'
+            );
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  };
+
+  _.prototype.startDrawingCircle = function (options) {
+    var options = copyOptions(options, defaultSurfaceOptions);
+
+    this.startDrawing(function cleanUp() {
+      if (circle != null) {
+        primitives.remove(circle);
+      }
+      markers.remove();
+      mouseHandler.destroy();
+      tooltip.setVisible(false);
+    });
+
+    var _self = this;
+    var scene = this._scene;
+    var primitives = this._scene.primitives;
+    var tooltip = this._tooltip;
+
+    var circle = null;
+    var markers = null;
+
+    var mouseHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+
+    // Now wait for start
+    mouseHandler.setInputAction(function (movement) {
+      if (movement.position != null) {
+        var cartesian = scene.camera.pickEllipsoid(
+          movement.position,
+          ellipsoid
+        );
+        if (cartesian) {
+          if (circle == null) {
+            // create the circle
+            circle = new _.CirclePrimitive({
+              center: cartesian,
+              radius: 0,
+              asynchronous: false,
+              material: options.material,
+            });
+            primitives.add(circle);
+            markers = new _.BillboardGroup(_self, defaultBillboard);
+            markers.addBillboards([cartesian]);
+          } else {
+            if (typeof options.callback == 'function') {
+              options.callback(circle.getCenter(), circle.getRadius());
+            }
+            _self.stopDrawing();
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
+
+    mouseHandler.setInputAction(function (movement) {
+      var position = movement.endPosition;
+      if (position != null) {
+        if (circle == null) {
+          tooltip.showAt(position, '<p>Click to start drawing the circle</p>');
+        } else {
+          var cartesian = scene.camera.pickEllipsoid(position, ellipsoid);
+          if (cartesian) {
+            circle.setRadius(
+              Cesium.Cartesian3.distance(circle.getCenter(), cartesian)
+            );
+            markers.updateBillboardsPositions(cartesian);
+            tooltip.showAt(
+              position,
+              '<p>Move mouse to change circle radius</p><p>Click again to finish drawing</p>'
+            );
+          }
+        }
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  };
+
+  _.prototype.enhancePrimitives = function () {
+    var drawHelper = this;
+
+    Cesium.Billboard.prototype.setEditable = function () {
+      if (this._editable) {
+        return;
+      }
+
+      this._editable = true;
+
+      var billboard = this;
+
+      var _self = this;
+
+      function enableRotation(enable) {
+        drawHelper._scene.screenSpaceCameraController.enableRotate = enable;
+      }
+
+      setListener(billboard, 'leftDown', function (position) {
+        // TODO - start the drag handlers here
+        // create handlers for mouseOut and leftUp for the billboard and a mouseMove
+        function onDrag(position) {
+          billboard.position = position;
+          _self.executeListeners({ name: 'drag', positions: position });
+        }
+        function onDragEnd(position) {
+          handler.destroy();
+          enableRotation(true);
+          _self.executeListeners({ name: 'dragEnd', positions: position });
+        }
+
+        var handler = new Cesium.ScreenSpaceEventHandler(
+          drawHelper._scene.canvas
+        );
+
+        handler.setInputAction(function (movement) {
+          var cartesian = drawHelper._scene.camera.pickEllipsoid(
+            movement.endPosition,
+            ellipsoid
+          );
+          if (cartesian) {
+            onDrag(cartesian);
+          } else {
+            onDragEnd(cartesian);
+          }
+        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+        handler.setInputAction(function (movement) {
+          onDragEnd(
+            drawHelper._scene.camera.pickEllipsoid(movement.position, ellipsoid)
+          );
+        }, Cesium.ScreenSpaceEventType.LEFT_UP);
+
+        enableRotation(false);
+      });
+
+      enhanceWithListeners(billboard);
+    };
+
+    function setHighlighted(highlighted) {
+      var scene = drawHelper._scene;
+
+      // if no change
+      // if already highlighted, the outline polygon will be available
+      if (this._highlighted && this._highlighted == highlighted) {
+        return;
+      }
+      // disable if already in edit mode
+      if (this._editMode === true) {
+        return;
+      }
+      this._highlighted = highlighted;
+      // highlight by creating an outline polygon matching the polygon points
+      if (highlighted) {
+        // make sure all other shapes are not highlighted
+        drawHelper.setHighlighted(this);
+        this._strokeColor = this.strokeColor;
+        this.setStrokeStyle(
+          Cesium.Color.fromCssColorString('white'),
+          this.strokeWidth
+        );
+      } else {
+        if (this._strokeColor) {
+          this.setStrokeStyle(this._strokeColor, this.strokeWidth);
+        } else {
+          this.setStrokeStyle(undefined, undefined);
+        }
+      }
+    }
+
+    function setEditMode(editMode) {
+      // if no change
+      if (this._editMode == editMode) {
+        return;
+      }
+      // make sure all other shapes are not in edit mode before starting the editing of this shape
+      drawHelper.disableAllHighlights();
+      // display markers
+      if (editMode) {
+        drawHelper.setEdited(this);
+        var scene = drawHelper._scene;
+        var _self = this;
+        // create the markers and handlers for the editing
+        if (this._markers == null) {
+          var markers = new _.BillboardGroup(drawHelper, dragBillboard);
+          var editMarkers = new _.BillboardGroup(drawHelper, dragHalfBillboard);
+          // function for updating the edit markers around a certain point
+          function updateHalfMarkers(index, positions) {
+            // update the half markers before and after the index
+            var editIndex = index - 1 < 0 ? positions.length - 1 : index - 1;
+            if (editIndex < editMarkers.countBillboards()) {
+              editMarkers.getBillboard(
+                editIndex
+              ).position = calculateHalfMarkerPosition(editIndex);
+            }
+            editIndex = index;
+            if (editIndex < editMarkers.countBillboards()) {
+              editMarkers.getBillboard(
+                editIndex
+              ).position = calculateHalfMarkerPosition(editIndex);
+            }
+          }
+          function onEdited() {
+            _self.executeListeners({
+              name: 'onEdited',
+              positions: _self.positions,
+            });
+          }
+          var handleMarkerChanges = {
+            dragHandlers: {
+              onDrag: function (index, position) {
+                _self.positions[index] = position;
+                updateHalfMarkers(index, _self.positions);
+                _self._createPrimitive = true;
+              },
+              onDragEnd: function (index, position) {
+                _self._createPrimitive = true;
+                onEdited();
+              },
+            },
+            onDoubleClick: function (index) {
+              if (_self.positions.length < 4) {
+                return;
+              }
+              // remove the point and the corresponding markers
+              _self.positions.splice(index, 1);
+              _self._createPrimitive = true;
+              markers.removeBillboard(index);
+              editMarkers.removeBillboard(index);
+              updateHalfMarkers(index, _self.positions);
+              onEdited();
+            },
+            tooltip: function () {
+              if (_self.positions.length > 3) {
+                return 'Double click to remove this point';
+              }
+            },
+          };
+          // add billboards and keep an ordered list of them for the polygon edges
+          markers.addBillboards(_self.positions, handleMarkerChanges);
+          this._markers = markers;
+          function calculateHalfMarkerPosition(index) {
+            var positions = _self.positions;
+            return ellipsoid.cartographicToCartesian(
+              new Cesium.EllipsoidGeodesic(
+                ellipsoid.cartesianToCartographic(positions[index]),
+                ellipsoid.cartesianToCartographic(
+                  positions[index < positions.length - 1 ? index + 1 : 0]
+                )
+              ).interpolateUsingFraction(0.5)
+            );
+          }
+          var halfPositions = [];
+          var index = 0;
+          var length = _self.positions.length + (this.isPolygon ? 0 : -1);
+          for (; index < length; index++) {
+            halfPositions.push(calculateHalfMarkerPosition(index));
+          }
+          var handleEditMarkerChanges = {
+            dragHandlers: {
+              onDragStart: function (index, position) {
+                // add a new position to the polygon but not a new marker yet
+                this.index = index + 1;
+                _self.positions.splice(this.index, 0, position);
+                _self._createPrimitive = true;
+              },
+              onDrag: function (index, position) {
+                _self.positions[this.index] = position;
+                _self._createPrimitive = true;
+              },
+              onDragEnd: function (index, position) {
+                // create new sets of makers for editing
+                markers.insertBillboard(
+                  this.index,
+                  position,
+                  handleMarkerChanges
+                );
+                editMarkers.getBillboard(
+                  this.index - 1
+                ).position = calculateHalfMarkerPosition(this.index - 1);
+                editMarkers.insertBillboard(
+                  this.index,
+                  calculateHalfMarkerPosition(this.index),
+                  handleEditMarkerChanges
+                );
+                _self._createPrimitive = true;
+                onEdited();
+              },
+            },
+            tooltip: function () {
+              return 'Drag to create a new point';
+            },
+          };
+          editMarkers.addBillboards(halfPositions, handleEditMarkerChanges);
+          this._editMarkers = editMarkers;
+          // add a handler for clicking in the globe
+          this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
+            scene.canvas
+          );
+          this._globeClickhandler.setInputAction(function (movement) {
+            var pickedObject = scene.pick(movement.position);
+            if (!(pickedObject && pickedObject.primitive)) {
+              _self.setEditMode(false);
+            }
+          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+          // set on top of the polygon
+          markers.setOnTop();
+          editMarkers.setOnTop();
+        }
+        this._editMode = true;
+      } else {
+        if (this._markers != null) {
+          this._markers.remove();
+          this._editMarkers.remove();
+          this._markers = null;
+          this._editMarkers = null;
+          this._globeClickhandler.destroy();
+        }
+        this._editMode = false;
+      }
+    }
+
+    DrawHelper.PolylinePrimitive.prototype.setEditable = function () {
+      if (this.setEditMode) {
+        return;
+      }
+
+      var polyline = this;
+      polyline.isPolygon = false;
+      polyline.asynchronous = false;
+
+      drawHelper.registerEditableShape(polyline);
+
+      polyline.setEditMode = setEditMode;
+
+      var originalWidth = this.width;
+
+      polyline.setHighlighted = function (highlighted) {
+        // disable if already in edit mode
+        if (this._editMode === true) {
+          return;
+        }
+        if (highlighted) {
+          drawHelper.setHighlighted(this);
+          this.setWidth(originalWidth * 2);
+        } else {
+          this.setWidth(originalWidth);
+        }
+      };
+
+      polyline.getExtent = function () {
+        return Cesium.Extent.fromCartographicArray(
+          ellipsoid.cartesianArrayToCartographicArray(this.positions)
+        );
+      };
+
+      enhanceWithListeners(polyline);
+
+      polyline.setEditMode(false);
+    };
+
+    DrawHelper.PolygonPrimitive.prototype.setEditable = function () {
+      var polygon = this;
+      polygon.asynchronous = false;
+
+      var scene = drawHelper._scene;
+
+      drawHelper.registerEditableShape(polygon);
+
+      polygon.setEditMode = setEditMode;
+
+      polygon.setHighlighted = setHighlighted;
+
+      enhanceWithListeners(polygon);
+
+      polygon.setEditMode(false);
+    };
+
+    DrawHelper.ExtentPrimitive.prototype.setEditable = function () {
+      if (this.setEditMode) {
+        return;
+      }
+
+      var extent = this;
+      var scene = drawHelper._scene;
+
+      drawHelper.registerEditableShape(extent);
+      extent.asynchronous = false;
+
+      extent.setEditMode = function (editMode) {
+        // if no change
+        if (this._editMode == editMode) {
+          return;
+        }
+        drawHelper.disableAllHighlights();
+        // display markers
+        if (editMode) {
+          // make sure all other shapes are not in edit mode before starting the editing of this shape
+          drawHelper.setEdited(this);
+          // create the markers and handlers for the editing
+          if (this._markers == null) {
+            var markers = new _.BillboardGroup(drawHelper, dragBillboard);
+            function onEdited() {
+              extent.executeListeners({
+                name: 'onEdited',
+                extent: extent.extent,
+              });
+            }
+            var handleMarkerChanges = {
+              dragHandlers: {
+                onDrag: function (index, position) {
+                  var corner = markers.getBillboard((index + 2) % 4).position;
+                  extent.setExtent(
+                    getExtent(
+                      ellipsoid.cartesianToCartographic(corner),
+                      ellipsoid.cartesianToCartographic(position)
+                    )
+                  );
+                  markers.updateBillboardsPositions(
+                    getExtentCorners(extent.extent)
+                  );
+                },
+                onDragEnd: function (index, position) {
+                  onEdited();
+                },
+              },
+              tooltip: function () {
+                return 'Drag to change the corners of this extent';
+              },
+            };
+            markers.addBillboards(
+              getExtentCorners(extent.extent),
+              handleMarkerChanges
+            );
+            this._markers = markers;
+            // add a handler for clicking in the globe
+            this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
+              scene.canvas
+            );
+            this._globeClickhandler.setInputAction(function (movement) {
+              var pickedObject = scene.pick(movement.position);
+              // disable edit if pickedobject is different or not an object
+              if (
+                !(
+                  pickedObject &&
+                  !pickedObject.isDestroyed() &&
+                  pickedObject.primitive
+                )
+              ) {
+                extent.setEditMode(false);
+              }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+            // set on top of the polygon
+            markers.setOnTop();
+          }
+          this._editMode = true;
+        } else {
+          if (this._markers != null) {
+            this._markers.remove();
+            this._markers = null;
+            this._globeClickhandler.destroy();
+          }
+          this._editMode = false;
+        }
+      };
+
+      extent.setHighlighted = setHighlighted;
+
+      enhanceWithListeners(extent);
+
+      extent.setEditMode(false);
+    };
+
+    _.EllipsePrimitive.prototype.setEditable = function () {
+      if (this.setEditMode) {
+        return;
+      }
+
+      var ellipse = this;
+      var scene = drawHelper._scene;
+
+      ellipse.asynchronous = false;
+
+      drawHelper.registerEditableShape(ellipse);
+
+      ellipse.setEditMode = function (editMode) {
+        // if no change
+        if (this._editMode == editMode) {
+          return;
+        }
+        drawHelper.disableAllHighlights();
+        // display markers
+        if (editMode) {
+          // make sure all other shapes are not in edit mode before starting the editing of this shape
+          drawHelper.setEdited(this);
+          var _self = this;
+          // create the markers and handlers for the editing
+          if (this._markers == null) {
+            var markers = new _.BillboardGroup(drawHelper, dragBillboard);
+            function getMarkerPositions() {
+              return Cesium.Shapes.computeEllipseBoundary(
+                ellipsoid,
+                ellipse.getCenter(),
+                ellipse.getSemiMajorAxis(),
+                ellipse.getSemiMinorAxis(),
+                ellipse.getRotation() + Math.PI / 2,
+                Math.PI / 2.0
+              ).splice(0, 4);
+            }
+            function onEdited() {
+              ellipse.executeListeners({
+                name: 'onEdited',
+                center: ellipse.getCenter(),
+                semiMajorAxis: ellipse.getSemiMajorAxis(),
+                semiMinorAxis: ellipse.getSemiMinorAxis(),
+                rotation: 0,
+              });
+            }
+            var handleMarkerChanges = {
+              dragHandlers: {
+                onDrag: function (index, position) {
+                  var distance = Cesium.Cartesian3.distance(
+                    ellipse.getCenter(),
+                    position
+                  );
+                  if (index % 2 == 0) {
+                    ellipse.setSemiMajorAxis(distance);
+                  } else {
+                    ellipse.setSemiMinorAxis(distance);
+                  }
+                  markers.updateBillboardsPositions(getMarkerPositions());
+                },
+                onDragEnd: function (index, position) {
+                  onEdited();
+                },
+              },
+              tooltip: function () {
+                return 'Drag to change the excentricity and radius';
+              },
+            };
+            markers.addBillboards(getMarkerPositions(), handleMarkerChanges);
+            this._markers = markers;
+            // add a handler for clicking in the globe
+            this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
+              scene.canvas
+            );
+            this._globeClickhandler.setInputAction(function (movement) {
+              var pickedObject = scene.pick(movement.position);
+              if (!(pickedObject && pickedObject.primitive)) {
+                _self.setEditMode(false);
+              }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+            // set on top of the polygon
+            markers.setOnTop();
+          }
+          this._editMode = true;
+        } else {
+          if (this._markers != null) {
+            this._markers.remove();
+            this._markers = null;
+            this._globeClickhandler.destroy();
+          }
+          this._editMode = false;
+        }
+      };
+
+      ellipse.setHighlighted = setHighlighted;
+
+      enhanceWithListeners(ellipse);
+
+      ellipse.setEditMode(false);
+    };
+
+    _.CirclePrimitive.prototype.getCircleCartesianCoordinates = function (
+      granularity
+    ) {
+      var geometry = Cesium.CircleOutlineGeometry.createGeometry(
+        new Cesium.CircleOutlineGeometry({
+          ellipsoid: ellipsoid,
+          center: this.getCenter(),
+          radius: this.getRadius(),
+          granularity: granularity,
+        })
+      );
+      var count = 0,
+        value,
+        values = [];
+      for (; count < geometry.attributes.position.values.length; count += 3) {
+        value = geometry.attributes.position.values;
+        values.push(
+          new Cesium.Cartesian3(
+            value[count],
+            value[count + 1],
+            value[count + 2]
+          )
+        );
+      }
+      return values;
+    };
+
+    _.CirclePrimitive.prototype.setEditable = function () {
+      if (this.setEditMode) {
+        return;
+      }
+
+      var circle = this;
+      var scene = drawHelper._scene;
+
+      circle.asynchronous = false;
+
+      drawHelper.registerEditableShape(circle);
+
+      circle.setEditMode = function (editMode) {
+        // if no change
+        if (this._editMode == editMode) {
+          return;
+        }
+        drawHelper.disableAllHighlights();
+        // display markers
+        if (editMode) {
+          // make sure all other shapes are not in edit mode before starting the editing of this shape
+          drawHelper.setEdited(this);
+          var _self = this;
+          // create the markers and handlers for the editing
+          if (this._markers == null) {
+            var markers = new _.BillboardGroup(drawHelper, dragBillboard);
+            function getMarkerPositions() {
+              return _self.getCircleCartesianCoordinates(
+                Cesium.Math.PI_OVER_TWO
+              );
+            }
+            function onEdited() {
+              circle.executeListeners({
+                name: 'onEdited',
+                center: circle.getCenter(),
+                radius: circle.getRadius(),
+              });
+            }
+            var handleMarkerChanges = {
+              dragHandlers: {
+                onDrag: function (index, position) {
+                  circle.setRadius(
+                    Cesium.Cartesian3.distance(circle.getCenter(), position)
+                  );
+                  markers.updateBillboardsPositions(getMarkerPositions());
+                },
+                onDragEnd: function (index, position) {
+                  onEdited();
+                },
+              },
+              tooltip: function () {
+                return 'Drag to change the radius';
+              },
+            };
+            markers.addBillboards(getMarkerPositions(), handleMarkerChanges);
+            this._markers = markers;
+            // add a handler for clicking in the globe
+            this._globeClickhandler = new Cesium.ScreenSpaceEventHandler(
+              scene.canvas
+            );
+            this._globeClickhandler.setInputAction(function (movement) {
+              var pickedObject = scene.pick(movement.position);
+              if (!(pickedObject && pickedObject.primitive)) {
+                _self.setEditMode(false);
+              }
+            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+            // set on top of the polygon
+            markers.setOnTop();
+          }
+          this._editMode = true;
+        } else {
+          if (this._markers != null) {
+            this._markers.remove();
+            this._markers = null;
+            this._globeClickhandler.destroy();
+          }
+          this._editMode = false;
+        }
+      };
+
+      circle.setHighlighted = setHighlighted;
+
+      enhanceWithListeners(circle);
+
+      circle.setEditMode(false);
+    };
+  };
+
+  _.DrawHelperWidget = (function () {
+    // constructor
+    function _(drawHelper, options) {
+      // container must be specified
+      if (!Cesium.defined(options.container)) {
+        throw new Cesium.DeveloperError('Container is required');
+      }
+
+      var drawOptions = {
+        markerIcon: './assets/img/glyphicons_242_google_maps.png',
+        polylineIcon: './assets/img/glyphicons_097_vector_path_line.png',
+        polygonIcon: './assets/img/glyphicons_096_vector_path_polygon.png',
+        circleIcon: './assets/img/glyphicons_095_vector_path_circle.png',
+        extentIcon: './assets/img/glyphicons_094_vector_path_square.png',
+        clearIcon: './assets/img/glyphicons_067_cleaning.png',
+        polylineDrawingOptions: defaultPolylineOptions,
+        polygonDrawingOptions: defaultPolygonOptions,
+        extentDrawingOptions: defaultExtentOptions,
+        circleDrawingOptions: defaultCircleOptions,
+      };
+
+      fillOptions(options, drawOptions);
+
+      var _self = this;
+
+      var toolbar = document.createElement('DIV');
+      toolbar.className = 'toolbar';
+      options.container.appendChild(toolbar);
+
+      function addIcon(id, url, title, callback) {
+        var div = document.createElement('DIV');
+        div.className = 'button';
+        div.title = title;
+        toolbar.appendChild(div);
+        div.onclick = callback;
+        var span = document.createElement('SPAN');
+        div.appendChild(span);
+        var image = document.createElement('IMG');
+        image.src = url;
+        span.appendChild(image);
+        return div;
+      }
+
+      var scene = drawHelper._scene;
+
+      addIcon(
+        'marker',
+        options.markerIcon,
+        'Click to start drawing a 2D marker',
+        function () {
+          drawHelper.startDrawingMarker({
+            callback: function (position) {
+              _self.executeListeners({
+                name: 'markerCreated',
+                position: position,
+              });
+            },
+          });
+        }
+      );
+
+      addIcon(
+        'polyline',
+        options.polylineIcon,
+        'Click to start drawing a 2D polyline',
+        function () {
+          drawHelper.startDrawingPolyline({
+            callback: function (positions) {
+              _self.executeListeners({
+                name: 'polylineCreated',
+                positions: positions,
+              });
+            },
+          });
+        }
+      );
+
+      addIcon(
+        'polygon',
+        options.polygonIcon,
+        'Click to start drawing a 2D polygon',
+        function () {
+          drawHelper.startDrawingPolygon({
+            callback: function (positions) {
+              _self.executeListeners({
+                name: 'polygonCreated',
+                positions: positions,
+              });
+            },
+          });
+        }
+      );
+
+      addIcon(
+        'extent',
+        options.extentIcon,
+        'Click to start drawing an Extent',
+        function () {
+          drawHelper.startDrawingExtent({
+            callback: function (extent) {
+              _self.executeListeners({ name: 'extentCreated', extent: extent });
+            },
+          });
+        }
+      );
+
+      addIcon(
+        'circle',
+        options.circleIcon,
+        'Click to start drawing a Circle',
+        function () {
+          drawHelper.startDrawingCircle({
+            callback: function (center, radius) {
+              _self.executeListeners({
+                name: 'circleCreated',
+                center: center,
+                radius: radius,
+              });
+            },
+          });
+        }
+      );
+
+      // add a clear button at the end
+      // add a divider first
+      var div = document.createElement('DIV');
+      div.className = 'divider';
+      toolbar.appendChild(div);
+      addIcon('clear', options.clearIcon, 'Remove all primitives', function () {
+        scene.primitives.removeAll();
+      });
+
+      enhanceWithListeners(this);
+    }
+
+    return _;
+  })();
+
+  _.prototype.addToolbar = function (container, options) {
+    options = copyOptions(options, { container: container });
+    return new _.DrawHelperWidget(this, options);
+  };
+
+  function getExtent(mn, mx) {
+    var e = new Cesium.Rectangle();
+
+    // Re-order so west < east and south < north
+    e.west = Math.min(mn.longitude, mx.longitude);
+    e.east = Math.max(mn.longitude, mx.longitude);
+    e.south = Math.min(mn.latitude, mx.latitude);
+    e.north = Math.max(mn.latitude, mx.latitude);
+
+    // Check for approx equal (shouldn't require abs due to re-order)
+    var epsilon = Cesium.Math.EPSILON7;
+
+    if (e.east - e.west < epsilon) {
+      e.east += epsilon * 2.0;
+    }
+
+    if (e.north - e.south < epsilon) {
+      e.north += epsilon * 2.0;
+    }
+
+    return e;
+  }
+
+  function createTooltip(frameDiv) {
+    var tooltip = function (frameDiv) {
+      var div = document.createElement('DIV');
+      div.className = 'twipsy right';
+
+      var arrow = document.createElement('DIV');
+      arrow.className = 'twipsy-arrow';
+      div.appendChild(arrow);
+
+      var title = document.createElement('DIV');
+      title.className = 'twipsy-inner';
+      div.appendChild(title);
+
+      this._div = div;
+      this._title = title;
+
+      // add to frame div and display coordinates
+      frameDiv.appendChild(div);
+    };
+
+    tooltip.prototype.setVisible = function (visible) {
+      this._div.style.display = visible ? 'block' : 'none';
+    };
+
+    tooltip.prototype.showAt = function (position, message) {
+      if (position && message) {
+        this.setVisible(true);
+        this._title.innerHTML = message;
+        this._div.style.left = position.x + 10 + 'px';
+        this._div.style.top = position.y - this._div.clientHeight / 2 + 'px';
+      }
+    };
+
+    return new tooltip(frameDiv);
+  }
+
+  function getDisplayLatLngString(cartographic, precision) {
+    return (
+      cartographic.longitude.toFixed(precision || 3) +
+      ', ' +
+      cartographic.latitude.toFixed(precision || 3)
+    );
+  }
+
+  function clone(from, to) {
+    if (from == null || typeof from != 'object') return from;
+    if (from.constructor != Object && from.constructor != Array) return from;
+    if (
+      from.constructor == Date ||
+      from.constructor == RegExp ||
+      from.constructor == Function ||
+      from.constructor == String ||
+      from.constructor == Number ||
+      from.constructor == Boolean
+    )
+      return new from.constructor(from);
+
+    to = to || new from.constructor();
+
+    for (var name in from) {
+      to[name] =
+        typeof to[name] == 'undefined' ? clone(from[name], null) : to[name];
+    }
+
+    return to;
+  }
+
+  function fillOptions(options, defaultOptions) {
+    options = options || {};
+    var option;
+    for (option in defaultOptions) {
+      if (options[option] === undefined) {
+        options[option] = clone(defaultOptions[option]);
+      }
+    }
+  }
+
+  // shallow copy
+  function copyOptions(options, defaultOptions) {
+    var newOptions = clone(options),
+      option;
+    for (option in defaultOptions) {
+      if (newOptions[option] === undefined) {
+        newOptions[option] = clone(defaultOptions[option]);
+      }
+    }
+    return newOptions;
+  }
+
+  function setListener(primitive, type, callback) {
+    primitive[type] = callback;
+  }
+
+  function enhanceWithListeners(element) {
+    element._listeners = {};
+
+    element.addListener = function (name, callback) {
+      this._listeners[name] = this._listeners[name] || [];
+      this._listeners[name].push(callback);
+      return this._listeners[name].length;
+    };
+
+    element.executeListeners = function (event, defaultCallback) {
+      if (
+        this._listeners[event.name] &&
+        this._listeners[event.name].length > 0
+      ) {
+        var index = 0;
+        for (; index < this._listeners[event.name].length; index++) {
+          this._listeners[event.name][index](event);
+        }
+      } else {
+        if (defaultCallback) {
+          defaultCallback(event);
+        }
+      }
+    };
+  }
+
+  return _;
+})();
+
+export { DrawHelper };