schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-27 08:45:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Try support background opacity

Browse source
This commit is contained in:
lukasmartinelli 2016-09-09 16:11:05 +02:00
parent 3cf8a6939d
commit 52e4c92ccf
1 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/layers.jsx
View file

@ -14,7 +14,12 @@ export class FillLayer extends React.Component {
}
onPaintChanged(property, e) {
this.props.onPaintChanged(property, e.target.value)
let value = e.target.value
if (property == "fill-opacity") {
value = parseFloat(value)
}
this.props.onPaintChanged(property, value)
}
render() {
@ -30,6 +35,29 @@ export class FillLayer extends React.Component {
}
}
export class BackgroundLayer extends React.Component {
static propTypes = {
layer: React.PropTypes.object.isRequired,
onPaintChanged: React.PropTypes.func.isRequired
}
onPaintChanged(property, e) {
let value = e.target.value
if (property == "background-opacity" && !isNaN(parseFloat(value))) {
value = parseFloat(value)
}
this.props.onPaintChanged(property, value)
}
render() {
const paint = this.props.layer.paint
return <div>
<Input name="background-color" label="Background color" onChange={this.onPaintChanged.bind(this, "background-color")} value={paint["background-color"]} />
<Input name="background-opacity" label="Background opacity" onChange={this.onPaintChanged.bind(this, "background-opacity")} value={paint["background-opacity"]} />
</div>
}
}
export class LineLayer extends React.Component {
render() {
return <div></div>
@ -99,6 +127,10 @@ export class LayerPanel extends React.Component {
return <FillLayer layer={this.state.layer} onPaintChanged={this.onPaintChanged.bind(this)} />
}
if (type === "background") {
return <BackgroundLayer layer={this.state.layer} onPaintChanged={this.onPaintChanged.bind(this)} />
}
if (type === "line") {
return <LineLayer />
}