Creating a Heat Map Visualization with FlexMap and ColorScale in Vue

Background:

Wijmo does not currently provide a dedicated built-in HeatMap chart type. However, in Vue applications, you can create a heat map-style visualization by using Wijmo’s FlexMap, GeoMapLayer, and ColorScale components.

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 Vue packages.
2. Create the heat map data.
3. Convert the data into GeoJSON polygons.
4. Render the map with Vue markup.
5. Configure the color scale, tooltip, and map bounds.

Getting Started:

Install and import the Wijmo Vue packages

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

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

<script setup>
import { computed } from 'vue';
import '@mescius/wijmo.styles/wijmo.css';

import { WjFlexChartLegend } from '@mescius/wijmo.vue2.chart';
import {
  WjFlexMap,
  WjGeoMapLayer,
  WjColorScale
} from '@mescius/wijmo.vue2.chart.map';
import { Position } from '@mescius/wijmo.chart';
</script>

• Wijmo Vue components can be used directly in the template when imported in a Vue single-file component using <script setup>.

Create the heat map data

<script setup>
const heatData = [
  { 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 }
];

const rows = computed(() => [...new Set(heatData.map(item => item.region))]);
const columns = computed(() => [...new Set(heatData.map(item => item.quarter))]);
</script>

• Each object represents one heat map cell. The value field determines the color assigned by ColorScale.

Convert the data into GeoJSON polygons

<script setup>
function createHeatMapGeoJson(data, rows, columns) {
  return {
    type: 'FeatureCollection',
    features: data.map(item => {
      const x = columns.indexOf(item.quarter);
      const y = 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]
          ]]
        }
      };
    })
  };
}

const heatMapGeoJson = computed(() => {
  return createHeatMapGeoJson(heatData, rows.value, columns.value);
});
</script>

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

Render the map with Vue markup.Configure the color scale, tooltip, and map bounds

<template>
  <wj-flex-map
    class="heat-map"
    header="Sales Heat Map"
    :initialized="initMap"
  >
    <wj-flex-chart-legend :position="legendPosition" />

    <wj-geo-map-layer
      :items-source="heatMapGeoJson"
      :style="cellStyle"
      :items-source-changed="fitHeatMap"
    >
      <wj-color-scale
        :binding="getHeatValue"
        :colors="heatColors"
        color-unknown="#eeeeee"
        format="n0"
      />
    </wj-geo-map-layer>
  </wj-flex-map>
</template>

• The wj-flex-map component renders the visualization, wj-geo-map-layer displays the generated GeoJSON cells, and wj-color-scale colors each cell according to its bound value.

<script setup>
const legendPosition = Position.Right;
const heatColors = ['#2166ac', '#67a9cf', '#f7f7f7', '#fdae61', '#b2182b'];
const cellStyle = { stroke: '#ffffff', strokeWidth: 1 };

function getHeatValue(feature) {
  return feature.properties.value;
}

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

function fitHeatMap(layer) {
  if (layer.map) {
    layer.map.zoomTo(layer.getGeoBBox());
  }
}
</script>

• The initialized handler configures the tooltip. The itemsSourceChanged handler zooms the map to the generated heat map area after the layer is bound.

<style>
.heat-map {
  display: block;
  width: 100%;
  height: 420px;
}
</style>

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

Happy coding!