Commit 397c1252 authored by Kaitlyn's avatar Kaitlyn
Browse files

Playing around with sidebar

parent e5446bcc

app/src/js/AstroControlManager.js

0 → 100644
+52 −0
Original line number Diff line number Diff line 
import L from "leaflet";

import ProjectionControl from "./ProjectionControl";

import MousePositionControl from "./MousePositionControl";

import AstroDrawControl from "./AstroDrawControl";

import AstroSidebarControl from "./SidebarControl";



/**

 * @class LayerCollection

 * @aka L.Class.LayerCollection

 * @inherits L.Class

 *

 * @classdesc

 * Holds the base layers and overlays of a particular projection

 * for quick and easy use in the AstroMap class.

 */

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

  initialize: function(map) {

    this._projControl = new ProjectionControl();

    map.addControl(this._projControl);



    this._mouseControl = new MousePositionControl({

      numDigits: 3

    });

    map.addControl(this._mouseControl);



    let drawnItems = new L.FeatureGroup();

    map.addLayer(drawnItems);



    this._drawControl = new AstroDrawControl({

      edit: {

        featureGroup: drawnItems

      }

    });

    map.addControl(this._drawControl);



    this._sidebarControl = new AstroSidebarControl(map, [

      this._projControl,

      this._mouseControl

    ]);



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



    let that = this;

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

      if (map.isFullscreen()) {

        map.addControl(that._sidebarControl);

      } else {

        map.removeControl(that._sidebarControl);

      }

    });

  }

});

app/src/js/MousePositionControl.js

+9 −9
Original line number Diff line number Diff line
@@ -77,26 +77,26 @@ export default L.Control.MousePositionControl = L.Control.extend({ 


  moveControl: function(container, isFullscreen) {

    if (isFullscreen) {

      container.appendChild(this.lonDisplayElement);

      container.appendChild(this.latDisplayElement);

      container.appendChild(this.lonDomain180);

      container.appendChild(this.lonDomain360);

      // container.appendChild(this.lonDisplayElement);

      // container.appendChild(this.latDisplayElement);

      container.appendChild(this.lonDirectionEast);

      container.appendChild(this.lonDirectionWest);

      container.appendChild(this.latitudeTypeOcentric);

      container.appendChild(this.latitudeTypeOgraphic);

      container.appendChild(this.lonDomain180);

      container.appendChild(this.lonDomain360);

    } else {

      let coordContainer = L.DomUtil.get("coordContainer");

      coordContainer.appendChild(this.lonDisplayElement);

      coordContainer.appendChild(this.latDisplayElement);

      // let coordContainer = L.DomUtil.get("coordContainer");

      // coordContainer.appendChild(this.lonDisplayElement);

      // coordContainer.appendChild(this.latDisplayElement);



      let lonLatContainer = L.DomUtil.get("lonLatContainer");

      lonLatContainer.appendChild(this.lonDomain180);

      lonLatContainer.appendChild(this.lonDomain360);

      lonLatContainer.appendChild(this.lonDirectionEast);

      lonLatContainer.appendChild(this.lonDirectionWest);

      lonLatContainer.appendChild(this.latitudeTypeOcentric);

      lonLatContainer.appendChild(this.latitudeTypeOgraphic);

      lonLatContainer.appendChild(this.lonDomain180);

      lonLatContainer.appendChild(this.lonDomain360);

    }

  },

app/src/js/SidebarControl.js

0 → 100644
+49 −0
Original line number Diff line number Diff line 
import L from "leaflet";

import "leaflet-sidebar-v2";



/**

 * @class AstroDrawControl

 * @aka L.Control.AstroDrawControl

 * @extends L.Control

 * @classdesc

 * Class that extends from the class L.Control.Draw and handles the back-end when a user draws on the leaflet map.

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

 *

 * @example

 *

 * // add a feature group to the map

 * let drawnItems = new L.FeatureGroup();

 * map.addLayer(drawnItems);

 *

 * // add draw control to map

 * let drawControl = new AstroDrawControl({

 *   edit: {

 *      featureGroup: drawnItems

 *   }

 * }).addTo(map);

 */

export default L.Control.AstroSidebarControl = L.Control.Sidebar.extend({

  initialize: function(map, controls) {

    this._controls = controls;

    L.Control.Sidebar.prototype.initialize.call(this, map, {

      position: "right",

      autopan: true,

      closeButton: true

    });

  },



  onAdd: function(map) {

    let container = L.Control.Sidebar.prototype.onAdd.call(this, map);

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

      control.moveControl(container, true);

    });

    return container;

  },



  onRemove: function(map) {

    L.Control.Sidebar.prototype.onRemove.call(this, map);

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

      control.moveControl(null, false);

    });

  }

});

app/src/styles.css

+4 −0
Original line number Diff line number Diff line
@@ -20,3 +20,7 @@ Controls the CSS for projection buttons when there is no available projection 
.disabled {

  opacity: 40%;

}



.leaflet-sidebar {

  width: 200px;

}