Add minzoom and maxzoom block #77

src/components/layers/LayerEditor.jsx

@@ -6,6 +6,8 @@ import PropertyGroup from '../fields/PropertyGroup'
 import LayerEditorGroup from './LayerEditorGroup'
 import LayerTypeBlock from './LayerTypeBlock'
 import LayerIdBlock from './LayerIdBlock'
+import MinZoomBlock from './MinZoomBlock'
+import MaxZoomBlock from './MaxZoomBlock'
 import LayerSourceBlock from './LayerSourceBlock'
 import LayerSourceLayerBlock from './LayerSourceLayerBlock'
 
@@ -130,6 +132,14 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source-layer', v)}
         />
         }
+        <MinZoomBlock
+          value={this.props.layer.minzoom}
+          onChange={v => this.changeProperty(null, 'minzoom', v)}
+        />
+        <MaxZoomBlock
+          value={this.props.layer.maxzoom}
+          onChange={v => this.changeProperty(null, 'maxzoom', v)}
+        />
       </div>
       case 'filter': return <div>
         <div className="maputnik-filter-editor-wrapper">

src/components/layers/MaxZoomBlock.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
+import InputBlock from '../inputs/InputBlock'
+import NumberInput from '../inputs/NumberInput'
+
+class MaxZoomBlock extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.number.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"Max Zoom"} doc={GlSpec.layer.maxzoom.doc}>
+      <NumberInput
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={GlSpec.layer.maxzoom.minimum}
+        max={GlSpec.layer.maxzoom.maximum}
+        default={GlSpec.layer.maxzoom.maximum}
+      />
+    </InputBlock>
+  }
+}
+
+export default MaxZoomBlock

src/components/layers/MinZoomBlock.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
+import InputBlock from '../inputs/InputBlock'
+import NumberInput from '../inputs/NumberInput'
+
+class MinZoomBlock extends React.Component {
+  static propTypes = {
+    value: React.PropTypes.number.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"Min Zoom"} doc={GlSpec.layer.minzoom.doc}>
+      <NumberInput
+        value={this.props.value}
+        onChange={this.props.onChange}
+        min={GlSpec.layer.minzoom.minimum}
+        max={GlSpec.layer.minzoom.maximum}
+        default={GlSpec.layer.minzoom.minimum}
+      />
+    </InputBlock>
+  }
+}
+
+export default MinZoomBlock