Add separator between layers

app/static/app/js/components/LayersControlAnnotations.jsx

@@ -115,8 +115,10 @@ export default class LayersControlAnnotations extends React.Component {
   componentDidUpdate(prevProps, prevState){
     if (prevState.visible !== this.state.visible){
       this.annRefs.forEach(ann => {
-        let visible = this.state.visible ? ann.state.visible : false;
-        PluginsAPI.Map.toggleAnnotation(ann.props.layer, visible);
+        if (ann){
+          let visible = this.state.visible ? ann.state.visible : false;
+          PluginsAPI.Map.toggleAnnotation(ann.props.layer, visible);
+        }
       });
     }
   }

app/static/app/js/components/LayersControlLayer.jsx

@@ -16,13 +16,15 @@ export default class LayersControlLayer extends React.Component {
       layer: null,
       expanded: false,
       map: null,
-      overlay: false
+      overlay: false,
+      separator: false,
   };
   static propTypes = {
     layer: PropTypes.object.isRequired,
     expanded: PropTypes.bool,
     map: PropTypes.object.isRequired,
-    overlay: PropTypes.bool
+    overlay: PropTypes.bool,
+    separator: PropTypes.bool
   };
 
   constructor(props){
@@ -340,7 +342,7 @@ export default class LayersControlLayer extends React.Component {
 
     return (<div className="layers-control-layer">
         <div className="layer-control-title">
-            {!this.props.overlay ? <ExpandButton bind={[this, 'expanded']} /> : <div className="paddingSpace"></div>}<Checkbox bind={[this, 'visible']}/>
+            {!this.props.overlay ? <ExpandButton bind={[this, 'expanded']} className="expand-layer" /> : <div className="paddingSpace"></div>}<Checkbox bind={[this, 'visible']}/>
             <a title={meta.name} className="layer-label" href="javascript:void(0);" onClick={this.handleLayerClick}><i className={"layer-icon " + (meta.icon || "fa fa-vector-square fa-fw")}></i><div className="layer-title">{meta.name}</div></a> {meta.raster ? <a className="layer-action" href="javascript:void(0)" onClick={this.handleSideClick}><i title={_("Side By Side")} className={"fa fa-fw " + this.sideIcon()}></i></a> : ""}<a className="layer-action" href="javascript:void(0)" onClick={this.handleZoomToClick}><i title={_("Zoom To")} className="fa fa-expand"></i></a>
         </div>
 
@@ -414,6 +416,8 @@ export default class LayersControlLayer extends React.Component {
                             asset={this.asset} 
                             exportParams={this.getLayerParams} 
                             dropUp />
+            
+            {this.props.separator ? <hr className="layer-separator" /> : ""}
         </div> : ""}
     </div>);
 

app/static/app/js/components/LayersControlPanel.jsx

@@ -84,7 +84,13 @@ export default class LayersControlPanel extends React.Component {
               const m_a = a[Symbol.for("meta")] || {};
               const m_b = b[Symbol.for("meta")] || {};
               return m_a.type > m_b.type ? -1 : 1;
-          }).map((layer, i) => <LayersControlLayer map={this.props.map} expanded={(layer[Symbol.for("meta")] || {}).autoExpand || false} overlay={false} layer={layer} key={`${i}-${(layer[Symbol.for("meta")] || {}).type}`} />)}
+          }).map((layer, i) => <LayersControlLayer map={this.props.map} 
+                                                  expanded={(layer[Symbol.for("meta")] || {}).autoExpand || false} 
+                                                  overlay={false} 
+                                                  layer={layer} 
+                                                  key={`${i}-${(layer[Symbol.for("meta")] || {}).type}`} 
+                                                  separator={i < group.layers.length - 1} 
+                                                />)}
         </div>);
       };
 

app/static/app/js/components/Map.jsx

@@ -687,7 +687,7 @@ _('Example:'),
     }).catch(e => {
         this.setState({showLoading: false, error: e.message});
     });
-
+    
     PluginsAPI.Map.triggerDidAddControls({
       map: this.map,
       tiles: tiles,

app/static/app/js/components/Toggle.jsx

@@ -35,14 +35,16 @@ class Toggle extends React.Component {
 class Checkbox extends Toggle{
     static defaultProps = {
         trueIcon: "far fa-check-square",
-        falseIcon: "far fa-square"
+        falseIcon: "far fa-square",
+        className: ""
     }
 }
 
 class ExpandButton extends Toggle{
     static defaultProps = {
         trueIcon: "fa fa-caret-down",
-        falseIcon: "fa fa-caret-right"
+        falseIcon: "fa fa-caret-right",
+        className: ""
     }
 }
 

app/static/app/js/css/LayersControlLayer.scss

@@ -21,6 +21,15 @@
             padding-right: 6px;
         }
 
+        .expand-layer{
+            margin-right: 3px;
+        }
+
+        hr.layer-separator{
+            margin-top: 6px;
+            margin-left: 8px;
+        }
+
         select, input{
             height: auto;
             padding: 4px;