Visible scale range

Percent of households with no vehicle available. Expand the layer list widget in the app to view the legend. As you zoom in, the same data will load with higher resolution geometries to provide more detail.

What is visible scale range?

A visible scale range defines the minimum and the maximum scales at which a dataset can be viewed.

Scale is a unitless way of describing how any distance on the map translates to a real-world distance. For example, a map at a 1:24,000 scale communicates that 1 unit on the screen represents 24,000 of the same unit in the real world. So one inch on the screen represents 24,000 inches in the real world.

Large scales display areas that are zoomed in, such as neighborhoods. Large scales allow you to view small areas so objects in the map (e.g. buildings) appear larger in the view.

Small scales display areas that are zoomed out, such as countries and continents. Small scales allow you to view more data. However, objects (e.g. buildings) appear smaller than they would in large scale maps.

Small scaleLarge scale
1:72,876,2171:8,000
small scale large scale

The concept of large scale vs. small scale can be confusing because the ArcGIS API for JavaScript defines scale as a whole number using the denominator rather than the actual ratio it represents. For example, a view at a scale of 1:24,000 is defined as view.scale = 24000, not view.scale = 1/24000. Even though 24,000 is less than 4,000,000, a scale value of 24,000 is considered larger than a scale value of 4,000,000 because the fraction 1/24000 is larger than 1/4000000.

Why is visible scale range useful?

Some large datasets can't be reasonably visualized at certain scales. For example, it doesn't make sense to display census tracts at scales where you see the whole globe because tracts typically represent neighborhoods and small communities. Many polygons at that scale would be smaller than a pixel, making them useless to the end user.

Setting visible scale range on your layers also helps reduce the initial data download to the browser. Don't display too much data if you don't have to!

How visible scale range works

Visible scale range is defined on the layer with a minScale and a maxScale. minScale is the larger of the two numbers and defines the farthest the user can zoom out to view the layer. maxScale is the smaller of the two numbers and defines the farthest the user can zoom in to view the layer. Oftentimes the maxScale can remain undefined or 0. Setting the minScale will make the most difference in reducing download size.

Examples

One variable, multiple layers

The following example demonstrates how to visualize the same data variable at multiple resolutions by setting visible scale ranges on layers representing U.S. states, counties, and census tracts. This requires that the data is properly aggregated within each layer.

Open the CodePen and reset the minScale and maxScale on each layer to 0 to observe how this affects the visualization.

Percent of households with no vehicle available. Expand the layer list widget in the app to view the legend. As you zoom in, the same data will load with higher resolution geometries to provide more detail.
ArcGIS JS API
Use dark colors for code blocks
45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 45 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 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69 69
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Visible scale range
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(50,50,50,1);
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.22/"></script>

    <script>
      require([
        "esri/views/MapView",
        "esri/Map",
        "esri/geometry/SpatialReference",
        "esri/layers/FeatureLayer",
        "esri/widgets/LayerList",
        "esri/widgets/Expand"
      ], (
        Map,
      ) => {
        const effect = "drop-shadow(4px, 4px, 2px, rgb(100,100,100))"
        const url = "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Vehicle_Availability_Boundaries/FeatureServer";

        const statesLayer = new FeatureLayer({
          url,
          layerId: 0,
          minScale: 0,
          maxScale: 30000001,
          effect
        });
        const countiesLayer = new FeatureLayer({
          url,
          layerId: 1,
          minScale: 30000000,
          maxScale: 2000001,
          effect
        });
        const tractsLayer = new FeatureLayer({
          url,
          layerId: 2,
          // This prevents the app from loading all census tracts at small scales
          minScale: 2000000,
          maxScale: 0,
          effect
        });
        const viewSpatialReference = new SpatialReference({
          wkid: 5070
        let centerPoint = {
          x: 0,
          y: 0,
          spatialReference: viewSpatialReference
        const view = new MapView({
          container: "viewDiv",
          map: new Map({
            layers: [
          spatialReference: viewSpatialReference,
          viewpoint: {
            rotation: 0,
            scale: 34809209,
            targetGeometry: {
              type: "point",
                spatialReference: {
                    wkid: 5070
                x: -77487.07615764029,
                y: 1780211.54390861
        const layerlist = new LayerList({
          listItemCreatedFunction: (event) => {
            const item = event.item;
              content: "legend"
        view.ui.add(new Expand({
          content: layerlist
        }), "top-right");
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

API support

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

2D3DPointsLinesPolygonsMeshClient-sideServer-side
Clustering
Heatmap
Opacity
Bloom
Aggregation
Thinning11123
Visible scale range
Full supportPartial supportNo support
  • 1. Feature reduction selection not supported
  • 2. Only by feature reduction selection
  • 3. Only by scale-driven filter

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.