Smart Mapping

20 collapsed lines
1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Smart mapping - income by color</title>
7

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

11
    <style>
12
      html,
13
      body {
14
        height: 100%;
15
        margin: 0;
16
      }
17
    </style>
18
  </head>
19

20
  <body>
21
    <arcgis-map item-id="d81a583f288f48f3afe4947a71fa3065">
22
      <arcgis-zoom slot="top-left"></arcgis-zoom>
23
      <arcgis-expand slot="top-right">
24
        <arcgis-legend></arcgis-legend>
25
      </arcgis-expand>
26
    </arcgis-map>
2 collapsed lines
27
  </body>
28
</html>

83 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Smart mapping - income by color</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.2/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.2/"></script>
11

12
    <style>
13
      html,
14
      body {
15
        height: 100%;
16
        margin: 0;
17
      }
18

19
      #containerDiv {
20
        background-color: white;
21
        padding: 3px;
22
        text-align: center;
23
        min-width: 260px;
24
        width: 280px;
25
        height: 300px;
26
        overflow: auto;
27
      }
28
    </style>
29
  </head>
30

31
  <body>
32
    <arcgis-map center="-117.603514, 33.955457" scale="1155581">
33
      <arcgis-zoom slot="top-left"></arcgis-zoom>
34
      <arcgis-expand slot="top-right">
35
        <arcgis-legend></arcgis-legend>
36
      </arcgis-expand>
37
      <div id="containerDiv" class="esri-widget" slot="top-right">
38
        <div id="title"><h3>2019 Median Household Income</h3></div>
39
        <div id="description">
40
          This app allows you to explore median household incomes in the Los Angeles Area. The slider contains two lines
41
          that indicate values of interest: the federal poverty level and the low-income threshold for a family of four
42
          in Los Angeles.
43
        </div>
44
        <div id="slider"></div>
45
      </div>
46
    </arcgis-map>
47

48
    <script type="module">
49
      const [Map, FeatureLayer, colorRendererCreator, colorSymbology, histogram, ColorSlider, Color, intl] =
50
        await $arcgis.import([
51
          "@arcgis/core/Map.js",
52
          "@arcgis/core/layers/FeatureLayer.js",
53
          "@arcgis/core/smartMapping/renderers/color.js",
54
          "@arcgis/core/smartMapping/symbology/color.js",
55
          "@arcgis/core/smartMapping/statistics/histogram.js",
56
          "@arcgis/core/widgets/smartMapping/ColorSlider.js",
57
          "@arcgis/core/Color.js",
58
          "@arcgis/core/intl.js",
59
        ]);
60

61
      const viewElement = document.querySelector("arcgis-map");
62

63
      // Create a map and add it to the map component
64

65
      const layer = new FeatureLayer({
66
        portalItem: {
67
          id: "340a8efc331f4cd59fecbc4ab8e2a311",
68
        },
69
        definitionExpression: "MEDHINC_CY > 0",
70
        visible: false,
71
      });
72

73
      const map = new Map({
74
        basemap: {
75
          portalItem: {
76
            id: "3582b744bba84668b52a16b0b6942544",
77
          },
78
        },
79
        layers: [layer],
80
      });
81

82
      viewElement.map = map;
83

84
      // configure parameters for the color renderer generator
85
      // the layer must be specified along with a field name
86
      // or arcade expression. The basemap and other properties determine
87
      // the appropriate default color scheme.
88

89
      const redAndGreenScheme = colorSymbology.getSchemeByName({
90
        basemap: map.basemap,
91
        geometryType: "polygon",
92
        theme: "above-and-below",
93
        name: "Red and Green 4",
94
      });
95

96
      // flip the red and green scheme so green is on top
97
      const moneyScheme = colorSymbology.flipColors(redAndGreenScheme);
98

99
      const colorParams = {
100
        layer: layer,
101
        field: "MEDHINC_CY",
102
        theme: "above-and-below",
103
        colorScheme: moneyScheme,
104
      };
105

106
      // create reference to histogram bar elements for updating
107
      // their style as the user drags slider thumbs
108
      const bars = [];
109
      let rendererResult = null;
110
      let vv = null;
111

112
      colorRendererCreator
