Track known vector layer ids

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 && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.state.mapStyle.get('sources')}/>}
+      {selectedLayer && <LayerEditor layer={selectedLayer} onLayerChanged={this.onLayerChanged.bind(this)} sources={this.layerWatcher.sources}/>}
       </div>
       {this.mapRenderer()}
     </div>

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 });
     });
   }

src/layers/source.jsx

@@ -27,6 +27,12 @@ export default class SourceEditor extends React.Component {
 		const options = this.props.sources.map((source, sourceId)=> {
 			return <option key={sourceId} value={sourceId}>{sourceId}</option>
 		}).toIndexedSeq()
+
+    const layerOptions = this.props.sources.get(this.props.source, Immutable.Set()).map(vectorLayerId => {
+      const id = vectorLayerId
+			return <option key={id} value={id}>{id}</option>
+		}).toIndexedSeq()
+
     console.log(this.props.sources)
 	  return <div>
       <div style={inputStyle.property}>
@@ -41,12 +47,13 @@ export default class SourceEditor extends React.Component {
       </div>
 	    <div style={inputStyle.property}>
         <label style={inputStyle.label}>Source Layer</label>
-        <input
-          style={inputStyle.input}
-          name={"sourceLayer"}
+        <select
+          style={inputStyle.select}
           value={this.props.sourceLayer}
           onChange={(e) => this.onSourceLayerChange(e.target.value)}
-        />
+        >
+          {layerOptions}
+        </select>
 		  </div>
 		</div>
 

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])]
+    }))
+  }
+}