Merge pull request #263 from orangemug/feature/hillshading

Added hillshading support

package-lock.json

@@ -175,9 +175,9 @@
       "integrity": "sha1-HOsxA81mixZWO1SSwGkMPwkcdJE="
     },
     "@mapbox/mapbox-gl-style-spec": {
-      "version": "10.1.0",
+      "version": "11.1.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-10.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-11.1.1.tgz",
-      "integrity": "sha512-1thxPjeTEWacy0U2dRNgkPDMT+q42Zei3aaWDa2BRu6ehqLguB01+eyPRWQTh0cpVtZbzPy9MEne28mILLPpvQ==",
+      "integrity": "sha512-4l/q05NO26u2HmkjIKpFsMs2Ed56wd+w9nC8pXAVVsBZBG+LHwynJZyg6Ijy/6gLyp+nnmLFtzkXFfneuFCIjw==",
       "requires": {
         "@mapbox/unitbezier": "0.0.0",
         "brfs": "1.4.3",
@@ -185,7 +185,6 @@
         "csscolorparser": "1.0.3",
         "in-publish": "2.0.0",
         "jsonlint-lines-primitives": "1.6.0",
-        "lodash.isequal": "3.0.4",
         "minimist": "0.0.8",
         "rw": "1.3.3",
         "sort-object": "0.3.2",
@@ -200,15 +199,6 @@
             "JSV": "4.0.2",
             "nomnom": "1.8.1"
           }
-        },
-        "lodash.isequal": {
-          "version": "3.0.4",
-          "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-3.0.4.tgz",
-          "integrity": "sha1-HDXrO27wzR/1F0Pj6jz3/f/ay2Q=",
-          "requires": {
-            "lodash._baseisequal": "3.0.7",
-            "lodash._bindcallback": "3.0.1"
-          }
         }
       }
     },
