Merge pull request #263 from orangemug/feature/hillshading

Added hillshading support
This commit is contained in:
Orange Mug 2018-02-18 14:53:58 +00:00 committed by GitHub
commit 11b85bf565
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 50 additions and 25 deletions

26
package-lock.json generated
View file

@ -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"
}
}
}
},
@ -7558,9 +7548,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",
@ -7607,9 +7597,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"

View file

@ -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-inspect": "^1.2.6",
"mapbox-gl": "^0.44.1",
"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",

View file

@ -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} />

View file

@ -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)}

View file

@ -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}

View file

@ -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
}
})

View file

@ -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}

View file

@ -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}

View file

@ -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
}
}

View file

@ -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"
]
}
]
}
}