Added support for encoding to raster-dem source, enabling terrarium tiles.

src/components/App.jsx

@@ -10,7 +10,7 @@ import AppLayout from './AppLayout'
 import MessagePanel from './MessagePanel'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import style from '../libs/style.js'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'

src/components/filter/FilterEditor.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
 import SingleFilterEditor from './SingleFilterEditor'

src/components/layers/LayerIdBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 

src/components/layers/LayerSourceBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import AutocompleteInput from '../inputs/AutocompleteInput'

src/components/layers/LayerTypeBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 

src/components/layers/MaxZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 

src/components/layers/MinZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 

src/components/modals/ExportModal.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { saveAs } from 'file-saver'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import CheckboxInput from '../inputs/CheckboxInput'

src/components/modals/SettingsModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'

src/components/modals/SourcesModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import Modal from './Modal'
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'

src/components/sources/SourceTypeEditor.jsx

@@ -1,9 +1,105 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
+import SelectInput from '../inputs/SelectInput'
+
+class DemJSONSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  render() {
+    return <div>
+      <InputBlock label={"Raster DEM URL"} doc={styleSpec.latest.source_raster_dem.url.doc}>
+        <StringInput
+          value={this.props.source.url}
+          onChange={url => this.props.onChange({
+            ...this.props.source,
+            url: url
+          })}
+        />
+      </InputBlock>
+      <InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}>
+        <SelectInput
+          options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
+          onChange={encoding => this.props.onChange({
+            ...this.props.source,
+            encoding: encoding
+          })}
+          value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default}
+        />
+      </InputBlock>
+    </div>
+  }
+}
+
+class DemURLSourceEditor extends React.Component {
+  static propTypes = {
+    source: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  changeTileUrl(idx, value) {
+    const tiles = this.props.source.tiles.slice(0)
+    tiles[idx] = value
+    this.props.onChange({
+      ...this.props.source,
+      tiles: tiles
+    })
+  }
+
+  renderTileUrls() {
+    const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
+    const tiles = this.props.source.tiles || []
+    return tiles.map((tileUrl, tileIndex) => {
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
+        <StringInput
+          value={tileUrl}
+          onChange={this.changeTileUrl.bind(this, tileIndex)}
+        />
+      </InputBlock>
+    })
+  }
+
+  render() {
+    return <div>
+      {this.renderTileUrls()}
+      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
+        <NumberInput
+          value={this.props.source.minzoom || 0}
+          onChange={minzoom => this.props.onChange({
+            ...this.props.source,
+            minzoom: minzoom
+          })}
+        />
+      </InputBlock>
+      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
+        <NumberInput
+          value={this.props.source.maxzoom || 22}
+          onChange={maxzoom => this.props.onChange({
+            ...this.props.source,
+            maxzoom: maxzoom
+          })}
+        />
+      </InputBlock>
+      <InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}>
+        <SelectInput
+          options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
+          onChange={encoding => this.props.onChange({
+            ...this.props.source,
+            encoding: encoding
+          })}
+          value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default}
+        />
+      </InputBlock>
+  </div>
+
+  }
+}
 
 class TileJSONSourceEditor extends React.Component {
   static propTypes = {
@@ -115,8 +211,8 @@ class SourceTypeEditor extends React.Component {
       case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
-      case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
-      case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps} />
+      case 'tilejson_raster-dem': return <DemJSONSourceEditor {...commonProps} />
+      case 'tilexyz_raster-dem': return <DemURLSourceEditor {...commonProps} />
       default: return null
     }
   }