interactiveMaps/11-continousColor.html at master · faisalrbk/interactiveMaps · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Data-driven continuous color</title>

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

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

  <body>
    <arcgis-map center="-85.05, 33.13" zoom="5">
      <arcgis-popup slot="popup"></arcgis-popup>
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-legend slot="top-right"></arcgis-legend>
    </arcgis-map>
    <script type="module">
      const [Map, FeatureLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/FeatureLayer.js",
      ]);
      let renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
        label: "U.S. County", // legend label for the default symbol
        symbol: {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          outline: {
            // autocasts as new SimpleLineSymbol()
            // makes the outlines of all features consistently light gray
            color: [128, 128, 128, 0.2],
            width: "0.5px",
          },
        },
      };
      /*****************************************************************
       * Set a color visual variable on the renderer. Color visual variables
       * create continuous ramps that map low data values to weak or
       * neutral colors and high data values to strong/deep colors. Features
       * with data values in between the min and max data values are assigned
       * a color proportionally between the min and max colors.
       *****************************************************************/
      renderer.visualVariables = [
        {
          type: "color", // indicates this is a color visual variable
          field: "POP_POVERTY", // total population in poverty
          normalizationField: "TOTPOP_CY", // total population
          legendOptions: {
            title: "% population in poverty by county", // legend label for the visual variable
          },
          stops: [
            {
              value: 0.1, // features where < 10% of the pop in poverty
              color: "#FFFCD4", // will be assigned this color (beige)
              label: "<10%", // label to display in the legend
            },
            {
              value: 0.3, // features where > 30% of the pop in poverty
              color: "#350242", // will be assigned this color (purple)
              label: ">30%", // label to display in the legend
            },
            // features with values between 0.1 and 0.3 will be assigned
            // a color on a ramp between beige and purple proportional
            // to where the value falls between 0.1 and 0.3
          ],
        },
      ];
      const layer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0",
        renderer: renderer,
        title: "Poverty in the southeast U.S.",
        popupTemplate: {
          // autocasts as new PopupTemplate()
          title: "{COUNTY}, {STATE}",
          content: "{POP_POVERTY} of {TOTPOP_CY} people live below the poverty line.",
          fieldInfos: [
            {
              fieldName: "POP_POVERTY",
              format: {
                digitSeparator: true,
                places: 0,
              },
            },
            {
              fieldName: "TOTPOP_CY",
              format: {
                digitSeparator: true,
                places: 0,
              },
            },
          ],
        },
      });

      document.querySelector("arcgis-map").map = new Map({
        basemap: "gray-vector",
        layers: [layer],
      });
    </script>
  </body>
</html>