Thinning | ArcGIS Maps SDK for JavaScript

Roads and highways in Singapore. Zoom in and out to view how features are thinned based on highway classification. Only larger, more traveled highways display at small scales. This reduces the initial download size and declutters the visualization.

What is thinning?

Thinning is a method of decluttering the view by removing features that overlap one another. This is helpful when many features overlap and you want to display uncluttered data, but don’t necessarily need to communicate its density.

How thinning works

There are a couple of approaches to thinning:

Feature reduction by selection only applies to point layers in 3D scenes and is configured on the featureReduction property of the layer. When set, overlapping features are randomly removed from the view and displayed at scales and camera angles where they no longer overlap nearby features.
Display filters control which features are displayed in the view based on the view scale. This is useful for reducing the download size of large layers and improving the visualization, particularly for mobile devices.

Examples

Feature reduction by selection (3D)

The following example demonstrates how to declutter the view by randomly removing overlapping features. This is controlled using the FeatureReductionSelection option on point layers in 3D scenes. Simply set the featureReduction type on the layer to selection and features will be thinned automatically.

Points of interest in Lyon, France. Thinning helps declutter the view to make it easier for users to navigate a scene. Uncheck the box in the top right corner to compare the cluttered view with the decluttered view. Zoom in and out to see how feature reduction selection affects the visualization.

ArcGIS JS API


171 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <title>Point styles for cities</title>
5
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
6
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
7
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
8

9
    <style>
10
      html,
11
      body,
12
      #viewDiv {
13
        height: 100%;
14
        margin: 0;
15
      }
16

17
      #cityStyle {
18
        background-color: white;
19
        text-align: center;
20
        padding: 10px;
21
        font-size: 0.9em;
22
      }
23

24
      #cityStyle label {
25
        padding-right: 10px;
26
        cursor: pointer;
27
      }
28
    </style>
29

30
    <script type="module">
31
      const [WebScene, FeatureLayer, SceneView, Legend] = await $arcgis.import([
32
        "@arcgis/core/WebScene.js",
33
        "@arcgis/core/layers/FeatureLayer.js",
34
        "@arcgis/core/views/SceneView.js",
35
        "@arcgis/core/widgets/Legend.js",
36
      ]);
37

38
      // Load the webscene with buildings
39

40
      const webscene = new WebScene({
41
        portalItem: {
42
          // autocasts as new PortalItem()
43
          id: "711ddecedece4fd88b728bfe4322c22b",
44
        },
45
      });
46

47
      const view = new SceneView({
48
        container: "viewDiv",
49
        map: webscene,
50
        environment: {
51
          lighting: {
52
            directShadowsEnabled: true,
53
          },
54
        },
55
      });
56

57
      // verticalOffset shifts the symbol vertically
58
      const verticalOffset = {
59
        screenLength: 40,
60
        maxWorldLength: 200,
61
        minWorldLength: 35,
62
      };
63

64
      // Function that automatically creates the symbol for the points of interest
65
      function getUniqueValueSymbol(name, color) {
66
        return {
67
          type: "point-3d",
68
          symbolLayers: [
69
            {
70
              type: "icon",
71
              resource: {
72
                href: name,
73
              },
74
              size: 20,
75
              outline: {
76
                color: "white",
77
                size: 2,
78
              },
79
            },
80
          ],
81

82
          verticalOffset: verticalOffset,
83

84
          callout: {
85
            type: "line",
86
            color: "white",
87
            size: 2,
88
            border: {
89
              color: color,
90
            },
91
          },
92
        };
93
      }
94

95
      const pointsRenderer = {
96
        type: "unique-value",
97
        field: "Type",
98
        uniqueValueInfos: [
99
          {
100
            value: "Museum",
101
            symbol: getUniqueValueSymbol(
102
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Museum.png",
103
              "#D13470",
104
            ),
105
          },
106
          {
107
            value: "Restaurant",
108
            symbol: getUniqueValueSymbol(
109
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Restaurant.png",
110
              "#F97C5A",
111
            ),
112
          },
113
          {
114
            value: "Church",
115
            symbol: getUniqueValueSymbol(
116
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Church.png",
117
              "#884614",
118
            ),
119
          },
120
          {
121
            value: "Hotel",
122
            symbol: getUniqueValueSymbol(
123
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Hotel.png",
124
              "#56B2D6",
125
            ),
126
          },
127
          {
128
            value: "Park",
129
            symbol: getUniqueValueSymbol(
130
              "https://developers.arcgis.com/javascript/latest/assets/sample-code/visualization-point-styles/Park.png",
131
              "#40C2B4",
132
            ),
133
          },
134
        ],
135
      };
136

