Angular Displaying Heat Imagery

The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the ShapeFileRecord that are generated by a IgxShapeDataSource by loading geo-spatial data by loading shape files to a tile series.

It is highly recommended that you review the Binding Shape Files with Geo-Spatial Data topic as a pre-requisite to this topic.

Angular Displaying Heat Imagery Example

When a IgxShapeDataSource loads its shape files, it converts that data into IgxShapefileRecord objects. These objects can be retrieved from the GetPointData() method of the IgxShapeDataSource and can then be used to create a heat-map through usage of a IgxTileGeneratorMapImagery object with a IgxHeatTileGenerator assigned to its TileGenerator property. This IgxTileGeneratorMapImagery can then be used in a IgxGeographicTileSeriesComponent as its tileImagery source.

The IgxHeatTileGenerator object works such that it has three value paths, xValues, yValues and values. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the xValues to be longitude, yValues to be latitude, and values to be the population data. Each of these properties takes a number[].

The display of the geographic tile series when using the heat-map functionality can be customized by setting the minimumColor and maximumColor properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the values property of the HeatTileGenerator. You can further customize this by setting the ScaleColors property of the generator to contain a collection of strings that describe colors, as this will tell the IgxHeatTileGenerator what colors to use for the displayed values in the map. It is also possible to customize how colors in your ScaleColors collection blur together by using the blurRadius, maxBlurRadius, and useBlurRadiusAdjustedForZoom properties.

The IgxHeatTileGenerator can also use a logarithmic scale. If you want to use this, you can set the useLogarithmicScale property to true.

Web Worker

The IgxHeatTileGenerator also has support for web workers to do the heavy lifting of the loading of the tile imagery from your shape file on a separate thread. This can greatly improve the performance of your geographic map when using the heat-map functionality. In order to use a web worker with the generator, you can set the useWebWorkers property to true and then set the webWorkerInstance property to an instance of your web worker.

// heatworker.worker.ts
import { HeatTileGeneratorWebWorker } from 'igniteui-angular-core';

const worker: Worker = self as any;
worker.onmessage = HeatTileGeneratorWebWorker.onmessage;
HeatTileGeneratorWebWorker.postmessage = heatWorkerPostMessage;
function heatWorkerPostMessage() {
  (self as any).postMessage.apply(self, Array.prototype.slice.call(arguments));
}
HeatTileGeneratorWebWorker.start();
export default {} as typeof Worker & (new () => Worker);

Dependencies

import { IgxHeatTileGenerator } from 'igniteui-angular-core';
import { IgxShapeDataSource } from 'igniteui-angular-core';
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';

Creating Heatmap

The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component:

<igx-geographic-map #map width="100%" height="calc(100% - 60px)">
    <igx-geographic-tile-series name="heatTiles" [tileImagery]="tileImagery"></igx-geographic-tile-series>
</igx-geographic-map>

@ViewChild("map", { static: true })
public map: IgxGeographicMapComponent;
public data: any[];
public tileImagery: IgxTileGeneratorMapImagery;
// ...
constructor() {
    this.data = this.initData();

    this.tileImagery = new IgxTileGeneratorMapImagery();

    const con: IgxShapeDataSource = new IgxShapeDataSource();
    con.importCompleted.subscribe((s, e) => {
        const data = con.getPointData();
        const lat: number[] = [];
        const lon: number[] = [];
        const val: number[] = [];
        for (let i = 0; i < data.length; i++) {
            const item = data[i];
            for (let j = 0; j < item.points.length; j++) {
                const pointsList = item.points[j];
                for (let k = 0; k < pointsList.length; k++) {
                    lat.push(pointsList[k].y);
                    lon.push(pointsList[k].x);
                }
            }
            const value = item.fieldValues["POP_2010"];
            if (value >= 0) {
                val.push(value);
            } else {
                val.push(0);
            }
        }

        const gen = new IgxHeatTileGenerator();
        gen.xValues = lon;
        gen.yValues = lat;
        gen.values = val;
        gen.blurRadius = 6;
        gen.maxBlurRadius = 20;
        gen.useBlurRadiusAdjustedForZoom = true;
        gen.minimumColor = "rgba(100,255, 0, 0.3922)";
        gen.maximumColor = "rgba(255, 255, 0, 0.9412)";
        gen.useGlobalMinMax = true;
        gen.useGlobalMinMaxAdjustedForZoom = true;
        gen.useLogarithmicScale = true;
        gen.useWebWorkers = true;
        gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" });
        gen.scaleColors = [
            "rgba(0, 0, 255, 64)",
            "rgba(0, 255, 255, 96)",
            "rgba(0, 255, 0, 160)",
            "rgba(255, 255, 0, 180)",
            "rgba(255, 0, 0, 200)"
        ];

        this.tileImagery.tileGenerator = gen;
    });
    con.shapefileSource = "assets/Shapes/AmericanCities.shp";
    con.databaseSource  = "assets/Shapes/AmericanCities.dbf";
    con.dataBind();
}

Angular Displaying Heat Imagery