diff --git a/src/app.jsx b/src/app.jsx index 09fc771..13910d8 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -156,7 +156,7 @@ export default class App extends React.Component { width: 300, backgroundColor: colors.gray} }> - {selectedLayer && } + {selectedLayer && } {this.mapRenderer()} diff --git a/src/layers/editor.jsx b/src/layers/editor.jsx index 720125a..44dc174 100644 --- a/src/layers/editor.jsx +++ b/src/layers/editor.jsx @@ -11,6 +11,7 @@ import FillLayer from './fill.jsx' import LineLayer from './line.jsx' import SymbolLayer from './symbol.jsx' import BackgroundLayer from './background.jsx' +import SourceEditor from './source.jsx' import MdVisibility from 'react-icons/lib/md/visibility' import MdVisibilityOff from 'react-icons/lib/md/visibility-off' @@ -29,6 +30,7 @@ class UnsupportedLayer extends React.Component { export class LayerEditor extends React.Component { static propTypes = { layer: React.PropTypes.object.isRequired, + sources: React.PropTypes.instanceOf(Immutable.Map), onLayerChanged: React.PropTypes.func, onLayerDestroyed: React.PropTypes.func, } @@ -129,6 +131,7 @@ export class LayerEditor extends React.Component { visibleIcon = } + console.log(this.props.layer.toJSON()) return
@@ -144,6 +147,13 @@ export class LayerEditor extends React.Component { + {this.props.layer.get('type') !== 'background' && }
{this.layerFromType(this.props.layer.get('type'))}
diff --git a/src/layers/source.jsx b/src/layers/source.jsx new file mode 100644 index 0000000..3a2f5e8 --- /dev/null +++ b/src/layers/source.jsx @@ -0,0 +1,54 @@ +import React from 'react' +import Immutable from 'immutable' +import { PropertyGroup } from '../fields/spec' +import PureRenderMixin from 'react-addons-pure-render-mixin'; +import inputStyle from '../fields/input.js' + +/** Choose tileset (source) and the source layer */ +export default class SourceEditor extends React.Component { + static propTypes = { + source: React.PropTypes.string.isRequired, + sourceLayer: React.PropTypes.string.isRequired, + + onSourceChange: React.PropTypes.func.isRequired, + onSourceLayerChange: React.PropTypes.func.isRequired, + + /** List of available sources in the style + * https://www.mapbox.com/mapbox-gl-style-spec/#root-sources */ + sources: React.PropTypes.instanceOf(Immutable.Map).isRequired, + } + + constructor(props) { + super(props); + this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this); + } + + render() { + const options = this.props.sources.map((source, sourceId)=> { + return + }).toIndexedSeq() + console.log(this.props.sources) + return
+
+ + +
+
+ + this.onSourceLayerChange(e.target.value)} + /> +
+
+ + } +}