137
      const pointsLayer = new FeatureLayer({
138
        url: "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LyonPointsOfInterest/FeatureServer",
139
        title: "Touristic attractions",
140
        elevationInfo: {
141
          mode: "relative-to-scene",
142
        },
143
        renderer: pointsRenderer,
144
        outFields: ["*"],
145
        screenSizePerspectiveEnabled: true,
146
        labelingInfo: [
147
          {
148
            labelExpressionInfo: {
149
              value: "{Name}",
150
            },
151
            symbol: {
152
              type: "label-3d",
153
              symbolLayers: [
154
                {
155
                  type: "text",
156
                  material: {
157
                    color: "white",
158
                  },
159
                  halo: {
160
                    size: 1,
161
                    color: [50, 50, 50],
162
                  },
163
                  size: 10,
164
                },
165
              ],
166
            },
167
          },
168
        ],
169
      });
170

171

172
      pointsLayer.featureReduction = {
173
        type: "selection",
174
      };
26 collapsed lines
175

176

177
      webscene.add(pointsLayer);
178

179
      // add functionality on the controls for selection, perspective, callout lines and relative-to-scene elevation mode
180
      document.getElementById("cityStyle").addEventListener("change", (event) => {
181
        if (event.target.id === "declutter") {
182
          const type = {
183
            type: "selection",
184
          };
185
          pointsLayer.featureReduction = event.target.checked ? type : null;
186
        }
187
      });
188

189
      view.ui.add(document.getElementById("cityStyle"), "top-right");
190
    </script>
191
  </head>
192

193
  <body>
194
    <div id="viewDiv" class="esri-widget"></div>
195
    <div id="cityStyle">
196
      <input type="checkbox" id="declutter" name="mode" checked="" />
197
      <label for="declutter">Declutter view</label>
198
    </div>
199
  </body>
200
</html>

Display filter

This example demonstrates how to set a display filter on a layer to control which features are visible based on the view scale. This is useful for reducing the download size of large layers, particularly for mobile devices.

For example, the OpenStreetMap Asia highways layer contains more than 46 million high resolution line features with more than 20 attributes. Since this layer requires several gigabytes of memory to draw all features, it isn’t feasible to load the entire dataset to a browser.

Thinning this data with a display filter can significantly improve the initial download size and the visualization.

	Thinning	No thinning
Initial download size	141kB (27.8kB compressed)	12.2MB (2.1MB compressed)
Preview

First, you should set scale visibility constraints to restrict the entire layer visibility at scales best suited given the density of the data. This is controlled by the minScale and maxScale properties of the layer.

ArcGIS JS API


19 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Highways in Singapore</title>
6

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

11
    <script type="module">
12
      const [MapView, WebMap, FeatureLayer, reactiveUtils] = await $arcgis.import([
13
        "@arcgis/core/views/MapView.js",
14
        "@arcgis/core/WebMap.js",
15
        "@arcgis/core/layers/FeatureLayer.js",
16
        "@arcgis/core/core/reactiveUtils.js",
17
      ]);
18

19

20
      const highwaysLayer = new FeatureLayer({
21
        portalItem: {
22
          id: "a9f8d83a69fc4f2c92e5f83f87df6aaf",
23
        },
24
        minScale: 1000000,
25
        maxScale: 0,
26
      });
87 collapsed lines
27

28

29

30
      highwaysLayer.displayFilterInfo = {
31
        mode: "scale",
32
        filters: [
33
          {
34
            title: "Large highways",
35
            minScale: Infinity,
36
            maxScale: 150000,
37
            where: "highway IN ('motorway')",
38
          },
39
          {
40
            title: "Small highways",
41
            minScale: 150000,
42
            maxScale: 60000,
43
            where: "highway IN ('motorway', 'trunk', 'trunk_link')",
44
          },
45
          {
46
            title: "Major roads",
47
            minScale: 60000,
48
            maxScale: 45000,
49
            where:
50
              "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link')",
51
          },
52
          {
53
            title: "Roads",
54
            minScale: 45000,
55
            maxScale: 30000,
56
            where:
57
              "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link')",
58
          },
59
          {
60
            title: "Smallest roads",
61
            minScale: 30000,
62
            maxScale: 10000,
63
            where:
64
              "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link', 'secondary', 'secondary_link')",
65
          },
66
          {
67
            title: "all",
68
            minScale: 10000,
69
            maxScale: 0,
70
          },
71
        ],
72
      };
73

74

75
      const view = new MapView({
76
        container: "viewDiv",
77
        map: new WebMap({
78
          basemap: "gray-vector",
79
          layers: [highwaysLayer],
80
        }),
81
        constraints: {
82
          snapToZoom: false,
83
        },
84
        viewpoint: {
85
          rotation: 0,
86
          scale: 175000,
87
          targetGeometry: {
88
            type: "point",
89
            spatialReference: {
90
              latestWkid: 3857,
91
              wkid: 102100,
92
            },
93
            x: 11557036.825180829,
94
            y: 147507.71438237422,
95
          },
96
        },
97
      });
