Geo-visualization Developer's Guide

Value-Based

A value-based heat map is created with a density alpha mask using the KDE method, but displayed as a density map with an applied color scale on its own. The bandwith parameter influences the perceived smoothness of the heat map surface.

For smooth transition onto the base map or background, the density's colorScale can either have transparency on the low end on its own, or be applied as an alphaScale. In any case, the resulting output color scale is univariate.

The Geo-visualization query language allows you to group data rows by buckets (in most cases a bucket is a 1x1 pixel) and aggregate row values for each bucket. Normally this type of query is used to draw a heat map.

The simplest heat map can be instantiated as follows:

var layer = new H.datalens.HeatmapLayer(
  provider,
  {
    rowToTilePoint: function(row) {
      return {
        x: row.tx,
        y: row.ty,
        //number of rows in a bucket
        count: row.count,
        //aggregated value
        value: row.signal
      };
    }
  }
);
map.addLayer(layer);

Heat map data processing relies on the following callbacks:

  • dataToRows defines how the input tile data is split by rows. This callback works similarly to the one in H.datalens.ObjectLayer.
  • rowToTilePoint defines how the row is translated to the H.datalens.HeatmapLayer.TilePoint. For heat map rendering, each row of data must be represented as a point within the map tile. It also must have the value at that point (for example, an aggregated bucket value) and the number of contributors (count) to the value at that point (for example, the number of rows in the bucket).
Figure 1. Heat map data processing

Blending of points implemented with KDE with Gaussian kernel relies on the following options:

  • bandwidth defines the level of smoothing as a function of the zoom level. The cut-off of the Gaussian kernel is defined as 3 * bandwidth.
  • aggregation specifies which type of aggregation was applied (for example, the type of aggregation function for buckets in the Geo-visualization query). Possible values are SUM or AVERAGE. If the aggregation type is AVERAGE, then an averaged heat map is rendered.
  • inputScale defines the scale (such as logarithmic scale) of the TilePoint value. If the value is not in a linear scale, then the aggregation in the source query must be defined with respect to the scale type. For example, before applying the average aggregation function in a query, the value must be transformed to the linear scale. This guarantees correct linear averaging of values.
  • valueRange defines the range for the color scale as a function of the zoom level. The returned value must be an array of two numbers. It is used for normalizing the point value passed to colorScale.
  • colorScale defines a color palette as a function of the normalized value. You can use the D3.js library scale functions with the domain [0, 1].
  • countRange defines the range for the density alpha mask as a function of the zoom level. When defined, the density alpha mask is applied. The returned value must be an array of two numbers. It is used for normalizing the point count passed to alphaScale.
  • alphaScale defines the alpha mask value as a function of the normalized count. You can use the D3.js library scale functions with the domain [0, 1] and the range [0, 1].

You cannot use this account to purchase a commercial plan on Developer Portal, as it is already associated to plans with different payment methods.

To purchase a commercial plan on Developer Portal, please register for or sign in with a different HERE Account.

Something took longer than expected.

The project should be available soon under your projects page.

Sorry, our services are not available in this region.

Something seems to have gone wrong. Please try again later.

We've detected that your account is set to Australian Dollars (AUD).
Unfortunately, we do not offer checkouts in AUD anymore.
You can continue using your current plan as normal, but to subscribe to one of our new plans,
please register for a new HERE account or contact us for billing questions on selfservesupport@here.com.