Added collapsible sidebar

      alignItems="center"

      item

      xs={3}

      id="coordContainer"

      id="coordContainerParent"

    >

      <Grid item xs>

        <StyledTooltip

          arrow

          TransitionComponent={Zoom}

        >

          <div className={classes.container}>

          <div id="coordContianer" className={classes.container}>

            <Paper

              style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}

              variant="outlined"

import L from "leaflet";

import "leaflet-fullscreen";

import ProjectionControl from "./ProjectionControl";

import MousePositionControl from "./MousePositionControl";

import AstroDrawControl from "./AstroDrawControl";

 */

export default L.AstroControlManager = L.Class.extend({

  /**

   * @function ProjectionControl.prototype.initialize

   * @function AstroControlManager.prototype.initialize

   * @description Creates all of the required controls.

   * @param {AstroMap} map - The AstroMap to add the controls to. We need to pass in the map here

   *                         because the drawnItems FeatureGroup needs it when initialized.

   */

  initialize: function(map) {

    this._controls = [];

    this._projControl = new ProjectionControl();

    this._controls.push(this._projControl);

    this._mouseControl = new MousePositionControl({

      numDigits: 3

    });

    this._controls.push(this._mouseControl);

    this._zoomControl = new L.Control.Zoom();

    this._controls.push(this._zoomControl);

    this._fullscreenControl = new L.Control.Fullscreen();

    this._controls.push(this._fullscreenControl);

    let drawnItems = new L.FeatureGroup();

    map.addLayer(drawnItems);

        featureGroup: drawnItems

      }

    });

    this._controls.push(this._drawControl);

    this._sidebarControl = new AstroSidebarControl(

      L.DomUtil.get("consoleToolbar"),

      L.DomUtil.get("consoleToolbarParent")

      L.DomUtil.get("coordContianer")

    );

  },

  /**

   * @function ProjectionControl.prototype.addTo

   * @function AstroControlManager.prototype.addTo

   * @description Adds all of the controls to the AstroMap.

   * @param {AstroMap} map - The AstroMap to add the controls to.

   */

  addTo: function(map) {

    map.addControl(this._projControl);

    map.addControl(this._mouseControl);

    map.addControl(this._drawControl);

    map.addControl(this._zoomControl);

    this._controls.forEach(function(control, index) {

      map.addControl(control);

    });

    map.addControl(new L.Control.Scale({ imperial: false }));

    let that = this;

    map.on("fullscreenchange", function() {

      if (map.isFullscreen()) {

        map.addControl(that._sidebarControl);

        console.log(that._sidebarControl.getContainer());

        that.reorderControls(map);

      } else {

        map.removeControl(that._sidebarControl);

      }

    });

  },

  /**

   * @function AstroControlManager.prototype.reorderControls

   * @description Removes/adds the existing controls to the map so that the

   *              sidebar control is at the top.

   * @param {AstroMap} map - The AstroMap to add the controls to.

   */

  reorderControls: function(map) {

    this._controls.forEach(function(control, index) {

      map.removeControl(control);

    });

    map.addControl(this._sidebarControl);

    this._controls.forEach(function(control, index) {

      map.addControl(control);

    });

  }

});

 */

export default L.Control.AstroDrawControl = L.Control.Draw.extend({

  options: {

    position: "topleft",

    draw: { circle: false, marker: false, circlemarker: false },

    edit: false

  },

import L from "leaflet";

import "proj4leaflet";

import AstroProj from "./AstroProj";

import LayerCollection from "./LayerCollection";

import L from "leaflet";

import "leaflet-fullscreen";

import { MY_JSON_MAPS } from "./layers";

import "proj4leaflet";

/**

 * @class AstroMap

    zoom: 1,

    maxZoom: 8,

    attributionControl: false,

    fullscreenControl: true,

    zoomControl: false

  },

import L from "leaflet";

import AstroMath from "./AstroMath";

/**

 * @aka L.Control.MousePositionControl

 * @extends L.Control

 *

 * @classdesc Class that inherits from the class L.Control and handles the back-end when a user clicks on the lat/lon buttons.

 * Since this class inherits L.Control, it is added to the AstroMap in the same way as other controls, like the zoom control.

 * @classdesc Class that inherits from the class L.Control and handles the back-end when a user

 *            clicks on the lat/lon buttons.

 * Since this class inherits L.Control, it is added to the AstroMap in the same way as other controls,

 *             like the zoom control.

 *

 * @example

 * // initialize the control with an options object.

  /**

   * @function MousePositionControl.prototype.onAdd

   * @description Grabs the lat/lon buttons from the GUI and adds on-change events to them. It also adds an on mouse-over event to the AstroMap to grab the current mouse position of the user's mouse pointer.

   * @description Grabs the lat/lon buttons from the GUI and adds on-change events to them. It also

   *              adds an on mouse-over event to the AstroMap to grab the current mouse position of

   *              the user's mouse pointer.

   * @param  {AstroMap} map - The AstroMap to add the control to.

   * @return {Object} The div-container the control is in.

   */

  onAdd: function(map) {

    this.container = L.DomUtil.create("div", "leaflet-control-mouseposition");

    L.DomEvent.disableClickPropagation(this.container);

    map.on("mousemove", this.onMouseMove, this);

    map.on("mouseout", this.onMouseOut, this);

    this.latitudeTypeOgraphic = L.DomUtil.get("consoleLatTypeOgraphic");

    L.DomEvent.on(this.latitudeTypeOgraphic, "click", this.changeLatType, this);

    return this.container;

    // We don't want to add the buttons to a div on the map, so just return a blank one.

    return L.DomUtil.create("div");

  },

  /**