@@ -7558,9 +7548,9 @@
       "dev": true
     },
     "mapbox-gl": {
-      "version": "0.44.0",
+      "version": "0.44.1",
-      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.44.0.tgz",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.44.1.tgz",
-      "integrity": "sha512-vMeZaLXjG1B1BKOD9HB11sb9UIUvbzXWJu0NR38j9Uyp1h5xUXqh1Rqe+EhxQp3jzlHIv/LVhFKCJjQQKA2LoA==",
+      "integrity": "sha512-K6GfXfvumPgiw3NSFGTPYU7VinhWLKFbRmNTx/mPWzxzazfKZsChuyZ9IEhZ6LuFEnV1qzquyg5kLUCledVzvg==",
       "requires": {
         "@mapbox/gl-matrix": "0.0.1",
         "@mapbox/mapbox-gl-supported": "1.3.0",
@@ -7607,9 +7597,7 @@
       }
     },
     "mapbox-gl-inspect": {
-      "version": "1.2.6",
+      "version": "github:orangemug/mapbox-gl-inspect#5af5114eea285b2259799c001b33076f86f8fe95",
-      "resolved": "https://registry.npmjs.org/mapbox-gl-inspect/-/mapbox-gl-inspect-1.2.6.tgz",
-      "integrity": "sha512-4qOIuLa+I81Nj67NEtcxn+AdigysIMkY57j1cb1C0k1/yHTvq5viCZozjfTRavhLRBj1NDmoWJTi0A1mGpz2JQ==",
       "requires": {
         "lodash.isequal": "4.5.0",
         "randomcolor": "0.4.4"

package.json

@@ -22,7 +22,7 @@
   "homepage": "https://github.com/maputnik/editor#readme",
   "dependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.1.1",
-    "@mapbox/mapbox-gl-style-spec": "^10.0.1",
+    "@mapbox/mapbox-gl-style-spec": "^11.1.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.32.0",
     "color": "^2.0.0",
@@ -33,8 +33,8 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.44.0",
+    "mapbox-gl": "^0.44.1",
-    "mapbox-gl-inspect": "^1.2.6",
+    "mapbox-gl-inspect": "github:orangemug/mapbox-gl-inspect#fix/only-vector-sources",
     "maputnik-design": "github:maputnik/design",
     "mousetrap": "^1.6.1",
     "ol-mapbox-style": "^2.10.1",

src/components/icons/LayerIcon.jsx

@@ -18,6 +18,7 @@ class LayerIcon extends React.Component {
     switch(this.props.type) {
       case 'fill-extrusion': return <BackgroundIcon {...iconProps} />
       case 'raster': return <FillIcon {...iconProps} />
+      case 'hillshade': return <FillIcon {...iconProps} />
       case 'fill': return <FillIcon {...iconProps} />
       case 'background': return <BackgroundIcon {...iconProps} />
       case 'line': return <LineIcon {...iconProps} />

src/components/layers/LayerEditor.jsx

@@ -138,7 +138,8 @@ export default class LayerEditor extends React.Component {
           onChange={v => this.changeProperty(null, 'source', v)}
         />
         }
-        {this.props.layer.type !== 'raster' && this.props.layer.type !== 'background' && <LayerSourceLayerBlock
+        {this.props.layer.type !== 'raster' && this.props.layer.type !== 'background' && this.props.layer.type !== 'hillshade' &&
+        <LayerSourceLayerBlock
           sourceLayerIds={sourceLayerIds}
           value={this.props.layer['source-layer']}
           onChange={v => this.changeProperty(null, 'source-layer', v)}

src/components/layers/LayerTypeBlock.jsx

@@ -22,6 +22,7 @@ class LayerTypeBlock extends React.Component {
           ['raster', 'Raster'],
           ['circle', 'Circle'],
           ['fill-extrusion', 'Fill Extrusion'],
+          ['hillshade', 'Hillshade'],
         ]}
         onChange={this.props.onChange}
         value={this.props.value}

src/components/map/MapboxGlMap.jsx

@@ -38,7 +38,7 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
   const sources = {}
   Object.keys(originalMapStyle.sources).forEach(sourceId => {
     const source = originalMapStyle.sources[sourceId]
-    if(source.type !== 'raster') {
+    if(source.type !== 'raster' && source.type !== 'raster-dem') {
       sources[sourceId] = source
     }
   })

src/components/modals/AddModal.jsx

@@ -136,7 +136,7 @@ class AddModal extends React.Component {
         onChange={v => this.setState({ source: v })}
       />
       }
-      {this.state.type !== 'background' && this.state.type !== 'raster' &&
+      {this.state.type !== 'background' && this.state.type !== 'raster' && this.state.type !== 'hillshade' &&
       <LayerSourceLayerBlock
         isFixed={true}
         sourceLayerIds={layers}

src/components/modals/SourcesModal.jsx

@@ -45,6 +45,10 @@ function editorMode(source) {
     if(source.tiles) return 'tilexyz_raster'
     return 'tilejson_raster'
   }
+  if(source.type === 'raster-dem') {
+    if(source.tiles) return 'tilexyz_raster-dem'
+    return 'tilejson_raster-dem'
+  }
   if(source.type === 'vector') {
     if(source.tiles) return 'tilexyz_vector'
     return 'tilejson_vector'
@@ -127,6 +131,16 @@ class AddSource extends React.Component {
         minzoom: source.minzoom || 0,
         maxzoom: source.maxzoom || 14
       }
+      case 'tilejson_raster-dem': return {
+        type: 'raster-dem',
+        url: source.url || 'http://localhost:3000/tilejson.json'
+      }
+      case 'tilexyz_raster-dem': return {
+        type: 'raster-dem',
+        tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'],
+        minzoom: source.minzoom || 0,
+        maxzoom: source.maxzoom || 14
+      }
       default: return {}
     }
   }
@@ -147,6 +161,8 @@ class AddSource extends React.Component {
             ['tilexyz_vector', 'Vector (XYZ URLs)'],
             ['tilejson_raster', 'Raster (TileJSON URL)'],
             ['tilexyz_raster', 'Raster (XYZ URL)'],
+            ['tilejson_raster-dem', 'Raster DEM (TileJSON URL)'],
+            ['tilexyz_raster-dem', 'Raster DEM (XYZ URLs)'],
           ]}
           onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
           value={this.state.mode}

src/components/sources/SourceTypeEditor.jsx

@@ -115,6 +115,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} />
       default: return null
     }
   }

src/config/layout.json

@@ -194,5 +194,21 @@
           ]
         }
       ]
+    },
+    "hillshade": {
+      "groups": [
+        {
+          "title": "Paint properties",
+          "type": "properties",
+          "fields": [
+            "hillshade-illumination-direction",
+            "hillshade-illumination-anchor",
+            "hillshade-exaggeration",
+            "hillshade-shadow-color",
+            "hillshade-highlight-color",
+            "hillshade-accent-color"
+          ]
+        }
+      ]
     }
 }