Geo-visualization 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.

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.