Geovisualization Developer's Guide

Drawing Data-Driven Markers

It is possible to render complex data-driven icons for markers (such as donuts or bar charts):

Figure 1. Data-driven markers

In ObjectLayer, the marker icon can be defined in the rowToStyle callback. The recommended way to define a data-driven icon is using the ObjectLayer.createIcon() method.

var layer = new H.datalens.ObjectLayer(
  provider,
  {
    ...
    rowToStyle: function(row) {
      var svg; //svg markup
      ...
      return {
        icon: H.datalens.ObjectLayer.createIcon(svg, {size: 16})
      };
    }
  }
);

You can use JsonML to define SVG. The following example draws circles with a radius defined by the metric from the data:

var metricScale = d3.linearScale();
  ...
  var layer = new H.datalens.ObjectLayer(
    provider,
    {
      ...
      rowToStyle: function(row) {
        return {
          icon: H.datalens.ObjectLayer.createIcon(
            [
              `svg`,
              {
                viewBox: '-8 -8 8 8'
              },
              [
                'circle',
                r: metricScale(row.metric)
              ]
            ],
            {size: 16}
          )
        };
      }
    }
  );

When you have more than 100 markers on a map and each of them has a unique icon, rendering may become slow. This problem can be solved with the dataDomains option. For example, when dataDomains is defined as follows, only 10 variations of icon are rendered:

...
var layer = new H.datalens.ObjectLayer(
  provider,
  {
    ...
    dataDomains: {
      metric: metricScale.ticks(10)
    }
  }
);

This allows rendering of up to 10,000 markers with reasonable performance.