data-driven-opacity/index.html at master · skarplab/data-driven-opacity · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>ArcGIS JS API: Data-Driven Opacity</title>
  <script>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    };
  </script>

  <link rel='stylesheet prefetch' href='https://js.arcgis.com/4.6/esri/css/main.css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="viewDiv"></div>
  <div id="button-container">
    <button id="renderer-button">Use Population Density as a Visual Variable</button>
  </div>

  <script type="text/plain" id="pop-density">
    var population = $feature.POP;
    var acres = $feature.Shape__Area / 43560;
    var density = population / acres;
    return density;
  </script>
  <script src='https://js.arcgis.com/4.6/'></script>
  <script src="index.js"></script>
</body>

</html>