Store highlighted layer in metadata

src/components/App.jsx

@@ -110,6 +110,20 @@ export default class App extends React.Component {
     this.onLayersChange(changedLayers)
   }
 
+  changeHighlightedLayer(highlight) {
+    const metadata = this.state.mapStyle.metadata || {}
+    const layers = this.state.mapStyle.layers
+    const highlightedLayer = highlight ? layers[this.state.selectedLayerIndex].id : null
+
+    const changedStyle = {
+      ...this.state.mapStyle,
+      metadata: {
+        'maputnik:highlighted_layer': highlightedLayer
+      }
+    }
+    this.onStyleChanged(changedStyle)
+  }
+
   onLayerChanged(layer) {
     const changedLayers = this.state.mapStyle.layers.slice(0)
     const idx = style.indexOfLayer(changedLayers, layer.id)
@@ -153,6 +167,7 @@ export default class App extends React.Component {
   render() {
     const layers = this.state.mapStyle.layers || []
     const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
+    const metadata = this.state.mapStyle.metadata || {}
 
     const toolbar = <Toolbar
       mapStyle={this.state.mapStyle}
@@ -172,8 +187,10 @@ export default class App extends React.Component {
       layer={selectedLayer}
       sources={this.layerWatcher.sources}
       vectorLayers={this.layerWatcher.vectorLayers}
+      highlightLayer={metadata['maputnik:highlighted_layer'] ? true : false}
       onLayerChanged={this.onLayerChanged.bind(this)}
       onLayerIdChange={this.onLayerIdChange.bind(this)}
+      onHighlightLayerChange={this.changeHighlightedLayer.bind(this)}
     /> : null
 
     return <AppLayout

src/components/layers/LayerEditor.jsx

@@ -26,6 +26,8 @@ export default class LayerEditor extends React.Component {
     layer: React.PropTypes.object.isRequired,
     sources: React.PropTypes.object,
     vectorLayers: React.PropTypes.object,
+    highlightLayer: React.PropTypes.bool,
+    onHighlightLayerChange: React.PropTypes.func,
     onLayerChanged: React.PropTypes.func,
     onLayerIdChange: React.PropTypes.func,
   }
@@ -138,8 +140,9 @@ export default class LayerEditor extends React.Component {
         />
         <InputBlock label={"Inspection Mode"}>
           <MultiButtonInput
-            value={"highlight"}
+            value={this.props.highlightLayer ? "highlight" : "normal"}
             options={[["highlight", "Highlight"], ["normal", "Normal"]]}
+            onChange={v => this.props.onHighlightLayerChange(v === "highlight")}
           />
         </InputBlock>
       </div>
@@ -157,6 +160,7 @@ export default class LayerEditor extends React.Component {
   }
 
   render() {
+    console.log(this.props)
     const layerType = this.props.layer.type
     const layoutGroups = layout[layerType].groups.filter(group => {
       return !(this.props.layer.type === 'background' && group.type === 'source')