From 8acbd784a0c7eb942565ca3ebb877d6fc896b9d4 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 16 Feb 2018 19:52:19 +0000 Subject: [PATCH 1/4] Added hillshading support. --- package-lock.json | 22 ++++++--------------- package.json | 4 ++-- src/components/icons/LayerIcon.jsx | 1 + src/components/layers/LayerTypeBlock.jsx | 1 + src/components/modals/AddModal.jsx | 2 +- src/components/modals/SourcesModal.jsx | 16 +++++++++++++++ src/components/sources/SourceTypeEditor.jsx | 2 ++ src/config/layout.json | 16 +++++++++++++++ 8 files changed, 45 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 12e87fb..04b97b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -175,9 +175,9 @@ "integrity": "sha1-HOsxA81mixZWO1SSwGkMPwkcdJE=" }, "@mapbox/mapbox-gl-style-spec": { - "version": "10.1.0", - "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-10.1.0.tgz", - "integrity": "sha512-1thxPjeTEWacy0U2dRNgkPDMT+q42Zei3aaWDa2BRu6ehqLguB01+eyPRWQTh0cpVtZbzPy9MEne28mILLPpvQ==", + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-11.1.1.tgz", + "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" - } } } }, @@ -7831,9 +7821,9 @@ "dev": true }, "mapbox-gl": { - "version": "0.44.0", - "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.44.0.tgz", - "integrity": "sha512-vMeZaLXjG1B1BKOD9HB11sb9UIUvbzXWJu0NR38j9Uyp1h5xUXqh1Rqe+EhxQp3jzlHIv/LVhFKCJjQQKA2LoA==", + "version": "0.44.1", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-0.44.1.tgz", + "integrity": "sha512-K6GfXfvumPgiw3NSFGTPYU7VinhWLKFbRmNTx/mPWzxzazfKZsChuyZ9IEhZ6LuFEnV1qzquyg5kLUCledVzvg==", "requires": { "@mapbox/gl-matrix": "0.0.1", "@mapbox/mapbox-gl-supported": "1.3.0", diff --git a/package.json b/package.json index 2c2b74f..5e1e3a1 100644 --- a/package.json +++ b/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,7 +33,7 @@ "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", "maputnik-design": "github:maputnik/design", "mousetrap": "^1.6.1", diff --git a/src/components/icons/LayerIcon.jsx b/src/components/icons/LayerIcon.jsx index 790ca3a..a69c616 100644 --- a/src/components/icons/LayerIcon.jsx +++ b/src/components/icons/LayerIcon.jsx @@ -18,6 +18,7 @@ class LayerIcon extends React.Component { switch(this.props.type) { case 'fill-extrusion': return case 'raster': return + case 'hillshade': return case 'fill': return case 'background': return case 'line': return diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx index ee1722d..663b4fe 100644 --- a/src/components/layers/LayerTypeBlock.jsx +++ b/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} diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx index 910b085..be7b02b 100644 --- a/src/components/modals/AddModal.jsx +++ b/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' && this.setState({mode: mode, source: this.defaultSource(mode)})} value={this.state.mode} diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index 3325938..e415fea 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/src/components/sources/SourceTypeEditor.jsx @@ -115,6 +115,8 @@ class SourceTypeEditor extends React.Component { case 'tilexyz_vector': return case 'tilejson_raster': return case 'tilexyz_raster': return + case 'tilejson_raster-dem': return + case 'tilexyz_raster-dem': return default: return null } } diff --git a/src/config/layout.json b/src/config/layout.json index 4297146..3e041ff 100644 --- a/src/config/layout.json +++ b/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" + ] + } + ] } } From 180b17d3153f0a5ddaa513d27c3dae320d501304 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 16 Feb 2018 20:34:50 +0000 Subject: [PATCH 2/4] Fixed typo raster -> raster-dem --- src/components/modals/SourcesModal.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index 0a2e1c2..c1868e7 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/src/components/modals/SourcesModal.jsx @@ -132,11 +132,11 @@ class AddSource extends React.Component { maxzoom: source.maxzoom || 14 } case 'tilejson_raster-dem': return { - type: 'raster', + type: 'raster-dem', url: source.url || 'http://localhost:3000/tilejson.json' } case 'tilexyz_raster-dem': return { - type: 'raster', + type: 'raster-dem', tiles: source.tiles || ['http://localhost:3000/{x}/{y}/{z}.pbf'], minzoom: source.minzoom || 0, maxzoom: source.maxzoom || 14 From 38e07864631fd88f3b77ec7e34fc77589652814b Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 17 Feb 2018 07:45:24 +0000 Subject: [PATCH 3/4] Added missing hillshade / raster-dem guards. --- src/components/layers/LayerEditor.jsx | 3 ++- src/components/map/MapboxGlMap.jsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 47ebe20..00d23d5 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/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' && this.changeProperty(null, 'source-layer', v)} diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 727744e..5dc4e0d 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/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 } }) From a092bc26897d9d28a2e8926c3d7aedbcea5d5dd2 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sun, 18 Feb 2018 11:22:01 +0000 Subject: [PATCH 4/4] Moved to using orangemug/mapbox-gl-inspect#fix/only-vector-sources While is waiting to be merged/released. --- package-lock.json | 4 +--- package.json | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 04b97b1..634f4b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7870,9 +7870,7 @@ } }, "mapbox-gl-inspect": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/mapbox-gl-inspect/-/mapbox-gl-inspect-1.2.6.tgz", - "integrity": "sha512-4qOIuLa+I81Nj67NEtcxn+AdigysIMkY57j1cb1C0k1/yHTvq5viCZozjfTRavhLRBj1NDmoWJTi0A1mGpz2JQ==", + "version": "github:orangemug/mapbox-gl-inspect#5af5114eea285b2259799c001b33076f86f8fe95", "requires": { "lodash.isequal": "4.5.0", "randomcolor": "0.4.4" diff --git a/package.json b/package.json index 5e1e3a1..8975b84 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "lodash.isequal": "^4.5.0", "lodash.throttle": "^4.1.1", "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": "^1.0.1",