Matías Matías - 3 months ago 10
Javascript Question

Different color to noise marker using here maps

Is it possible to apply different color to different noise markers while clustering using here maps api?

There's a theming option available, but that applies to all markers. I would like to set a specific color to specific point based on certain conditions.

Answer

This is certainly possible using a custom theme. The definition of the H.clustering.DataPoint object includes a data() method which can hold arbitrary data.

When you prepare your dataset you can add it as shown:

var dataPoints = [];

dataPoints.push(new H.clustering.DataPoint(lat, lng, null, {color :'red'}));
dataPoints.push(new H.clustering.DataPoint(lat, lng, null, {color :'green'}));
dataPoints.push(new H.clustering.DataPoint(lat, lng, null, {color :'blue'}));
// etc ...

If you use a custom theme, you can read the data from the noise point and display it as you see fit:

function colorfulClusteringTheme() {
    var baseTheme = new H.clustering.DefaultTheme();
    this.getClusterPresentation = function (cluster) {

      var clusterIcon = baseTheme.getClusterPresentation(cluster).getIcon();
          return new H.map.Marker(cluster.getPosition(), {
              icon: clusterIcon,
          min: cluster.getMinZoom(),
          max: cluster.getMaxZoom()
        });

    };
    this.getNoisePresentation = function (noisePoint) {
       if (noisePoint.data.color === 'red'){
          // add red noise point
          return new H.map.Marker(noisePoint.getPosition(), { icon: redIcon });
       }
       if (noisePoint.data.color === 'green'){
          // add red marker
          return new H.map.Marker(noisePoint.getPosition(), { icon: greenIcon });
       }
        if (noisePoint.data.color === 'blue'){
          // add blue noise point
          return new H.map.Marker(noisePoint.getPosition(), { icon: blueIcon });
       }
    };
  };

You can add the theme to the map in the usual manner:

var clusteredDataProvider = new H.clustering.Provider(dataPoints, {
    clusteringOptions: {
      eps: 16,
      minWeight: 5
    },
    theme: new colorfulClusteringTheme()
  });

  var clusteringLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
  map.addLayer(clusteringLayer);