Load icon and font metadata from endpoint

src/components/fields/PropertyGroup.jsx

@@ -1,20 +1,34 @@
 import React from 'react'
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 
 import ZoomSpecField from './ZoomSpecField'
 import colors from '../../config/colors'
 import { margins } from '../../config/scales'
 
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
+
 /** Extract field spec by {@fieldName} from the {@layerType} in the
  * style specification from either the paint or layout group */
-function getFieldSpec(layerType, fieldName) {
-  const groupName = getGroupName(layerType, fieldName)
-  const group = GlSpec[groupName + '_' + layerType]
-  return group[fieldName]
+function getFieldSpec(spec, layerType, fieldName) {
+  const groupName = getGroupName(spec, layerType, fieldName)
+  const group = spec[groupName + '_' + layerType]
+  const fieldSpec = group[fieldName]
+  if(iconProperties.indexOf(fieldName) >= 0) {
+    return {
+      ...fieldSpec,
+      values: spec.$root.sprite.values
+    }
+  }
+  if(fieldName === 'text-font') {
+    return {
+      ...fieldSpec,
+      values: spec.$root.glyphs.values
+    }
+  }
+  return fieldSpec
 }
 
-function getGroupName(layerType, fieldName) {
-  const paint  = GlSpec['paint_' + layerType] || {}
+function getGroupName(spec, layerType, fieldName) {
+  const paint  = spec['paint_' + layerType] || {}
   if (fieldName in paint) {
     return 'paint'
   } else {
@@ -27,16 +41,17 @@ export default class PropertyGroup extends React.Component {
     layer: React.PropTypes.object.isRequired,
     groupFields: React.PropTypes.array.isRequired,
     onChange: React.PropTypes.func.isRequired,
+    spec: React.PropTypes.object.isRequired,
   }
 
   onPropertyChange(property, newValue) {
-    const group = getGroupName(this.props.layer.type, property)
+    const group = getGroupName(this.props.spec, this.props.layer.type, property)
     this.props.onChange(group , property, newValue)
   }
 
   render() {
     const fields = this.props.groupFields.map(fieldName => {
-      const fieldSpec = getFieldSpec(this.props.layer.type, fieldName)
+      const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
 
       const paint = this.props.layer.paint || {}
       const layout = this.props.layer.layout || {}

src/components/fields/SpecField.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import color from 'color'
 
-import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
 import ColorField from './ColorField'
 import NumberInput from '../inputs/NumberInput'
 import CheckboxInput from '../inputs/CheckboxInput'
@@ -10,8 +9,10 @@ import SelectInput from '../inputs/SelectInput'
 import MultiButtonInput from '../inputs/MultiButtonInput'
 import ArrayInput from '../inputs/ArrayInput'
 import FontInput from '../inputs/FontInput'
+import IconInput from '../inputs/IconInput'
 import capitalize from 'lodash.capitalize'
 
+const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
 import input from '../../config/input.js'
 
@@ -78,11 +79,17 @@ export default class SpecField extends React.Component {
             options={options}
           />
         }
-      case 'string': return (
-        <StringInput
-          {...commonProps}
-        />
-      )
+      case 'string':
+        if(iconProperties.indexOf(this.props.fieldName) >= 0) {
+          return <IconInput
+            {...commonProps}
+            icons={this.props.fieldSpec.values}
+          />
+        } else {
+          return <StringInput
+            {...commonProps}
+          />
+        }
       case 'color': return (
         <ColorField
           {...commonProps}
@@ -97,6 +104,7 @@ export default class SpecField extends React.Component {
         if(this.props.fieldName === 'text-font') {
           return <FontInput
             {...commonProps}
+            fonts={this.props.fieldSpec.values}
           />
         } else {
           return <ArrayInput