Skip to content

Instantly share code, notes, and snippets.

@odoe
Created Dec 21, 2015
Embed
What would you like to do?
import React from 'react';
import watchUtils from 'esri/core/watchUtils';
import ZoomViewModel from 'esri/widgets/Zoom/ZoomViewModel';
const Zoom = React.createClass({
getInitialState() {
return {
vm: new ZoomViewModel(),
updating: false,
maxZoomed: false,
minZoomed: false
};
},
getDefaultProps() {
return {
view: {}
}
},
componentDidMount() {
this.props.view.then(view => {
this.state.vm.view = view;
watchUtils.init(view, 'zoom', (val) => {
this.setState({
maxZoomed: val === view.constraints.maxZoom,
minZoomed: val === view.constraints.minZoom
});
});
watchUtils.init(view, 'stationary', (updating) => {
this.setState({ updating });
});
});
},
zoomIn() {
if (!this.state.maxZoomed) {
this.state.vm.zoomIn();
}
},
zoomOut() {
if (!this.state.minZoomed) {
this.state.vm.zoomOut();
}
},
render() {
let btnstyle = this.state.updating ? 'zoom-btns' : 'zoom-btns view-busy';
let maxstate = this.state.maxZoomed ? 'button raised grey narrow disable' : 'button raised grey narrow';
let minstate = this.state.minZoomed ? 'button raised grey narrow disable' : 'button raised grey narrow';
return (
<div className={btnstyle}>
<div className={maxstate} onClick={this.zoomIn}>
<div className="center"><i className="material-icons">add</i></div>
</div>
<div className={minstate} onClick={this.zoomOut}>
<div className="center"><i className="material-icons">remove</i></div>
</div>
</div>
);
}
});
export default Zoom;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment