WebGL maps support hardware-accelerated density maps, often also called heat maps. A density map counts overlapping features on each pixel and colors the pixels accordingly.

density
Figure 1. A density map or heat map of moving aircraft tracks over the US.

You can use heat maps for any data:

  • Icons as well as lines and areas

  • Dynamic data as well as static data

You enable it using the density property on any FeaturePainter. You have to pass a ColorMap that maps the amount of overlapping features to colors.

Program: Enabling density painting
const painter = new FeaturePainter();
// painter.paintBody = ... // customize painter as usual
painter.density = {
  //Use the factory method from the ColorMap module to create a gradient color map
  colorMap: createGradientColorMap([
    {level: 0, color: "rgba(  0,   0,   0, 0.0)"}, //        no objects -> Transparent
    {level: 1, color: "rgba(  0, 255,   0, 0.5)"}, //  1 opaque object  -> Transparent blue
    {level: 10, color: "rgba(255, 255, 255, 1.0)"}  // 10 opaque objects -> White
  ])
};

Note that when you are using density painting, the regular color of features is not relevant. The transparency value (alpha) is used to indicate the weight of the feature as a value between 0 and 1.

If you want to use density for icons, it is recommended not to specify an icon image. Instead, LuciadRIA automatically uses a gradient icon, which you can re-size using the IconStyle width and height properties.

Refer to the API documentation of FeaturePainter.density for more details, and see the Tracks sample for an example.