drone_view 3.0.18 → 3.0.20

package/src/droneView.ts

@@ -0,0 +1,1070 @@
+import {
+  Cesium3DTileset,
+  createWorldTerrain,
+  Entity,
+  ImageryLayer,
+  Ion,
+  Matrix4,
+  SceneMode,
+  ScreenSpaceEventHandler,
+  TerrainProvider,
+  Viewer,
+  WebMapServiceImageryProvider,
+  ScreenSpaceEventType,
+  Math as cMath,
+  EasingFunction,
+  MapboxStyleImageryProvider,
+  HeadingPitchRoll,
+  Color,
+  SplitDirection,
+  Cartesian3,
+  SceneTransforms
+} from "cesium";
+import type {
+  DrawingConfig,
+  MapOptions,
+  MapStyle,
+  Point,
+  MapCursor,
+  LayerData,
+  LayerType,
+  LayerOptions,
+  MarkerData,
+  MarkerOptions,
+  LineData,
+  LineOptions,
+  Options,
+  LabelConfigByLatLng,
+  PolygonData,
+  PolygonOptions,
+  EventListenerCallback,
+  EditPointOption,
+  AnnotationData,
+  MapType,
+  NoteData,
+  NoteOptions
+} from "./app.interface";
+
+import {
+  addLabel,
+  calculateArea,
+  cartesianToPoint,
+  distance2D,
+  getPolygonCenter,
+  PointToCartesian,
+  zoomLevelToCameraHeight,
+} from "./utility";
+import Measurement from "./measurement";
+import MarkerLayer from "./layers/marker";
+import Marker3DLayer from "./layers/marker3d";
+import LineLayer from "./layers/line";
+import PolygonLayer from "./layers/polygon";
+import ModelLayer from "./layers/model";
+import RasterLayer from "./layers/ortho";
+import DroneImage from "./layers/droneImages";
+import EditPolygon from "./layers/editPolygon";
+import EditLine from "./layers/editLine";
+import EditPoint from "./layers/editPoint";
+import Annotation from "./layers/annotation";
+import NoteLayer from "./layers/note";
+import EventManager from "./event";
+import * as Utility from "./utility";
+
+export default class CesiumView {
+  options: MapOptions;
+
+  styleType: MapStyle;
+
+  mapStyle: string;
+
+  cursor: MapCursor = "grab";
+
+  eventManager: EventManager;
+
+  utility = Utility;
+
+  Cartesian3 = Cartesian3;
+
+  SceneTransforms = SceneTransforms;
+
+  DEFAULT_ZOOM_LEVEL = 16;
+
+  public MIN_ZOOM_LEVEL = 0;
+
+  public MAX_ZOOM_LEVEL = 22;
+
+  MAX_TILE_ZOOM_LEVEL = this.MAX_ZOOM_LEVEL;
+
+  OVERLAY_OPACITY = 100;
+
+  private streetMapProvider: MapboxStyleImageryProvider;
+
+  private streetMapLayer: ImageryLayer | undefined;
+
+  public viewer: Viewer;
+
+  private isZeroRotation3D: boolean = true;
+
+  isZeroRotation2D: boolean = true;
+
+  private listenHandler: any;
+
+  private cursorHandler: ScreenSpaceEventHandler;
+
+  layers: any = [];
+
+  listeners: any[];
+
+  layerListeners: any[];
+
+  private currentZoom: number;
+
+  private measurement: Measurement;
+
+  private handler: ScreenSpaceEventHandler;
+
+  private tileset: Cesium3DTileset;
+
+  // private isSideMode: boolean = false;
+
+  private terrainProvider: TerrainProvider;
+
+  public mapMaxZoomLevel = 22;
+
+  public mapMinZoomLevel = 0;
+
+  public isBoundingRactangleActive: boolean = false;
+
+  private mapLoadListner: Function;
+
+  constructor(options: MapOptions) {
+    this.options = options;
+    Ion.defaultAccessToken = options.token;
+    this.terrainProvider = createWorldTerrain();
+
+    if (this.options.mapboxToken)
+      this.streetMapProvider = new MapboxStyleImageryProvider({
+        styleId: "streets-v11",
+        accessToken: this.options.mapboxToken,
+        maximumLevel: 22,
+        minimumLevel: 0,
+      });
+  }
+
+  /** Initializes the viewer */
+  public init() {
+    const self = this;
+    // Initialize the Cesium Viewer in the HTML element with the cesiumContainer ID.
+    this.viewer = new Viewer(this.options.mapElementId, {
+      // terrainProvider: this.terrainProvider,
+      selectionIndicator: false,
+      infoBox: false,
+      animation: false,
+      baseLayerPicker: false,
+      shadows: false,
+      homeButton: false,
+      geocoder: false,
+      timeline: false,
+      skyBox: false,
+      navigationHelpButton: false,
+      maximumRenderTimeChange: Infinity,
+      requestRenderMode: true,
+      contextOptions: {
+        webgl: {
+          alpha: true,
+        },
+      },
+    });
+
+    this.viewer.scene.globe.show = false;
+    // The maximum screen space error used to drive level of detail refinement
+    this.viewer.scene.globe.maximumScreenSpaceError = 2;
+
+    // this.viewer.scene.globe.terrainExaggeration = 2.0;
+    this.viewer.scene.postProcessStages.fxaa.enabled = false;
+    // this.viewer.scene.globe.depthTestAgainstTerrain = true;
+
+    if (this.options.center) {
+      this.reCenter();
+    }
+
+    // Set options max zoom level
+    if (this.options.maxZoomLevel) {
+      this.viewer.scene.screenSpaceCameraController.minimumZoomDistance =
+        zoomLevelToCameraHeight(this.options.maxZoomLevel || 22.9);
+    }
+
+    // Set options min zoom level
+    if (this.options.minZoomLevel) {
+      this.viewer.scene.screenSpaceCameraController.maximumZoomDistance =
+        zoomLevelToCameraHeight(this.options.minZoomLevel || 0);
+    }
+
+    this.viewer.resolutionScale = window.devicePixelRatio;
+
+    this.cursorHandler = new ScreenSpaceEventHandler(this.viewer.canvas);
+
+    this.viewer.screenSpaceEventHandler.removeInputAction(
+      ScreenSpaceEventType.LEFT_DOUBLE_CLICK
+    );
+
+    this.listenHandler = this.resize.bind(this);
+
+    // To reset viewer scene on window resize
+    window.addEventListener("resize", this.listenHandler);
+
+    // To avoid old browser which doesn't support pick location
+    if (!this.viewer.scene.pickPositionSupported) {
+      // eslint-disable-next-line no-alert
+      window.alert("This browser does not support pickPosition.");
+    }
+
+    this.handler = new ScreenSpaceEventHandler(this.viewer.canvas);
+    this.measurement = new Measurement(this.viewer);
+
+    // To set location remains same when switching between 2D-3D mode
+    this.viewer.scene.morphComplete.addEventListener(() => {
+      if (this.tileset) {
+        this.viewer.zoomTo(this.tileset);
+        this.tileset.show = !this.is2DMode();
+      }
+      this.viewer.camera.lookAtTransform(Matrix4.IDENTITY);
+    });
+
+    this.eventManager = new EventManager(this);
+
+    // this.viewer.terrainProvider.readyPromise.then(() => {
+    //   if (self.mapLoadListner) {
+    //     self.mapLoadListner(true);
+    //   }
+    // });
+  }
+
+  /**
+   * Toggle base map visibility
+   */
+  toggleBaseMap() {
+    this.viewer.imageryLayers.get(0).show =
+      !this.viewer.imageryLayers.get(0).show;
+  }
+
+  /**
+   * Set the map center
+   * @param lat number
+   * @param long number
+   * @param angle number heading angle in radian
+   */
+  public setCenter(
+    lat: string | number,
+    long: string | number,
+    height: string | number = 200,
+    angle: {
+      heading: number;
+      pitch: number;
+      roll: number;
+    }
+  ) {
+    if (typeof lat === "string") {
+      lat = parseFloat(lat);
+    }
+
+    if (typeof long === "string") {
+      long = parseFloat(long);
+    }
+
+    this.viewer.camera.setView({
+      destination: PointToCartesian({
+        long: long,
+        lat: lat,
+        height: height,
+      }),
+      orientation: new HeadingPitchRoll(angle.heading, angle.pitch, angle.roll),
+    });
+  }
+
+  getCenter() {
+    const pickPositionCartographic =
+      this.viewer.scene.globe.ellipsoid.cartesianToCartographic(
+        this.viewer.scene.camera.position
+      );
+    return {
+      latitude: pickPositionCartographic.latitude * (180 / Math.PI),
+      longitude: pickPositionCartographic.longitude * (180 / Math.PI),
+      height: pickPositionCartographic.height,
+      angle: {
+        heading: this.viewer.camera.heading,
+        pitch: this.viewer.camera.pitch,
+        roll: this.viewer.camera.roll,
+      },
+    };
+  }
+
+  /** Re-centers the map to the original center point given in the options */
+  public reCenter(): void {
+    if (this.options.center) {
+      this.setCenter(
+        this.options.center[1].toString(),
+        this.options.center[0].toString(),
+        this.options.center[2],
+        {
+          heading: this.viewer.camera.heading,
+          pitch: this.viewer.camera.pitch,
+          roll: this.viewer.camera.roll,
+        }
+      );
+    }
+  }
+
+  /** Triggers a resize  */
+  public resize(): void {
+    this.viewer.scene.requestRender();
+  }
+
+  /** Terminates the map. Removes all listeners and removes the map from the DOM */
+  public terminate() {
+    window.removeEventListener("resize", this.listenHandler);
+    this.cursorHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOWN);
+    this.cursorHandler.removeInputAction(ScreenSpaceEventType.LEFT_UP);
+    this.viewer.destroy();
+  }
+
+  /** To switch 2D Mode */
+  public switch2DMode(): void {
+    this.viewer.scene.mode = SceneMode.SCENE2D;
+  }
+
+  /** To switch 3D Mode */
+  public switch3DMode(): void {
+    this.viewer.scene.mode = SceneMode.SCENE3D;
+  }
+
+  /** to check if 2D mode is active */
+  public is2DMode(): boolean {
+    return this.viewer.scene.mode === SceneMode.SCENE2D;
+  }
+
+  /**
+   * Fly and zoom to a location
+   * @param { Point } location Point
+   * @param { number } zoom number
+   */
+  public flyTo(location: Point, zoom: number) {
+    this.viewer.camera.flyTo({
+      destination: PointToCartesian({
+        lat: location.lat,
+        long: location.long,
+        height: zoomLevelToCameraHeight(zoom),
+      }),
+      easingFunction: EasingFunction.EXPONENTIAL_IN_OUT,
+    });
+  }
+
+  /**
+   * Get an array of [latitude, longitude] for each corner of the visible map - top left clockwise
+   * [[south, west], [north, east]]
+   * @returns Array<number> current map bounds
+   */
+  public getVisibleMapBounds(): Array<Array<number>> {
+    const bb = this.viewer.camera.computeViewRectangle()!;
+    return [
+      [cMath.toDegrees(bb.west), cMath.toDegrees(bb.south)],
+      [cMath.toDegrees(bb.east), cMath.toDegrees(bb.north)],
+    ];
+  }
+
+  /** Flattens an array of [latitude, longitude] into a string */
+  // eslint-disable-next-line class-methods-use-this
+  public boundsToString(bounds: Array<Array<number>>) {
+    return bounds.toString();
+  }
+
+  /**
+   * Get an flattened string of latitude, longitude values for each corner of the visible map
+   * top left clockwise. like - south, west, north, east
+   * @returns string
+   */
+  public getVisibleMapBoundsString() {
+    return this.boundsToString(this.getVisibleMapBounds());
+  }
+
+  /**
+   * load 2D Orthographic Imagery data
+   * @param url string url endpoint of WMS Server
+   * @returns ImageryLayer
+   */
+  public addImagery(url: string): ImageryLayer {
+    const imageryLayer = this.viewer.scene.imageryLayers.addImageryProvider(
+      new WebMapServiceImageryProvider({
+        url,
+        layers: "6",
+        parameters: {
+          transparent: "true",
+          format: "image/png",
+        },
+        tileWidth: 216,
+        tileHeight: 216,
+      })
+    );
+    return imageryLayer;
+  }
+
+  /**
+   * To remove 2D ImageryLayer
+   * @param tileset ImageryLayer
+   */
+  public removeImageryLayer(imageLayer: ImageryLayer) {
+    this.viewer.scene.imageryLayers.remove(imageLayer);
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Get area of shape/Polygon
+   * @param pointData Array<Point>
+   * @returns number Area in square meter
+   */
+  // eslint-disable-next-line class-methods-use-this
+  public calculateArea(pointData: Array<Point>): number {
+    return calculateArea(pointData);
+  }
+
+  /**
+   * Get distance between two points
+   * @param lat1 Latitude point one
+   * @param long1 Longitude point one
+   * @param lat2 Latitude point two
+   * @param long2 Longitude point two
+   * @returns number distance in meter
+   */
+  // eslint-disable-next-line class-methods-use-this
+  public calculateDistance(
+    lat1: string,
+    long1: string,
+    lat2: string,
+    long2: string
+  ): number {
+    return distance2D(
+      PointToCartesian({
+        lat: parseFloat(lat1),
+        long: parseFloat(long1),
+      }),
+      PointToCartesian({ lat: parseFloat(lat2), long: parseFloat(long2) })
+    );
+  }
+
+  /** Enables maps ability to be dragged/panned */
+  public enablePan() {
+    this.viewer.scene.screenSpaceCameraController.enableLook = true;
+    this.viewer.scene.screenSpaceCameraController.enableTranslate = true;
+    this.viewer.scene.screenSpaceCameraController.enableRotate = true;
+  }
+
+  /** Disable maps ability to be dragged/panned */
+  public disablePan() {
+    this.viewer.scene.screenSpaceCameraController.enableLook = false;
+    this.viewer.scene.screenSpaceCameraController.enableTranslate = false;
+    this.viewer.scene.screenSpaceCameraController.enableRotate = false;
+  }
+
+  /**
+   * Get center of polygon
+   * @param id string Id of polygon
+   * @returns Point
+   */
+  public getCenterPolygon(id: string): Point {
+    const entity = this.viewer.entities.getById(id)!;
+    if (entity) {
+      if (entity.polygon) {
+        const { positions } = entity.polygon.hierarchy!.valueOf() as any;
+        return cartesianToPoint(getPolygonCenter(positions));
+      }
+      throw new Error("This method only works for polygon geometry");
+    } else {
+      throw new Error("Entity Doesn't Exist");
+    }
+  }
+
+  /**
+   * To enable drawing tool
+   * @param config DrawingConfig User can use this for customize color, line width etc
+   */
+  public enableDrawing(config: DrawingConfig) {
+    this.measurement.enable(config);
+  }
+
+  /**
+   * For updating a geometry with user data
+   * @param id string ID of drawn shape
+   * @param data - json object
+   */
+  public updateData(id: string, data: { [key: string]: string | number }) {
+    const entity: any = this.viewer.entities.getById(id);
+    entity.data = data;
+  }
+
+  /**
+   * This function is for responding when ever any drawing finish
+   * @param cb Callback function
+   */
+  public onDraw(cb: any) {
+    this.measurement.drawingFinished = cb;
+  }
+
+  /**
+   * To disable drawing tool
+   */
+  public disableDrawing() {
+    this.measurement.disable();
+  }
+
+  /**
+   * To remove the points on model
+   */
+  public removePoints() {
+    this.viewer.entities.removeAll();
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Adds a listener for events of a specified type limited to features in a specified style layer id.
+   *
+   * @param {'mousedown' | 'mouseup' | 'mouseover' | 'mouseout' | 'mousemove' | 'mouseleave' | 'click'} event The event type to listen for. Specified event must be compatible with the type of mapbox layer being used
+   * @param {string} layerId The id of a style layer. If you provide a `layerId`,
+   * the listener will be triggered only if its location is within a visible feature in these layers,
+   * and the event will have a `features` property containing an array of the matching features.
+   * @param {EventListenerCallback} fn The function to be called when the event is fired.
+   * @example
+   * // Set an event listener that will fire
+   * // when a feature on the countries layer of the map is clicked.
+   * map.on('click', 'countries', (e) => {
+   *     console.log('the countries layer was clicked!', e);
+   * });
+   */
+  addLayerListener(event: string, layerId: string, fn: EventListenerCallback) {
+    this.eventManager.addListener(event, layerId, fn);
+  }
+
+  /**
+   * Removes all listeners for a specified layer ID
+   * @param {string} layerId The ID of the layer to remove listeners for
+   */
+  removeLayerListeners(layerId: string) {
+    this.eventManager.removeLayerListners(layerId);
+  }
+
+  /**
+   * Adds a specified layer to the map. Any existing layers with the same type and name will be removed.
+   * @param {LayerType} type
+   * @param {string} name
+   * @param {LayerData[]} data
+   * @param {LayerOptions} options
+   * *@param { MapType} mapType
+   */
+  public addLayer(
+    type: LayerType,
+    name: string,
+    data: LayerData[],
+    options: LayerOptions,
+    mapType: MapType = "all"
+  ) {
+    this.removeLayer(type, name);
+    let layer: any = null;
+    switch (type) {
+      case "marker":
+        layer = new MarkerLayer(
+          this,
+          name,
+          data as MarkerData[],
+          options as MarkerOptions
+        );
+        break;
+      case "annotation":
+        layer = new Annotation(
+          this,
+          name,
+          data as AnnotationData[],
+          options as Options
+        );
+        break;
+      case "marker3d":
+        layer = new Marker3DLayer(
+          this,
+          name,
+          data as MarkerData[],
+          options as MarkerOptions
+        );
+        break;
+      case "line":
+        layer = new LineLayer(
+          this,
+          name,
+          data as LineData[],
+          options as LineOptions
+        );
+        break;
+      case "polygon":
+        layer = new PolygonLayer(
+          this,
+          name,
+          data as PolygonData[],
+          options as PolygonOptions
+        );
+        break;
+      case "model":
+        layer = new ModelLayer(
+          this,
+          name,
+          data as any,
+          options as Options,
+          mapType
+        );
+        break;
+      case "ortho":
+        layer = new RasterLayer(this, name, data as any, options as Options);
+      case "droneImage":
+        layer = new DroneImage(this, name, data as any, options as Options);
+        break;
+      case "editPolygon":
+        layer = new EditPolygon(this, name, data as any, options as Options);
+        break;
+      case "editLine":
+        layer = new EditLine(this, name, data as any, options as Options);
+        break;
+      case "editPoint":
+        layer = new EditPoint(
+          this,
+          name,
+          data as any,
+          options as EditPointOption
+        );
+        break;
+      case "note":
+        layer = new NoteLayer(
+          this,
+          name,
+          data as NoteData[],
+          options as NoteOptions
+        );
+        break;
+      default:
+        // eslint-disable-next-line no-console
+        console.error(`MapBox: AddLayer: ${type} Not Found`);
+        return null;
+    }
+
+    console.log(mapType === "compare", this.isCompareMode, layer);
+
+    if (mapType === "compare" && this.isCompareMode) {
+      Object.keys(this.tilesetRight).forEach((typeR: string) => {
+        const layers = this.tilesetRight[typeR];
+        Object.keys(layers).forEach((nameR: string) => {
+          const layerRight = layers[nameR];
+          if (layerRight !== null) {
+            layerRight.remove();
+          }
+        });
+      });
+
+      this.tilesetRight = [];
+
+      if (typeof this.tilesetRight[type] === "undefined") {
+        this.tilesetRight[type] = [];
+      }
+
+      if (type === "model") {
+        this.tilesetRight[type][name] = layer;
+
+        if ((layer as ModelLayer).tileset) {
+          (layer as ModelLayer).tileset.splitDirection = SplitDirection.RIGHT;
+        }
+      }
+
+      return null;
+    }
+
+    if (typeof this.layers[type] === "undefined") {
+      this.layers[type] = [];
+    }
+
+    this.layers[type][name] = layer;
+
+    if (mapType === "default" && this.isCompareMode) {
+      if (type === "model") {
+        // (layer as ModelLayer).tileset.splitDirection = SplitDirection.LEFT;
+        this.tilesetLeft.push(layer as ModelLayer);
+        return null;
+      }
+    }
+
+    return layer;
+  }
+
+  /**
+   * Determine whether a specified layer exists on the map
+   * @param {LayerType} type
+   * @param {string} name
+   * @returns {boolean}
+   */
+  public hasLayer(type: LayerType, name: string): boolean {
+    let isLayerExist = false;
+    if (
+      typeof this.layers !== "undefined" &&
+      typeof this.layers[type] !== "undefined" &&
+      typeof this.layers[type][name] !== "undefined"
+    ) {
+      isLayerExist = true;
+    }
+    return isLayerExist;
+  }
+
+  /**
+   * Returns all layers of a specified type
+   * @param {LayerType} type
+   * @returns {Array<GenericLayer<LayerData[], LayerOptions>> }
+   */
+  public getLayers(type: LayerType) {
+    if (typeof this.layers[type] === "undefined") {
+      return [];
+    }
+    return this.layers[type];
+  }
+
+  /**
+   * Returns the data for the specified layer
+   * @param {LayerType} type
+   * @param {string} name
+   * @returns {LayerData[]} Data of layer
+   */
+  getLayerData(type: LayerType, name: string): LayerData[] {
+    if (!this.hasLayer(type, name)) {
+      return [];
+    }
+    return this.layers[type][name].getData();
+  }
+
+  /**
+   * Removes a specified layer from the map
+   * @param {LayerType} type
+   * @param {string} name
+   */
+  public removeLayer(type: LayerType, name: string) {
+    if (!this.hasLayer(type, name)) {
+      return;
+    }
+    const removedLayer = this.layers[type][name]
+    if (removedLayer.data) {
+      if (Array.isArray(removedLayer.data)) {
+        for (const item of removedLayer.data) {
+          const drawingLabel = item?.properties?.label;
+          if (drawingLabel) {
+            const labelLayer = this.viewer.entities.getById(drawingLabel);
+            if (labelLayer) {
+              this.viewer.entities.remove(labelLayer);
+            }
+          }
+        }
+      } else {
+        // Handle the case of a single object
+        const drawingLabel = removedLayer.data?.properties?.label;
+        if (drawingLabel) {
+          const labelLayer = this.viewer.entities.getById(drawingLabel);
+          if (labelLayer) {
+            this.viewer.entities.remove(labelLayer);
+          }
+        }
+      }
+    }
+    removedLayer.remove();
+    delete this.layers[type][name];
+    //console.log(this.layers[type][name]);
+  }
+
+  /**
+   * Show a specified layer
+   * @param {LayerType} type
+   * @param {string} name
+   */
+  showLayer(type: LayerType, name: string) {
+    if (!this.hasLayer(type, name)) {
+      return;
+    }
+    this.layers[type][name].show();
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Hide a specified layer
+   * @param {LayerType} type
+   * @param {string} name
+   */
+  hideLayer(type: LayerType, name: string) {
+    if (!this.hasLayer(type, name)) {
+      return;
+    }
+    this.layers[type][name].hide();
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Set the opacity (0 - 100) for a specified layer
+   * @param {LayerType} type
+   * @param {string} name
+   * @param {number} opacity
+   */
+  setLayerOpacity(type: LayerType, name: string, opacity: number) {
+    if (!this.hasLayer(type, name)) {
+      return;
+    }
+    this.layers[type][name].setOpacity(opacity);
+  }
+
+  /**
+   *
+   * @param {LayerType} type
+   * @param {string} name
+   * @param rotation
+   * @returns void
+   */
+  setLayerRotation(
+    type: LayerType,
+    name: string,
+    rotation: { rotationX: number; rotationY: number; rotationZ: number }
+  ) {
+    if (!this.hasLayer(type, name) || type !== "model") {
+      return;
+    }
+    this.layers[type][name].setRotation(
+      rotation.rotationX,
+      rotation.rotationY,
+      rotation.rotationZ
+    );
+  }
+
+  /**
+   *
+   * @param {LayerType} type
+   * @param {string} name
+   * @param rotation
+   * @returns void
+   */
+  setLayerPosition(type: LayerType, name: string, position: Point) {
+    if (!this.hasLayer(type, name) || type !== "model") {
+      return;
+    }
+    this.layers[type][name].setPosition(position);
+  }
+
+  /**
+   * Removes all layers from the map
+   */
+  removeAllLayers() {
+    Object.keys(this.layers).forEach((type) => {
+      const layers = this.layers[type];
+      Object.keys(layers).forEach((name) => {
+        const layer = layers[name];
+        if (layer !== null) {
+          layer.remove();
+        }
+      });
+    });
+  }
+
+  /**
+   * To add / remove globe from the viewer
+   */
+  toggleGlobe() {
+    this.viewer.scene.globe.show = !this.viewer.scene.globe.show;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * This method allows user to remove a geometry/entity
+   * @param id string id of entity
+   */
+  public removeEntityById(id: string) {
+    if (this.viewer.entities.getById(id)) {
+      this.viewer.entities.remove(this.viewer.entities.getById(id)!);
+    }
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * This method allows user to add a text/label (Annotation) on map
+   * @param config LabelConfigByLatLng to configure color, background, fontsize etc of label
+   */
+  public addLabel(config: LabelConfigByLatLng) {
+    const entity = addLabel(this.viewer, {
+      ...config,
+      position: PointToCartesian(config.position),
+    });
+    this.viewer.scene.requestRender();
+    return entity.id;
+  }
+
+  /**
+   * This method allows user to control visibility of a geometry/entity using their Id
+   * @param id string id of entity
+   */
+  public toggleEntityVisibility(id: string) {
+    if (this.viewer.entities.getById(id)) {
+      this.viewer.entities.getById(id)!.show =
+        !this.viewer.entities.getById(id)!.show;
+    }
+  }
+
+  /**
+   * This method allows user zoom to a geometry/entity using their Id
+   * @param id - string id of entity
+   */
+  public zoomToEntityById(id: string) {
+    if (this.viewer.entities.getById(id)) {
+      this.viewer.zoomTo(this.viewer.entities.getById(id)!);
+    }
+  }
+
+  /**
+   * To get a geometry/entity using their Id
+   * @param id string id of entity
+   */
+  public getEntityById(id: string) {
+    if (this.viewer.entities.getById(id)) {
+      return this.viewer.entities.getById(id);
+    }
+
+    throw new Error("Entity Doesn't exist");
+  }
+
+  /**
+   * This method allows user to remove an entity using object (geometry)
+   * @param entity Entity
+   */
+  public removeEntity(entity: Entity) {
+    if (this.viewer.entities.contains(entity))
+      this.viewer.entities.remove(entity);
+    this.viewer.scene.requestRender();
+  }
+
+  isCompareMode: boolean = false;
+  private sliderHTML: any;
+  private tilesetRight: any = [];
+  private tilesetLeft: Array<ModelLayer> = [];
+  private handlerSlider: ScreenSpaceEventHandler;
+
+  /**
+   * Start the compare mode. Adds a secondary map to the right side of the original
+   * map with the same settings as the original map. Panning is synced between the two maps.
+   * Primary use is to compare two different time periods with each map having a different
+   * ortho layer representing each time period
+   */
+  public startCompare(): Promise<any> | null {
+    return new Promise<void>((resolve) => {
+      if (!this.viewer) {
+        resolve();
+      }
+      if (this.isCompareMode) this.stopCompare();
+      this.removeAllLayers();
+      this.isCompareMode = true;
+      this.sliderHTML = document.createElement("div");
+
+      this.sliderHTML.style.position = "absolute";
+      this.sliderHTML.style.left = "50%";
+      this.sliderHTML.style.top = "0%";
+      this.sliderHTML.style.backgroundColor = "#d3d3d3";
+      this.sliderHTML.style.width = "5px";
+      this.sliderHTML.style.height = "100%";
+      this.sliderHTML.style.zIndex = "111110";
+      this.sliderHTML.style.cursor = "ew-resize";
+
+      const mapContainer = document.getElementById(this.options.mapElementId)!;
+      mapContainer.append(this.sliderHTML);
+
+      if (this.viewer)
+        // Sync the position of the slider with the split position
+        this.viewer.scene.splitPosition =
+          this.sliderHTML.offsetLeft /
+          this.sliderHTML.parentElement!.offsetWidth;
+      this.handlerSlider = new ScreenSpaceEventHandler(this.sliderHTML);
+      let moveActive = false;
+
+      const move = (movement: any) => {
+        if (!moveActive) {
+          return;
+        }
+
+        const relativeOffset = movement.endPosition.x;
+        const splitPosition =
+          (this.sliderHTML.offsetLeft + relativeOffset) /
+          this.sliderHTML.parentElement.offsetWidth;
+        this.sliderHTML.style.left = `${100.0 * splitPosition}%`;
+        if (this.viewer) {
+          this.viewer.scene.splitPosition = splitPosition;
+          this.viewer.scene.requestRender();
+        }
+      };
+
+      this.handlerSlider.setInputAction(() => {
+        moveActive = true;
+      }, ScreenSpaceEventType.LEFT_DOWN);
+      this.handlerSlider.setInputAction(() => {
+        moveActive = true;
+      }, ScreenSpaceEventType.PINCH_START);
+
+      this.handlerSlider.setInputAction(move, ScreenSpaceEventType.MOUSE_MOVE);
+      this.handlerSlider.setInputAction(move, ScreenSpaceEventType.PINCH_MOVE);
+
+      this.handlerSlider.setInputAction(() => {
+        moveActive = false;
+      }, ScreenSpaceEventType.LEFT_UP);
+      this.handlerSlider.setInputAction(() => {
+        moveActive = false;
+      }, ScreenSpaceEventType.PINCH_END);
+      resolve();
+    });
+  }
+
+  /**
+   * Stops the Compare mode. This will remove the Compare map and restore the original map
+   */
+  public stopCompare() {
+    if (!this.viewer) {
+      return;
+    }
+
+    if (this.isCompareMode) {
+
+      this.isCompareMode = false;
+
+      document
+        .getElementById(this.options.mapElementId)
+        ?.removeChild(this.sliderHTML);
+
+      this.handlerSlider.removeInputAction(ScreenSpaceEventType.LEFT_DOWN);
+      this.handlerSlider.removeInputAction(ScreenSpaceEventType.PINCH_START);
+      this.handlerSlider.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);
+      this.handlerSlider.removeInputAction(ScreenSpaceEventType.PINCH_MOVE);
+      this.handlerSlider.removeInputAction(ScreenSpaceEventType.LEFT_UP);
+      this.handlerSlider.removeInputAction(ScreenSpaceEventType.PINCH_START);
+
+      Object.keys(this.tilesetRight).forEach((type) => {
+        const layers = this.tilesetRight[type];
+        Object.keys(layers).forEach((name) => {
+          const layer = layers[name];
+          if (layer !== null) {
+            layer.remove();
+          }
+        });
+      });
+
+      this.tilesetLeft.forEach((layer: ModelLayer) => {
+        if (layer instanceof ModelLayer) {
+          console.log(layer);
+
+          layer.tileset.splitDirection = SplitDirection.NONE;
+        }
+      });
+
+      this.viewer.scene.requestRender();
+      this.tilesetLeft = [];
+      this.tilesetRight = [];
+    }
+  }
+}