Bloom

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)

ParameterDescription
strengthDetermines the intensity of the bloom effect as a factor or percentage. The higher the strength, the brighter the glow.
radiusDetermines the radius of the blur in pixels.
thresholdColors 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.

  1. Create a simple renderer with a very small symbol size (e.g. 1 or 2 pixels) and apply it to the layer.
  2. 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
Use dark colors for code blocks
39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54 54
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Magnitude 4.0 earthquakes
    </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.23/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>

    <script>
      require([
        "esri/views/MapView",
        "esri/Map",
        "esri/geometry/SpatialReference",
        "esri/layers/FeatureLayer"
      ], (
        Map,
      ) => {
        const earthquakesLayer = new FeatureLayer({
          url: "https://services.arcgis.com/6DIQcwlPy8knb6sg/arcgis/rest/services/quakes/FeatureServer/0/",
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-marker",
              color: "#fd7f6f",
              size: 1,
              outline: null
            }
          }
        });

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

        const viewSpatialReference = new SpatialReference({
          wkid: 8857
        let centerPoint = {
          x: 0,
          y: 0,
          spatialReference: viewSpatialReference
        const countriesLayer = new FeatureLayer({
          portalItem: {
            id: "2b93b06dc0dc4e809d3c8db5cb96ba69"
          renderer: {
            type: "simple",
            symbol: {
              type: "simple-fill",
              color: "rgba(75,75,75,1)",
              outline: {
                color: [255, 255, 255, 0.1],
                width: 0.5
        const view = new MapView({
          container: "viewDiv",
          map: new Map({
            layers: [countriesLayer, earthquakesLayer]
          spatialReference: viewSpatialReference,
          center: centerPoint,
          scale: 206418924,
          constraints: {
            snapToZoom: false,
            minScale: 1100424194
          symbol: {
            type: "simple-fill",
            color: null,
            outline: {
              width: 0.5,
              color: [208, 208, 203, 0.7]
          geometry: {
            type: "extent",
            xmin: -180,
            xmax: 180,
            ymin: -90,
            ymax: 90,
            // This geometry automatically reprojects
            // when added to the view
            spatialReference: SpatialReference.WGS84
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</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.

  1. Create a simple, unique value, or a class breaks renderer and set it on the layer.
  2. 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
Use dark colors for code blocks
38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 38 39 40 41 42 43 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44 44
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
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Florida Annual Average Daily Traffic
    </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.23/esri/themes/dark/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>

    <script>
      require([
        "esri/views/MapView",
        "esri/WebMap",
        "esri/layers/FeatureLayer"
      ], (
      ) => {
        const highwaysLayer = new FeatureLayer({
          portalItem: {
            id: "cca8f554a0764b94b35f8b1781e399de"
          },
          effect: "bloom(1, 0px, 1%)"
        });
        const view = new MapView({
          container: "viewDiv",
          map: new WebMap({
            portalItem: {
              id: "41b13aa63483457cafe2b40f38fa098c"
            layers: [ highwaysLayer ]
          constraints: {
            snapToZoom: false,
            minScale: 11424194
    </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.