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

package-lock.json

@@ -297,31 +297,16 @@
       "integrity": "sha512-x5xSHNAD5MeuasbEpGyDBGy4zPQysDdvDUlnjDKMxic8KqmcxcCP3ojlIaqEWYFvMmq7FKyWIF7K8jO4bHavKQ=="
     },
     "@mapbox/mapbox-gl-style-spec": {
-      "version": "11.1.1",
+      "version": "12.0.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-11.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-12.0.0.tgz",
-      "integrity": "sha512-4l/q05NO26u2HmkjIKpFsMs2Ed56wd+w9nC8pXAVVsBZBG+LHwynJZyg6Ijy/6gLyp+nnmLFtzkXFfneuFCIjw==",
+      "integrity": "sha1-dRW/rbs6hZ66HFbZn8E4P6YpJ0c=",
       "requires": {
+        "@mapbox/jsonlint-lines-primitives": "2.0.1",
         "@mapbox/unitbezier": "0.0.0",
-        "brfs": "1.6.1",
-        "bubleify": "0.7.0",
         "csscolorparser": "1.0.3",
-        "in-publish": "2.0.0",
-        "jsonlint-lines-primitives": "1.6.0",
         "minimist": "0.0.8",
         "rw": "1.3.3",
-        "sort-object": "0.3.2",
+        "sort-object": "0.3.2"
-        "unflowify": "1.0.1"
-      },
-      "dependencies": {
-        "jsonlint-lines-primitives": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/jsonlint-lines-primitives/-/jsonlint-lines-primitives-1.6.0.tgz",
-          "integrity": "sha1-u4n2DIubYS/ZE92qI2ZJuEDYZhE=",
-          "requires": {
-            "JSV": "4.0.2",
-            "nomnom": "1.8.1"
-          }
-        }
       }
     },
     "@mapbox/mapbox-gl-supported": {
@@ -418,6 +403,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-3.0.1.tgz",
       "integrity": "sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=",
+      "dev": true,
       "requires": {
         "acorn": "3.3.0"
       },
@@ -425,22 +411,8 @@
         "acorn": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
+          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo=",
-        }
+          "dev": true
-      }
-    },
-    "acorn-object-spread": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz",
-      "integrity": "sha1-SOrQ9KjrFplaF6Dbn/xqyq2kumg=",
-      "requires": {
-        "acorn": "3.3.0"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
         }
       }
     },
@@ -524,12 +496,14 @@
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
     },
     "ansi-styles": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true
     },
     "ansicolors": {
       "version": "0.2.1",
@@ -2128,7 +2102,8 @@
     "babylon": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
+      "dev": true
     },
     "backo2": {
       "version": "1.0.2",
@@ -2467,49 +2442,6 @@
         "electron-to-chromium": "1.3.36"
       }
     },
-    "buble": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/buble/-/buble-0.15.2.tgz",
-      "integrity": "sha1-VH/EdIP45egXbYKqXrzLGDsC1hM=",
-      "requires": {
-        "acorn": "3.3.0",
-        "acorn-jsx": "3.0.1",
-        "acorn-object-spread": "1.0.0",
-        "chalk": "1.1.3",
-        "magic-string": "0.14.0",
-        "minimist": "1.2.0",
-        "os-homedir": "1.0.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-3.3.0.tgz",
-          "integrity": "sha1-ReN/s56No/JbruP/U2niu18iAXo="
-        },
-        "magic-string": {
-          "version": "0.14.0",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.14.0.tgz",
-          "integrity": "sha1-VyJK7xcByu7Sc7F6OalW5ysXJGI=",
-          "requires": {
-            "vlq": "0.2.3"
-          }
-        },
-        "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
-        }
-      }
-    },
-    "bubleify": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/bubleify/-/bubleify-0.7.0.tgz",
-      "integrity": "sha1-0I6mQv/Qhf+HEciEP1cHLw1euPY=",
-      "requires": {
-        "buble": "0.15.2",
-        "object-assign": "4.1.1"
-      }
-    },
     "buffer": {
       "version": "4.9.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -2751,6 +2683,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
       "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
       "requires": {
         "ansi-styles": "2.2.1",
         "escape-string-regexp": "1.0.5",
@@ -4491,7 +4424,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "escodegen": {
       "version": "1.9.1",
@@ -5579,15 +5513,6 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
-    "flow-remove-types": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/flow-remove-types/-/flow-remove-types-1.2.3.tgz",
-      "integrity": "sha512-ypq/U3V+t9atYiOuSJd40tekCra03EHKoRsiK/wXGrsZimuum0kdwVY7Yv0HTaoXgHW1WiayomYd+Q3kkvPl9Q==",
-      "requires": {
-        "babylon": "6.18.0",
-        "vlq": "0.2.3"
-      }
-    },
     "flush-write-stream": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.2.tgz",
@@ -6857,6 +6782,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -7395,7 +7321,8 @@
     "in-publish": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
-      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
+      "dev": true
     },
     "indent-string": {
       "version": "2.1.0",
@@ -10129,7 +10056,8 @@
     "os-homedir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
     },
     "os-locale": {
       "version": "1.4.0",
@@ -13625,6 +13553,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
       "requires": {
         "ansi-regex": "2.1.1"
       }
@@ -14202,7 +14131,8 @@
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+      "dev": true
     },
     "svg-tags": {
       "version": "1.0.0",
@@ -14726,15 +14656,6 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
       "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
     },
-    "unflowify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unflowify/-/unflowify-1.0.1.tgz",
-      "integrity": "sha1-ouoNJcCv/MRpVeZHNXX3xaH0ppY=",
-      "requires": {
-        "flow-remove-types": "1.2.3",
-        "through": "2.3.8"
-      }
-    },
     "unherit": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.0.tgz",

package.json

@@ -22,7 +22,7 @@
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.1.2",
-    "@mapbox/mapbox-gl-style-spec": "^11.1.1",
+    "@mapbox/mapbox-gl-style-spec": "^12.0.0",
     "classnames": "^2.2.5",
     "codemirror": "^5.37.0",
     "color": "^3.0.0",

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 'tilejson_raster-dem': return <DemJSONSourceEditor {...commonProps} />
-      case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps} />
+      case 'tilexyz_raster-dem': return <DemURLSourceEditor {...commonProps} />
       default: return null
     }
   }

src/libs/diffmessage.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 
 export function diffMessages(beforeStyle, afterStyle) {
   const changes = styleSpec.diff(beforeStyle, afterStyle)

src/libs/filterops.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 export const combiningFilterOps = ['all', 'any', 'none']
 export const setFilterOps = ['in', '!in']
 export const otherFilterOps = Object

src/libs/layer.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
+import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }