@map-colonies/react-components 3.12.2 → 3.13.0

package/dist/cesium-map/tools/draw/drawHelper.js

@@ -1,1694 +1,1694 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawHelper = void 0;
-// inspired by https://github.com/leforthomas/cesium-drawhelper
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-var Cesium = __importStar(require("cesium"));
-require("./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, drawingVertexClr) {
-        if (materialClr === void 0) { materialClr = new Cesium.Color(1.0, 1.0, 0.0, 0.5); }
-        if (drawingVertexClr === void 0) { 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: function () { },
-            showAt: function () { },
-        };
-        // 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 _;
-})();
-exports.DrawHelper = DrawHelper;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawHelper = void 0;
+// inspired by https://github.com/leforthomas/cesium-drawhelper
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+var Cesium = __importStar(require("cesium"));
+require("./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, drawingVertexClr) {
+        if (materialClr === void 0) { materialClr = new Cesium.Color(1.0, 1.0, 0.0, 0.5); }
+        if (drawingVertexClr === void 0) { 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: function () { },
+            showAt: function () { },
+        };
+        // 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 _;
+})();
+exports.DrawHelper = DrawHelper;