Heatmaps aren't working when migrating to Harp engine.

[himanshurajora]

When I am selecting Harp as the map's engine the heat map seems to completely go away.

Before using Harp:

// Map initialization
const defaultLayers = this.platform.createDefaultLayers({});

this.map = new H.Map(
          this.mapElement.nativeElement,
          defaultLayers.vector.normal.map,
          {
            zoom: this.zoom,
            center: _.head(value).coordinates
          });

// Adding heatmap layer
const heatmapProvider = new H.data.heatmap.Provider({
  colors: new H.data.heatmap.Colors(
    {
      '0': 'blue',
      '0.5': 'yellow',
      '1': 'red'
    },
    true
  ),
  opacity: 0.6,
  // min: 0,
  // max: 100,
  // dataMax: 100
  type: 'value'
});

// Add the data:
heatmapProvider.addData(
  _.map(this.markers, marker => {
    return {
      lat: marker.coordinates.lat,
      lng: marker.coordinates.lng,
      value: +marker.value
    };
  })
);

// Add a layer for the heatmap provider to the map:
this.map.addLayer(new H.map.layer.TileLayer(heatmapProvider));

Output:

After using Harp

// Map initialization
const engineType = H.Map.EngineType['HARP'];

const defaultLayers = this.platform.createDefaultLayers({
  engineType
});

const style = new H.map.render.harp.Style(
  'https://heremaps.github.io/maps-api-for-javascript-examples/change-harp-style-at-load/data/night.json'
);

// Step 4: create a layer with the style object:
const vectorLayer = this.platform
  .getOMVService()
  .createLayer(style, { engineType });

this.map = new H.Map(this.mapElement.nativeElement, vectorLayer, {
  zoom: this.zoom,
  center: _.head(value).coordinates,
  engineType
});

Output:

After using Harp as engine the heatmap completely disappears although I didn't change anything in that regard. Please let me know how I can fix it.

[himanshurajora]

It shows the following error as well:

[dbacarel]

Hi @himanshurajora, providers classes expect also the engineType parameter - see https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.data.heatmap.Provider.html#.Options

If not explicitly set, the default is H.Map.EngineType.WEBGL but here you're using H.Map.EngineType.HARP so you need to initialize the heatmap provider as follows:

// Adding heatmap layer
const heatmapProvider = new H.data.heatmap.Provider({
  colors: new H.data.heatmap.Colors(
    {
      '0': 'blue',
      '0.5': 'yellow',
      '1': 'red'
    },
    true
  ),
  opacity: 0.6,
  // min: 0,
  // max: 100,
  // dataMax: 100
  type: 'value',
  engineType: H.Map.EngineType['HARP']
});