Add annotations layer

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import '../css/LayersControlAnnotations.scss';
+import { Checkbox, ExpandButton } from './Toggle';
+import { _ } from '../classes/gettext';
+
+class AnnotationLayer extends React.Component{
+  static propTypes = {
+    layer: PropTypes.object
+  }
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+      visible: true
+    }
+  }
+
+  handleFocus = () => {
+    const { layer } = this.props;
+    if (layer.options.bounds || layer.getBounds){
+      const bounds = layer.options.bounds !== undefined ? 
+                     layer.options.bounds :
+                     layer.getBounds();
+      layer._map.fitBounds(bounds);
+    }else if (layer._latlng){
+      layer._map.setView(layer._latlng, 22);
+    }
+
+    if (layer.getPopup()) layer.openPopup();
+  }
+
+  handleDelete = () => {
+
+  }
+
+  render(){
+    const { layer } = this.props;
+    const meta = layer[Symbol.for("meta")];
+
+    return (<div className="layers-control-layer layers-control-annotations">
+      <div className="layer-control-title">
+        <Checkbox bind={[this, 'visible']}/> <a className="layer-label" href="javascript:void(0)" onClick={this.handleFocus}><div className="annotation-name">{meta.name}</div></a> <a href="javascript:void(0)" onClick={this.handleDelete}><i className="fa fa-trash"></i></a>
+      </div>
+    </div>);
+  }
+}
+
+export default class LayersControlAnnotations extends React.Component {
+  static defaultProps = {
+    expanded: true,
+    visible: true
+
+};
+  static propTypes = {
+    expanded: PropTypes.bool,
+    visible: PropTypes.bool,
+    layers: PropTypes.array
+}
+
+  constructor(props){
+    super(props);
+
+    this.state = {
+        visible: props.visible,
+        expanded: props.expanded
+    };
+  }
+
+
+  handleLayerClick = () => {
+    console.log("TODO")
+  }
+
+
+  render(){
+    const { layers } = this.props;
+
+    
+    return (<div className="layers-control-layer">
+        <div className="layer-control-title">
+          <ExpandButton bind={[this, 'expanded']} /><Checkbox bind={[this, 'visible']}/>
+          <a title={_("Annotations")} className="layer-label" href="javascript:void(0);" onClick={this.handleLayerClick}><div className="layer-title"><i className="layer-icon fa fa-sticky-note fa-fw"></i> {_("Annotations")}</div></a>
+        </div>
+
+        {this.state.expanded ? 
+        <div className="layer-expanded">
+          {layers.map((layer, i) => <AnnotationLayer key={i} layer={layer} />)}
+        </div> : ""}
+    </div>);
+
+   }
+}

app/static/app/js/components/LayersControlItem.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Checkbox, ExpandButton } from './Toggle';
-
-export default class LayersControlItem extends React.Component {
-  static defaultProps = {
-    expanded: true,
-    visible: true
-
-};
-  static propTypes = {
-    expanded: PropTypes.bool,
-    visible: PropTypes.bool,
-    icon: PropTypes.string,
-    label: PropTypes.string,
-    layers: PropTypes.array
-}
-
-  constructor(props){
-    super(props);
-
-    this.state = {
-        visible: props.visible,
-        expanded: props.expanded
-    };
-  }
-
-
-  handleLayerClick = () => {
-    console.log("TODO")
-  }
-
-  render(){
-    const { label, icon } = this.props;
-
-    return (<div className="layers-control-layer">
-        <div className="layer-control-title">
-          <ExpandButton bind={[this, 'expanded']} /><Checkbox bind={[this, 'visible']}/>
-          <a title={label} className="layer-label" href="javascript:void(0);" onClick={this.handleLayerClick}><div className="layer-title">{icon ? <i className={"layer-icon " + icon}></i> : ""} {label}</div></a>
-        </div>
-
-        {this.state.expanded ? 
-        <div className="layer-expanded">
-            test
-        </div> : ""}
-    </div>);
-
-   }
-}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import '../css/LayersControlPanel.scss';
 import LayersControlLayer from './LayersControlLayer';
-import LayersControlItem from './LayersControlItem';
+import LayersControlAnnotations from './LayersControlAnnotations';
 import { _ } from '../classes/gettext';
 
 export default class LayersControlPanel extends React.Component {
@@ -62,7 +62,7 @@ export default class LayersControlPanel extends React.Component {
 
           {group.annotations.length ? 
             <div className="annotations theme-border-primary">
-               <LayersControlItem icon="fa fa-sticky-note fa-fw" label={_("Annotations")} layers={group.annotations} />
+               <LayersControlAnnotations layers={group.annotations} />
             </div>
           : ""}
 

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import LayersControlAnnotations from '../LayersControlAnnotations';
+
+describe('<LayersControlAnnotations />', () => {
+    it('renders without exploding', () => {
+      const wrapper = mount(<LayersControlAnnotations />);
+      expect(wrapper.exists()).toBe(true);
+    })
+});

app/static/app/js/css/LayersControlAnnotations.scss

@@ -0,0 +1,17 @@
+.layers-control-annotations{
+    .layer-control-title{
+        align-items: baseline;
+        margin-left: 32px;
+    }
+
+    .layer-label{
+        margin-right: 12px;
+        padding-left: 6px;
+    }
+
+    .annotation-name{
+        display: inline;
+        position: relative;
+        top: -1px;
+    }
+}

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

@@ -11,6 +11,7 @@
             text-overflow: ellipsis;
             overflow: hidden;
             text-align: left;
+            height: 28px;
         }
 
         select, input{