113
        .createContinuousRenderer(colorParams)
114
        .then(function (response) {
115
          // set the renderer to the layer and add it to the map
116
          rendererResult = response;
117
          vv = rendererResult.visualVariable;
118
          layer.renderer = response.renderer;
119
          layer.visible = true;
120

121
          return histogram({
122
            layer: colorParams.layer,
123
            field: colorParams.field,
124
            numBins: 60,
125
          });
126
        })
127
        .then(function (histogramResult) {
128
          const slider = ColorSlider.fromRendererResult(rendererResult, histogramResult);
129

130
          // format slider labels as currency
131

132
          slider.set({
133
            container: "slider",
134
            primaryHandleEnabled: true,
135
            labelFormatFunction: function (value, type) {
136
              return intl.formatNumber(value, {
137
                style: "currency",
138
                currency: "USD",
139
                currencyDisplay: "symbol",
140
                maximumFractionDigits: 0,
141
                minimumFractionDigits: 0,
142
              });
143
            },
144
          });
145

146
          // hide default statistic lines from slider histogram
147

148
          slider.histogramConfig.average = null;
149
          slider.histogramConfig.standardDeviation = null;
150

151
          // update the slider bars to match renderer values
152
          slider.histogramConfig.barCreatedFunction = function (index, element) {
153
            const bin = histogramResult.bins[index];
154
            const midValue = (bin.maxValue - bin.minValue) / 2 + bin.minValue;
155
            const color = getColorFromValue(vv.stops, midValue);
156
            element.setAttribute("fill", color.toHex());
157
            bars.push(element);
158
          };
159

160
          // render meaningful data lines on the slider for
161
          // communicating policy issues
162
          slider.histogramConfig.dataLines = [
163
            {
164
              value: 83500,
165
              label: "HUD low income",
166
            },
167
            {
168
              value: 25750,
169
              label: "Fed poverty line",
170
            },
171
          ];
172

173
          // slider values will only go to 2 decimal places (money)
174
          slider.viewModel.precision = 2;
175

176
          // Update the renderer for each change made to the slider
177

178
          slider.on(["thumb-change", "thumb-drag", "min-change", "max-change"], function () {
179
            const renderer = layer.renderer.clone();
180
            const colorVariable = renderer.visualVariables[0].clone();
181
            colorVariable.stops = slider.stops;
182
            renderer.visualVariables = [colorVariable];
183
            layer.renderer = renderer;
184

185
            // update the color of each histogram bar based on the
186
            // values of the slider thumbs
187
            bars.forEach(function (bar, index) {
188
              const bin = slider.histogramConfig.bins[index];
189
              const midValue = (bin.maxValue - bin.minValue) / 2 + bin.minValue;
190
              const color = getColorFromValue(slider.stops, midValue);
191
              bar.setAttribute("fill", color.toHex());
192
            });
193
          });
194
        })
195
        .catch(function (error) {
196
          console.log("there was an error: ", error);
197
        });
42 collapsed lines
198

199
      // infers the color for a given value
200
      // based on the stops from a ColorVariable
201
      function getColorFromValue(stops, value) {
202
        let minStop = stops[0];
203
        let maxStop = stops[stops.length - 1];
204

205
        const minStopValue = minStop.value;
206
        const maxStopValue = maxStop.value;
207

208
        if (value < minStopValue) {
209
          return minStop.color;
210
        }
211

212
        if (value > maxStopValue) {
213
          return maxStop.color;
214
        }
215

216
        const exactMatches = stops.filter(function (stop) {
217
          return stop.value === value;
218
        });
219

220
        if (exactMatches.length > 0) {
221
          return exactMatches[0].color;
222
        }
223

224
        minStop = null;
225
        maxStop = null;
226
        stops.forEach(function (stop, i) {
227
          if (!minStop && !maxStop && stop.value >= value) {
228
            minStop = stops[i - 1];
229
            maxStop = stop;
230
          }
231
        });
232

233
        const weightedPosition = (value - minStop.value) / (maxStop.value - minStop.value);
234

235
        return Color.blendColors(minStop.color, maxStop.color, weightedPosition);
236
      }
237
    </script>
238
  </body>
239
</html>