dev-team-training/index.html at main · CMAP-REPOS/dev-team-training · 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
<!doctype html>
<html>

<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>CMAP TAZs</title>

  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <!-- The esriConfig variable must be defined before adding the other esri libraries -->
  <script>
      var esriConfig = {
        apiKey: "AAPTamXIW4I8F4j-siKUj61akGA..2RrirNupFtKIXgIC8oGxegm6rTVUNxvDC70M40vJtSS-2M4_NMG6N3oNmu9n2-dQFJEwg3z-V-kCT55h6HmFE986bPCUysaPDUug8svPuXiSXObXL-mWrBG0HD7PrEoP21OIFv5zOI6sZCfp7oHze5xrWhSr6I9e9TDnPOhzaof67Tm0fTHW0J_1YTislSzWgUZQGZYcm1XK78lPiND0ogynBQciEoeXicOtftwnxLmdzSFOLuii4YrU_r4gzw..AT1_PmVRwKtG",
      };
  </script>

  <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
  <script type="module" src="https://js.arcgis.com/5.0/"></script>

</head>

<body>

  <arcgis-map basemap="arcgis/topographic" center="-87.6324, 41.8832" zoom="13">
    <arcgis-zoom slot="top-left"></arcgis-zoom>
  </arcgis-map>

  <script type="module">
    const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer.js");

    const viewElement = document.querySelector("arcgis-map");
    await viewElement.viewOnReady();

    // Traffic analysis zones (polygons)
    const zonesLayer = new FeatureLayer({
      url: "https://services5.arcgis.com/LcMXE3TFhi1BSaCY/arcgis/rest/services/Traffic_Analysis_Zone_Geography_2017/FeatureServer/0",
    });

    // Makes the layer 50% transparent
    zonesLayer.opacity = 0.5;

    viewElement.map.add(zonesLayer, 0);

  </script>

</body>

</html>