diff --git a/src/app.jsx b/src/app.jsx index 13910d8d..72c81db3 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -15,6 +15,7 @@ import style from './style.js' import { loadDefaultStyle, SettingsStore, StyleStore } from './stylestore.js' import { ApiStyleStore } from './apistore.js' +import LayerWatcher from './layerwatcher.js' import theme from './theme.js' import { colors, fullHeight } from './theme.js' import './index.css' @@ -27,7 +28,7 @@ export default class App extends React.Component { constructor(props) { super(props) - + this.layerWatcher = new LayerWatcher() this.styleStore = new ApiStyleStore() this.styleStore.supported(isSupported => { if(!isSupported) { @@ -106,6 +107,9 @@ export default class App extends React.Component { const mapProps = { mapStyle: this.state.mapStyle, accessToken: this.state.accessToken, + onMapLoaded: (map) => { + this.layerWatcher.map = map + } } const renderer = this.state.mapStyle.getIn(['metadata', 'maputnik:renderer'], 'mbgljs') if(renderer === 'ol3') { @@ -156,7 +160,7 @@ export default class App extends React.Component { width: 300, backgroundColor: colors.gray} }> - {selectedLayer && } + {selectedLayer && } {this.mapRenderer()} diff --git a/src/gl.jsx b/src/gl.jsx index d7493d5a..1f22b162 100644 --- a/src/gl.jsx +++ b/src/gl.jsx @@ -7,6 +7,14 @@ import Immutable from 'immutable' import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color' export class MapboxGlMap extends Map { + static propTypes = { + onMapLoaded: React.PropTypes.func, + } + + static defaultProps = { + onMapLoaded: () => {} + } + constructor(props) { super(props) this.state = { map: null } @@ -51,6 +59,7 @@ export class MapboxGlMap extends Map { }); map.on("style.load", (...args) => { + this.props.onMapLoaded(map) this.setState({ map }); }); } diff --git a/src/layers/source.jsx b/src/layers/source.jsx index 3a2f5e87..5faf4b91 100644 --- a/src/layers/source.jsx +++ b/src/layers/source.jsx @@ -27,6 +27,12 @@ export default class SourceEditor extends React.Component { const options = this.props.sources.map((source, sourceId)=> { return }).toIndexedSeq() + + const layerOptions = this.props.sources.get(this.props.source, Immutable.Set()).map(vectorLayerId => { + const id = vectorLayerId + return + }).toIndexedSeq() + console.log(this.props.sources) return
@@ -41,12 +47,13 @@ export default class SourceEditor extends React.Component {
- this.onSourceLayerChange(e.target.value)} - /> + > + {layerOptions} +
diff --git a/src/layerwatcher.js b/src/layerwatcher.js new file mode 100644 index 00000000..a8b9aa40 --- /dev/null +++ b/src/layerwatcher.js @@ -0,0 +1,26 @@ +import Immutable from 'immutable' + +/** Listens to map events to build up a store of available vector + * layers contained in the tiles */ +export default class LayerWatcher { + constructor() { + this._sources = {} + } + + /** Set the map as soon as the map is initialized */ + set map(m) { + //TODO: At some point we need to unsubscribe when new map is set + m.on('data', (e) => { + if(e.dataType !== 'tile') return + this._sources[e.source.id] = e.source.vectorLayerIds + }) + } + + /** Access all known sources and their vector tile ids */ + get sources() { + console.log(this._sources) + return Immutable.Map(Object.keys(this._sources).map(key => { + return [key, Immutable.Set(this._sources[key])] + })) + } +}