Bloom | ArcGIS Maps SDK for JavaScript

Magnitude 4.0 earthquakes and greater (1970 - 2019). Brighter areas indicate areas that have more earthquakes than others.

What is bloom?

Bloom is a layer effect that brightens symbols representing a layer’s features, making them appear to glow. This has an additive effect so areas where more features overlap will have a brighter and more intense glow. This makes bloom an effective way for visualizing dense datasets.

How bloom works

The bloom effect is controlled with three parameters and looks best on dark backgrounds.

bloom(strength, radius, threshold)

Parameter	Description
strength	Determines the intensity of the bloom effect as a factor or percentage. The higher the strength, the brighter the glow.
radius	Determines the spread of light in the accepted range 0px-1px. Default value is 0. Negative values are not allowed. Leaves the features inside the radius untouched.
threshold	Colors with this brightness value or higher will have the bloom effect applied.

The bloom effect can be sensitive to scale, density, and color. Effectively using bloom is often done through trial and error. The parameters that work well for one layer are often not suitable for other layers.

Examples

Points

The following example demonstrates how to use bloom to show the density of overlapping points representing nearly 50 years of earthquakes.

Create a simple renderer with a very small symbol size (e.g. 1 or 2 pixels) and apply it to the layer.
Set the bloom effect on the layer. At a global scale with lots of points, the radius should be small (e.g. 0.1px). The threshold depends on the choice of color for the renderer. A lower number captures more colors (e.g. 15%).

Magnitude 4.0 earthquakes and greater (1970 - 2019). Brighter areas indicate areas that have more earthquakes than others.

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>Magnitude 4.0 earthquakes</title>
6

7
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/dark/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, Map, SpatialReference, FeatureLayer] = await $arcgis.import([
13
        "@arcgis/core/views/MapView.js",
14
        "@arcgis/core/Map.js",
15
        "@arcgis/core/geometry/SpatialReference.js",
16
        "@arcgis/core/layers/FeatureLayer.js",
17
      ]);
18

19

20
      const earthquakesLayer = new FeatureLayer({
21
        url: "https://services.arcgis.com/6DIQcwlPy8knb6sg/arcgis/rest/services/quakes/FeatureServer/0/",
22
        renderer: {
23
          type: "simple",
24
          symbol: {
25
            type: "simple-marker",
26
            color: "#fd7f6f",
27
            size: 1,
28
            outline: null,
29
          },
30
        },
31
      });
32

33
      earthquakesLayer.effect = "bloom(1.3, 0.1px, 15%)";
34

79 collapsed lines
35

36

37
      const viewSpatialReference = new SpatialReference({
38
        wkid: 8857,
39
      });
40
      let centerPoint = {
41
        x: 0,
42
        y: 0,
43
        spatialReference: viewSpatialReference,
44
      };
45

46
      const countriesLayer = new FeatureLayer({
47
        portalItem: {
48
          id: "2b93b06dc0dc4e809d3c8db5cb96ba69",
49
        },
50
        renderer: {
51
          type: "simple",
52
          symbol: {
53
            type: "simple-fill",
54
            color: "rgba(75,75,75,1)",
55
            outline: {
56
              color: [255, 255, 255, 0.1],
57
              width: 0.5,
58
            },
59
          },
60
        },
61
      });
62

63
      const view = new MapView({
64
        container: "viewDiv",
65
        map: new Map({
66
          layers: [countriesLayer, earthquakesLayer],
67
        }),
68
        spatialReference: viewSpatialReference,
69
        center: centerPoint,
70
        scale: 206418924,
71
        constraints: {
72
          snapToZoom: false,
73
          minScale: 1100424194,
74
        },
75
      });
76

77
      view.graphics.add({
78
        symbol: {
79
          type: "simple-fill",
80
          color: null,
81
          outline: {
82
            width: 0.5,
83
            color: [208, 208, 203, 0.7],
84
          },
85
        },
86
        geometry: {
87
          type: "extent",
88
          xmin: -180,
89
          xmax: 180,
90
          ymin: -90,
91
          ymax: 90,
92
          // This geometry automatically reprojects
93
          // when added to the view
94
          spatialReference: SpatialReference.WGS84,
95
        },
96
      });
97
    </script>
98

99
    <style>
100
      html,
101
      body,
102
      #viewDiv {
103
        background-color: rgba(50, 50, 50, 1);
104
        height: 100%;
105
        margin: 0;
106
      }
107
    </style>
108
  </head>
109

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

Lines

The following example demonstrates how to use bloom to show the density of overlapping lines representing Florida highways. Thick lines and lines that overlap will have a brighter appearance than thin non-overlapping lines.

Create a simple, unique value, or a class breaks renderer and set it on the layer.
Set the bloom effect on the layer.

Annual average daily traffic in Florida highways. The color of the symbol indicates the jurisdiction of each highway.

ArcGIS JS API


18 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>Florida Annual Average Daily Traffic</title>
6

7
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/dark/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] = await $arcgis.import([
13
        "@arcgis/core/views/MapView.js",
14
        "@arcgis/core/WebMap.js",
15
        "@arcgis/core/layers/FeatureLayer.js",
16
      ]);
17

18

19
      const highwaysLayer = new FeatureLayer({
20
        portalItem: {
21
          id: "cca8f554a0764b94b35f8b1781e399de",
22
        },
23
        effect: "bloom(1, 0px, 1%)",
24
      });
31 collapsed lines
25

26

27
      const view = new MapView({
28
        container: "viewDiv",
29
        map: new WebMap({
30
          portalItem: {
31
            id: "41b13aa63483457cafe2b40f38fa098c",
32
          },
33
          layers: [highwaysLayer],
34
        }),
35
        constraints: {
36
          snapToZoom: false,
37
          minScale: 11424194,
38
        },
39
      });
40
    </script>
41

42
    <style>
43
      html,
44
      body,
45
      #viewDiv {
46
        height: 100%;
47
        margin: 0;
48
      }
49
    </style>
50
  </head>
51

52
  <body>
53
    <div id="viewDiv"></div>
54
  </body>
55
</html>

Intro to layer effect

Sample Code

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 dataOpacity High density dataAggregation