diff --git a/src/app.jsx b/src/app.jsx
index 3d6ae72..d0ddab4 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -41,6 +41,7 @@ export default class App extends React.Component {
this.state = {
accessToken: this.settingsStore.accessToken,
mapStyle: style.emptyStyle,
+ selectedLayer: null,
}
}
@@ -102,9 +103,13 @@ export default class App extends React.Component {
}
}
+ onLayerSelected(layerId) {
+ this.setState({
+ selectedLayer: this.state.mapStyle.getIn(['layers', layerId],null)
+ })
+ }
+
render() {
- const layers = this.state.mapStyle.get('layers').keySeq()
- console.log(layers.size)
return
@@ -136,7 +142,7 @@ export default class App extends React.Component {
overflow: "hidden",
backgroundColor: colors.gray}
}>
- {layers.size > 0 && }
+ {this.state.selectedLayer && }
{this.mapRenderer()}
diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx
index 1197396..5988a02 100644
--- a/src/layers/editor.jsx
+++ b/src/layers/editor.jsx
@@ -43,9 +43,6 @@ export class LayerEditor extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
- this.state = {
- isOpened: false,
- }
}
getChildContext () {
@@ -79,10 +76,6 @@ export class LayerEditor extends React.Component {
this.props.onLayerChanged(changedLayer)
}
- toggleLayer() {
- this.setState({isOpened: !this.state.isOpened})
- }
-
layerFromType(type) {
if (type === "fill") {
return
-
+
#{this.props.layer.get('id')}
@@ -155,11 +148,9 @@ export class LayerEditor extends React.Component {
-
-
- {this.layerFromType(this.props.layer.get('type'))}
-
-
+
+ {this.layerFromType(this.props.layer.get('type'))}
+
}
}
diff --git a/src/layers/list.jsx b/src/layers/list.jsx
index ccf152d..12de4f0 100644
--- a/src/layers/list.jsx
+++ b/src/layers/list.jsx
@@ -9,12 +9,18 @@ import Space from 'rebass/dist/Space'
import { LayerEditor } from './editor.jsx'
import scrollbars from '../scrollbars.scss'
import PureRenderMixin from 'react-addons-pure-render-mixin';
+import theme from '../theme.js'
// List of collapsible layer editors
export class LayerList extends React.Component {
static propTypes = {
layers: React.PropTypes.instanceOf(Immutable.OrderedMap),
- onLayersChanged: React.PropTypes.func.isRequired
+ onLayersChanged: React.PropTypes.func.isRequired,
+ onLayerSelected: React.PropTypes.func,
+ }
+
+ static defaultProps = {
+ onLayerSelected: () => {},
}
constructor(props) {
@@ -35,12 +41,23 @@ export class LayerList extends React.Component {
render() {
var layerPanels = []
layerPanels = this.props.layers.map(layer => {
- return
+ const layerId = layer.get('id')
+ return
+ this.props.onLayerSelected(layerId)}>
+
+ #{layerId}
+
+
+
+
}).toIndexedSeq()
return