Support different source types

src/components/Toolbar.jsx

@@ -113,8 +113,8 @@ export default class Toolbar extends React.Component {
       <SourcesModal
         mapStyle={this.props.mapStyle}
         onStyleChanged={this.props.onStyleChanged}
-        isOpen={this.state.openSourcesModal}
+        //isOpen={this.state.openSourcesModal}
-        //isOpen={true}
+        isOpen={true}
         toggle={() => this.toggleSources.bind(this)}
       />
       <ToolbarAction style={{

src/components/modals/SourcesModal.jsx

@@ -3,6 +3,8 @@ import Modal from './Modal'
 import Heading from '../Heading'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
+import SourceTypeEditor from '../sources/SourceTypeEditor'
+
 import publicSources from '../../config/tilesets.json'
 import colors from '../../config/colors'
 import { margins, fontSizes } from '../../config/scales'
@@ -36,11 +38,10 @@ class PublicSource extends React.Component {
       }}>
         <div>
           <span style={{fontWeight: 700}}>{this.props.title}</span><br/>
-          <span style={{fontSize: fontSizes[5]}}>{this.props.id}</span>
+          <span style={{fontSize: fontSizes[5]}}>#{this.props.id}</span>
         </div>
         <span style={{flexGrow: 1}} />
         <a style={{
-          display: 'table',
           cursor: 'pointer',
           backgroundColor: colors.midgray,
           color: colors.lowgray,
@@ -54,7 +55,7 @@ class PublicSource extends React.Component {
   }
 }
 
-class SourceEditor extends React.Component {
+class SourceEditorLayout extends React.Component {
   static propTypes = {
     sourceId: React.PropTypes.string.isRequired,
     source: React.PropTypes.object.isRequired,
@@ -64,21 +65,34 @@ class SourceEditor extends React.Component {
     const inputProps = { }
     return <div style={{
     }}>
-      <InputBlock label={"Source ID"}>
+      <div style={{
-        <StringInput {...inputProps}
+        backgroundColor: colors.gray,
-          value={this.props.sourceId}
+        color: colors.lowgray,
-        />
+        padding: margins[1],
-      </InputBlock>
+        display: 'flex',
-      <InputBlock label={"Source URL"}>
+        fontSize: fontSizes[4],
-        <StringInput {...inputProps}
+        flexDirection: 'row',
-          value={this.props.source.url}
+      }}>
-        />
+        <span style={{fontSize: fontSizes[4], lineHeight: 2}}>#{this.props.sourceId}</span>
-      </InputBlock>
+        <span style={{flexGrow: 1}} />
-      <InputBlock label={"Source Type"}>
+        <a style={{
-        <StringInput {...inputProps}
+          cursor: 'pointer',
-          value={this.props.source.type}
+          backgroundColor: colors.midgray,
-        />
+          color: colors.lowgray,
-      </InputBlock>
+          padding: margins[1],
+          borderRadius: 2,
+        }}>
+          Remove
+        </a>
+      </div>
+      <div style={{
+        borderColor: colors.gray,
+        borderWidth: 2,
+        borderStyle: 'solid',
+        padding: margins[1],
+      }}>
+        <SourceTypeEditor source={this.props.source} />
+      </div>
     </div>
   }
 }
@@ -94,10 +108,10 @@ class SourcesModal extends React.Component {
   render() {
     const activeSources = Object.keys(this.props.mapStyle.sources).map(sourceId => {
       const source = this.props.mapStyle.sources[sourceId]
-      return <SourceEditor sourceId={sourceId} source={source} />
+      return <SourceEditorLayout sourceId={sourceId} source={source} />
     })
 
-    const tilesetOptions = publicSources.map(tileset => {
+    const tilesetOptions = publicSources.filter(tileset => !(tileset.id in this.props.mapStyle.sources)).map(tileset => {
       return <PublicSource
         id={tileset.id}
         type={tileset.type}

src/components/sources/SourceTypeEditor.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import InputBlock from '../inputs/InputBlock'
+import StringInput from '../inputs/StringInput'
+
+class TileJSONSourceEditor extends React.Component {
+  static propTypes = {
+    url: React.PropTypes.string.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"TileJSON URL"}>
+      <StringInput
+        value={this.props.url}
+      />
+    </InputBlock>
+  }
+}
+
+class TileURLSourceEditor extends React.Component {
+  static propTypes = {
+    tiles: React.PropTypes.array.isRequired,
+    minZoom: React.PropTypes.number.isRequired,
+    maxZoom: React.PropTypes.number.isRequired,
+  }
+
+  renderTileUrls() {
+    return this.props.tiles.map((tileUrl, tileIndex) => {
+      <InputBlock key={tileIndex} label={"Tile URL " + tileIndex}>
+        <StringInput
+          value={this.props.data}
+        />
+      </InputBlock>
+    })
+  }
+
+  render() {
+    return <div>
+      {this.renderTileUrls()}
+      <InputBlock label={"GeoJSON Data"}>
+        <StringInput
+          value={this.props.data}
+        />
+      </InputBlock>
+      <InputBlock label={"Min Zoom"}>
+        <StringInput
+          value={this.props.minZoom}
+        />
+      </InputBlock>
+      <InputBlock label={"Max Zoom"}>
+        <StringInput
+          value={this.props.maxZoom}
+        />
+      </InputBlock>
+  </div>
+
+  }
+}
+
+class GeoJSONSourceEditor extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.string.isRequired,
+  }
+
+  render() {
+    return <InputBlock label={"GeoJSON Data"}>
+      <StringInput
+        value={this.props.data}
+      />
+    </InputBlock>
+  }
+}
+
+class SourceTypeEditor extends React.Component {
+  static propTypes = {
+    source: React.PropTypes.object.isRequired,
+  }
+
+  render() {
+    const source = this.props.source
+    if(source.type === "geojson") {
+      return <GeoJSONSourceEditor data={source.data} />
+    }
+    if(source.type === "vector") {
+      if(source.url) {
+        return <TileJSONSourceEditor url={source.url}/>
+      } else {
+        return <TileURLSourceEditor tiles={source.tiles} minZoom={source.minZoom} maxZoom={source.maxZoom}/>
+      }
+    }
+    return null
+  }
+}
+
+export default SourceTypeEditor