Added layer comments via 'metadata.maputnik:comment' (issue #28)

src/components/layers/CommentBlock.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+
+class MetadataBlock extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.string,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"Comments"}>
+      <StringInput
+        multi={true}
+        value={this.props.value}
+        onChange={this.props.onChange}
+        default="Comment..."
+      />
+    </InputBlock>
+  }
+}
+
+export default MetadataBlock

src/components/layers/LayerEditor.jsx

@@ -8,6 +8,7 @@ import LayerTypeBlock from './LayerTypeBlock'
 import LayerIdBlock from './LayerIdBlock'
 import MinZoomBlock from './MinZoomBlock'
 import MaxZoomBlock from './MaxZoomBlock'
+import CommentBlock from './CommentBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
@@ -110,6 +111,11 @@ export default class LayerEditor extends React.Component {
   }
 
   renderGroupType(type, fields) {
+    let comment = ""
+    if(this.props.layer.metadata) {
+      comment = this.props.layer.metadata['maputnik:comment']
+    }
+
     switch(type) {
       case 'layer': return <div>
         <LayerIdBlock
@@ -140,6 +146,10 @@ export default class LayerEditor extends React.Component {
           value={this.props.layer.maxzoom}
           onChange={v => this.changeProperty(null, 'maxzoom', v)}
         />
+        <CommentBlock
+          value={comment}
+          onChange={v => this.changeProperty('metadata', 'maputnik:comment', v == ""  ? undefined : v)}
+        />
       </div>
       case 'filter': return <div>
         <div className="maputnik-filter-editor-wrapper">