mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-11-10 03:21:56 +01:00
Example how to display fields from spec
This commit is contained in:
parent
890169751b
commit
61d24fdb2b
4 changed files with 59 additions and 4 deletions
18
src/fields/enum.jsx
Normal file
18
src/fields/enum.jsx
Normal file
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
import { Select, Input } from 'rebass'
|
||||
|
||||
export default class EnumField extends React.Component {
|
||||
static propTypes = {
|
||||
name: React.PropTypes.string.isRequired,
|
||||
values: React.PropTypes.array.isRequired,
|
||||
value: React.PropTypes.string.isRequired,
|
||||
doc: React.PropTypes.string,
|
||||
}
|
||||
|
||||
render() {
|
||||
const options = this.props.values.map(val => {
|
||||
return {children: val, value: val}
|
||||
})
|
||||
return <Select name={this.props.name} options={options} label={this.props.name} />
|
||||
}
|
||||
}
|
|
@ -91,11 +91,15 @@ export class LayerEditor extends React.Component {
|
|||
}
|
||||
|
||||
if (type === "line") {
|
||||
return <LineLayer />
|
||||
return <LineLayer
|
||||
layer={this.props.layer}
|
||||
/>
|
||||
}
|
||||
|
||||
if (type === "symbol") {
|
||||
return <SymbolLayer />
|
||||
return <SymbolLayer
|
||||
layer={this.props.layer}
|
||||
/>
|
||||
}
|
||||
|
||||
return <UnsupportedLayer />
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import React from 'react'
|
||||
import Immutable from 'immutable'
|
||||
import { Checkbox, Input } from 'rebass'
|
||||
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
||||
|
||||
export default class FillLayer extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.object.isRequired,
|
||||
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
||||
onPaintChanged: React.PropTypes.func.isRequired
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,39 @@
|
|||
import React from 'react'
|
||||
import Immutable from 'immutable'
|
||||
import spec from 'mapbox-gl-style-spec/reference/latest.min.js'
|
||||
import EnumField from '../fields/enum.jsx'
|
||||
|
||||
export default class LineLayer extends React.Component {
|
||||
static propTypes = {
|
||||
layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div></div>
|
||||
const enumFieldFromType = (key, field) => {
|
||||
if(field.type === 'enum') {
|
||||
return <EnumField
|
||||
key={key}
|
||||
name={key}
|
||||
values={field.values}
|
||||
value={this.props.layer.getIn(['layout', key], field.default)}
|
||||
doc={field.doc}/>
|
||||
}
|
||||
}
|
||||
|
||||
const layoutLineFields = () => {
|
||||
const type = spec["layout_line"]
|
||||
return Object.keys(type).map(key => {
|
||||
return enumFieldFromType(key, type[key])
|
||||
})
|
||||
}
|
||||
|
||||
const paintLineFields = () => {
|
||||
const type = spec["paint_line"]
|
||||
return Object.keys(type).map(key => {
|
||||
return enumFieldFromType(key, type[key])
|
||||
})
|
||||
}
|
||||
|
||||
return <div>{layoutLineFields()}{paintLineFields()}</div>
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue