Using widgets with React

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.dojoConfig = {
  async: true,
  packages: [
    {
      name: "react",
      location: "https://unpkg.com/react@16/umd/",
      main: "react.production.min"
    },
    {
      name: "react-dom",
      location: "https://unpkg.com/react-dom@16/umd/",
      main: "react-dom.production.min"
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
11
12
13
const map = new Map({
  basemap: "topo-vector"
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-100.33, 25.69],
  zoom: 10,
  ui: {
    components: ["attribution"] // empty the UI, except for attribution
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
class Zoom extends React.Component {
  state = {
    vm: new ZoomViewModel(),
    maxZoomed: false,
    minZoomed: false
  };

  componentDidMount() {
    this.props.view.when(this.onViewLoaded);
  }

  onViewLoaded = (view) => {
    this.state.vm.view = view;
    watchUtils.init(view, "zoom", this.onZoomChange);
  };

  onZoomChange = (value) => {
    this.setState({
      maxZoomed: value === view.constraints.maxZoom,
      minZoomed: value === view.constraints.minZoom
    });
  };

  zoomIn = () => {
    if (!this.state.maxZoomed) {
      this.state.vm.zoomIn();
    }
  };

  zoomOut = () => {
    if (!this.state.minZoomed) {
      this.state.vm.zoomOut();
    }
  };

  render() {
    const maxstate = this.state.maxZoomed ? "button circle raised disable" : "button circle raised";
    const 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>
    );
  }
}

1
2
3
const node = document.createElement("div");
view.ui.add(node, "bottom-left");
ReactDOM.render(<Zoom view={view} />, node);