Using widgets with React
Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
This sample shows how to use React with ViewModels
to create a custom widget experience. Specfically, it demonstrates how to use the ZoomViewModel to create a custom Zoom button.
1. Set up React as AMD modules
First, you need to add React
and ReactDOM
as AMD
modules in your dojoConfig.
window.dojoConfig = {
async: true,
packages: [{
name: "react",
location: "https://fb.me/",
main: "react-0.14.7.min"
},{
name: "react-dom",
location: "https://fb.me/",
main: "react-dom-0.14.7.min"
}]
};
Now you can start using them as normal AMD modules.
2. Create a simple map and view
Create a simple map and add it to either a MapView or a SceneView. If you are unfamiliar with views or how to create a basic map, see the following resources:
var map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-100.33, 25.69],
zoom: 10,
ui: {
components: ["attribution"] // empty the UI, except for attribution
}
});
3. Create a React component
Create a React component with an initial state and predefined properties. For more information on this, see the React documentation. Next, bind the actions of the React component to the methods of the ZoomViewModel. It is also possible to bind the React component's style with the View's properties to determine the current min/max zoom level.
var Zoom = React.createClass({
getInitialState: function() {
return {
vm: new ZoomViewModel(),
maxZoomed: false,
minZoomed: false
};
},
getDefaultProps: function() {
return {
view: {}
}
},
componentDidMount: function() {
this.props.view.when(this.onViewLoaded.bind(this));
},
onViewLoaded: function(view) {
this.state.vm.view = view;
watchUtils.init(view, 'zoom', this.onZoomChange.bind(this));
},
onZoomChange: function(value) {
this.setState({
maxZoomed: value === view.constraints.maxZoom,
minZoomed: value === view.constraints.minZoom
});
},
zoomIn: function() {
if (!this.state.maxZoomed) {
this.state.vm.zoomIn();
}
},
zoomOut: function() {
if (!this.state.minZoomed) {
this.state.vm.zoomOut();
}
},
render: function() {
var maxstate = this.state.maxZoomed ? 'button circle raised disable' : 'button circle raised';
var minstate = this.state.minZoomed ? 'button circle raised disable' : 'button circle raised';
return (
<div className="zoom-btns">
<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>
);
}
});
4. Render the React Component
Next, create a DOM element for the React component and add it to the UI layout. Once finished, render the React component.
var node = document.createElement("div");
view.ui.add(node, "bottom-left");
ReactDOM.render(<Zoom view={view}/>, node);