schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 20:23:27 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Support visibility toggle

Browse source
This commit is contained in:
lukasmartinelli 2016-09-09 19:14:55 +02:00
parent bbf75876f3
commit 2978210a4d
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/layers.jsx
View file

@ -2,7 +2,7 @@ import React from 'react'
import randomColor from 'randomcolor' import randomColor from 'randomcolor'
import { Block, ButtonCircle, Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass' import { Block, ButtonCircle, Heading, Checkbox, Slider, Switch, Input, Panel, PanelHeader, Toolbar, NavItem, Tooltip, Container, Space} from 'rebass'
import { Button, Text } from 'rebass' import { Button, Text } from 'rebass'
import {MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, MdVisibilityOff} from 'react-icons/lib/md'; import {MdVisibility, MdArrowDropDown, MdArrowDropUp, MdAddToPhotos, MdDelete, MdVisibilityOff} from 'react-icons/lib/md';
import Collapse from 'react-collapse' import Collapse from 'react-collapse'
import theme from './theme.js' import theme from './theme.js'
import scrollbars from './scrollbars.scss' import scrollbars from './scrollbars.scss'
@ -118,6 +118,16 @@ export class LayerPanel extends React.Component {
this.setState({ layer }); this.setState({ layer });
} }
onLayoutChanged(property, newValue) {
let layer = this.state.layer
layer.layout[property] = newValue;
this.props.styleManager.changeStyle({
command: 'setLayoutProperty',
args: [layer.id, property, newValue]
})
this.setState({ layer });
}
toggleLayer() { toggleLayer() {
this.setState({isOpened: !this.state.isOpened}) this.setState({isOpened: !this.state.isOpened})
} }
@ -141,7 +151,21 @@ export class LayerPanel extends React.Component {
return <NoLayer /> return <NoLayer />
} }
toggleVisibility() {
console.log(this.state.layer)
if(this.state.layer.layout.visibility === 'none') {
this.onLayoutChanged('visibility', 'visible')
} else {
this.onLayoutChanged('visibility', 'none')
}
}
render() { render() {
let visibleIcon = <MdVisibilityOff />
if(this.state.layer.layout && this.state.layer.layout.visibility === 'none') {
visibleIcon = <MdVisibility />
}
return <div style={{ return <div style={{
padding: theme.scale[0], padding: theme.scale[0],
borderBottom: 1, borderBottom: 1,
@ -157,8 +181,8 @@ export class LayerPanel extends React.Component {
#{this.state.layer.id} #{this.state.layer.id}
</NavItem> </NavItem>
<Space auto x={1} /> <Space auto x={1} />
<NavItem> <NavItem onClick={this.toggleVisibility.bind(this)}>
<MdVisibilityOff /> {visibleIcon}
</NavItem> </NavItem>
<NavItem> <NavItem>
<MdDelete /> <MdDelete />