Creating a Heat Map Visualization with FlexMap and ColorScale in Angular

Background:

Wijmo does not currently provide a dedicated built-in heat map chart type. However, in Angular applications, you can create a heat map-style visualization by using the Wijmo FlexMap control with GeoMapLayer and ColorScale.

This approach renders each heat map cell as a GeoJSON polygon. The ColorScale component then applies colors to each cell based on its numeric value.

Steps to Complete:

1. Install and import the Wijmo Angular packages.
2. Add the Wijmo CSS.
3. Create the heat map data in the Angular component.
4. Convert the data into GeoJSON polygons.
5. Add the Wijmo Angular map markup.
6. Configure the color scale and tooltip.

Getting Started:

Install and import the Wijmo Angular packages

npm install @mescius/wijmo.angular2.chart.map @mescius/wijmo.angular2.chart @mescius/wijmo.styles

• The chart.map package provides the Angular components for FlexMap, GeoMapLayer, and ColorScale. The chart package is used for the legend component.

Add the Wijmo CSS

In styles.css, import the Wijmo stylesheet.

@import '@mescius/wijmo.styles/wijmo.css';

• This loads the default styles required by Wijmo controls.

Create the heat map data in the Angular component

In app.component.ts, import the Angular map and chart modules.

import { Component } from '@angular/core';
import { WjChartModule } from '@mescius/wijmo.angular2.chart';
import {
  WjChartMapModule,
  WjFlexMap,
  WjGeoMapLayer
} from '@mescius/wijmo.angular2.chart.map';
import { Position } from '@mescius/wijmo.chart';

• WjChartMapModule enables the map components, and WjChartModule enables the legend component used inside the map.

interface HeatMapItem {
  region: string;
  quarter: string;
  value: number;
}

export class AppComponent {
  readonly legendPosition = Position.Right;

  readonly heatData: HeatMapItem[] = [
    { region: 'North', quarter: 'Q1', value: 24 },
    { region: 'North', quarter: 'Q2', value: 38 },
    { region: 'North', quarter: 'Q3', value: 65 },
    { region: 'North', quarter: 'Q4', value: 42 },
    { region: 'South', quarter: 'Q1', value: 18 },
    { region: 'South', quarter: 'Q2', value: 55 },
    { region: 'South', quarter: 'Q3', value: 72 },
    { region: 'South', quarter: 'Q4', value: 49 }
  ];

  readonly rows = [...new Set(this.heatData.map(item => item.region))];
  readonly columns = [...new Set(this.heatData.map(item => item.quarter))];
}

• Each item represents one heat map cell. The value field is used by ColorScale to determine the cell color.

Convert the data into GeoJSON polygons

Add the following helper method and properties to the component.

readonly heatColors = ['#2166ac', '#67a9cf', '#f7f7f7', '#fdae61', '#b2182b'];

readonly cellStyle = {
  stroke: '#ffffff',
  strokeWidth: 1
};

readonly heatMapGeoJson = this.createHeatMapGeoJson();

getHeatValue = (feature: any): number => {
  return feature.properties.value;
};

private createHeatMapGeoJson() {
  return {
    type: 'FeatureCollection',
    features: this.heatData.map(item => {
      const x = this.columns.indexOf(item.quarter);
      const y = this.rows.indexOf(item.region);

      return {
        type: 'Feature',
        properties: item,
        geometry: {
          type: 'Polygon',
          coordinates: [[
            [x, y],
            [x + 1, y],
            [x + 1, y + 1],
            [x, y + 1],
            [x, y]
          ]]
        }
      };
    })
  };
}

• The GeoMapLayer requires GeoJSON data, so each heat map cell is represented as a rectangular polygon.

Add the Wijmo Angular map markup

In app.component.html, add the wj-flex-map, wj-geo-map-layer, and wj-color-scale components.

<wj-flex-map
  #heatMap
  [header]="'Sales Heat Map'"
  (initialized)="initMap(heatMap)">

  <wj-flex-chart-legend [position]="legendPosition"></wj-flex-chart-legend>

  <wj-geo-map-layer
    #layer
    [itemsSource]="heatMapGeoJson"
    [style]="cellStyle"
    (itemsSourceChanged)="fitHeatMap(layer)">

    <wj-color-scale
      [binding]="getHeatValue"
      [colors]="heatColors"
      [colorUnknown]="'#eeeeee'"
      [format]="'n0'">
    </wj-color-scale>

  </wj-geo-map-layer>
</wj-flex-map>

• The map renders the GeoJSON polygons, and the color scale colors each polygon according to the value returned by getHeatValue.

Configure the color scale and tooltip

Add these methods to app.component.ts.

initMap(map: WjFlexMap): void {
  map.tooltip.content = (feature: any) => {
    const item = feature.properties;
    return `${item.region}<br>${item.quarter}: ${item.value}`;
  };
}

fitHeatMap(layer: WjGeoMapLayer): void {
  if (layer.map) {
    layer.map.zoomTo(layer.getGeoBBox());
  }
}

• The tooltip displays the region, quarter, and value for each cell. The fitHeatMap method zooms the map to the generated heat map area after the layer is bound.

Add Component Styles

In app.component.css, give the map a visible height.

wj-flex-map {
  display: block;
  width: 100%;
  height: 420px;
}

With this setup, the Angular application uses Wijmo FlexMap, GeoMapLayer, and ColorScale to create a heat map-style visualization from standard data.

Happy coding!