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

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.