98
    </script>
99

100
    <style>
101
      html,
102
      body,
103
      #viewDiv {
104
        height: 100%;
105
        margin: 0;
106
      }
107
    </style>
108
  </head>
109

110
  <body>
111
    <div id="viewDiv"></div>
112
  </body>
113
</html>

While this will prevent users from loading unreasonable amounts of data to the browser, it still may not be aggressive enough, especially for mobile devices. You can further reduce download size by filtering features dynamically via the displayFilterInfo property of the layer. Simply set the mode of the display filter to scale, then provide an array of scale ranges and SQL where clauses to filter features based on the given scale range.

Notice how each filter is more inclusive of road types as the scale ranges represent larger scales. This means as the user zooms in, they will see more detailed road types. And as they zoom out, the detail will be filtered out.

ArcGIS JS API


29 collapsed lines
1
<html>
2
  <head>
3
    <meta charset="utf-8" />
4
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
5
    <title>Highways in Singapore</title>
6

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

11
    <script type="module">
12
      const [MapView, WebMap, FeatureLayer, reactiveUtils] = await $arcgis.import([
13
        "@arcgis/core/views/MapView.js",
14
        "@arcgis/core/WebMap.js",
15
        "@arcgis/core/layers/FeatureLayer.js",
16
        "@arcgis/core/core/reactiveUtils.js",
17
      ]);
18

19

20
      const highwaysLayer = new FeatureLayer({
21
        portalItem: {
22
          id: "a9f8d83a69fc4f2c92e5f83f87df6aaf",
23
        },
24
        minScale: 1000000,
25
        maxScale: 0,
26
      });
27

28

29

30
      highwaysLayer.displayFilterInfo = {
31
        mode: "scale",
32
        filters: [
33
          {
34
            title: "Large highways",
35
            minScale: Infinity,
36
            maxScale: 150000,
37
            where: "highway IN ('motorway')",
38
          },
39
          {
40
            title: "Small highways",
41
            minScale: 150000,
42
            maxScale: 60000,
43
            where: "highway IN ('motorway', 'trunk', 'trunk_link')",
44
          },
45
          {
46
            title: "Major roads",
47
            minScale: 60000,
48
            maxScale: 45000,
49
            where:
50
              "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link')",
51
          },
52
          {
53
            title: "Roads",
54
            minScale: 45000,
55
            maxScale: 30000,
56
            where:
57
              "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link')",
58
          },
59
          {
60
            title: "Smallest roads",
61
            minScale: 30000,
62
            maxScale: 10000,
63
            where:
64
              "highway IN ('motorway', 'motorway_link', 'trunk', 'trunk_link', 'primary', 'primary_link', 'secondary', 'secondary_link')",
65
          },
66
          {
67
            title: "all",
68
            minScale: 10000,
69
            maxScale: 0,
70
          },
71
        ],
72
      };
41 collapsed lines
73

74

75
      const view = new MapView({
76
        container: "viewDiv",
77
        map: new WebMap({
78
          basemap: "gray-vector",
79
          layers: [highwaysLayer],
80
        }),
81
        constraints: {
82
          snapToZoom: false,
83
        },
84
        viewpoint: {
85
          rotation: 0,
86
          scale: 175000,
87
          targetGeometry: {
88
            type: "point",
89
            spatialReference: {
90
              latestWkid: 3857,
91
              wkid: 102100,
92
            },
93
            x: 11557036.825180829,
94
            y: 147507.71438237422,
95
          },
96
        },
97
      });
98
    </script>
99

100
    <style>
101
      html,
102
      body,
103
      #viewDiv {
104
        height: 100%;
105
        margin: 0;
106
      }
107
    </style>
108
  </head>
109

110
  <body>
111
    <div id="viewDiv"></div>
112
  </body>
113
</html>

Point styles for cities

Sample Code

FeatureReductionSelection

References

API support

The following table describes the geometry and view types that are suited well for each visualization technique.

	2D	Lines	Polygons	Client-side	Server-side
Clustering
Binning
Heatmap
Opacity
Bloom
Aggregation
Thinning	¹	¹	¹	²	³
Visible scale range

Full SupportPartial SupportNo Support

Feature reduction selection not supported
Only by feature reduction selection
Only by scale-driven filter

High density dataAggregation High density dataVisible scale range

What is thinning?

How thinning works

Examples

Feature reduction by selection (3D)

Display filter

Related samples and resources

Point styles for cities

FeatureReductionSelection

API support