nrpc-interactive-map/script.js at master · RTGS-Lab/nrpc-interactive-map · GitHub

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
55
56
57
58
59
60
require([
  "esri/WebMap",
  "esri/views/MapView",
  "esri/widgets/Home",
  "esri/widgets/LayerList",
  "esri/widgets/Legend",
], (WebMap, MapView, Home, LayerList, Legend) => {

  const webmap = new WebMap({
    portalItem: {
      id: "d664f1d163544d25bb92921e5c4bf214"
    }
  });

  const view = new MapView({
    container: "viewDiv",
    map: webmap,
    constraints: {
      rotationEnabled: false
    }
  });

  view.when(() => {
    // Legend
    const legendContainer = document.createElement("div");
    legendContainer.id = "legend-container";
    document.body.appendChild(legendContainer);

    const legend = new Legend({
      view: view,
      container: legendContainer
    });

    view.ui.add(legendContainer, {
      position: "top-left",
      index: 1
    });

    // Layer List (provides layer toggling)
    const layerList = new LayerList({
      view: view
    });

    view.ui.add(layerList, {
      position: "bottom-left"
    });
  });

  // Home button
  const home = new Home({
    view: view
  });

  const homeContainer = document.createElement("div");
  homeContainer.className = "home-container";
  document.body.appendChild(homeContainer);

  home.container = homeContainer;
  view.ui.add(homeContainer, "manual");
});