Displaying Heat Imagery

The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the ShapeFileRecords that are generated by a ShapeDataSource 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.

Demo

When a ShapeDataSource loads its shape files, it converts that data into ShapeFileRecord objects. These objects can be retrieved from the GetPointData() method of the ShapeDataSource and can then be used to create a heat-map through usage of a TileGeneratorMapImagery object with a HeatTileGenerator assigned to its TileGenerator property. This TileGeneratorMapImagery can then be used in a geographic tile series as its TileImagery source.

The HeatTileGenerator 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 HeatTileGenerator 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 HeatTileGenerator can also use a logarithmic scale. If you want to use this, you can set the useLogarithmicScale property to true.

The HeatTileGenerator 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.

Dependencies

import { HeatTileGenerator } from "igniteui-angular-core/ES5/igx-heat-tile-generator";
import { ShapeDataSource } from "igniteui-angular-core/ES5/igx-shape-data-source";
import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component";
import { TileGeneratorMapImagery } from "igniteui-angular-maps/ES5/igx-tile-generator-map-imagery";

Code Snippet

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

import { HeatTileGeneratorWebWorker } from "igniteui-angular-core/ES5/HeatTileGeneratorWebWorker";

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);
<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: TileGeneratorMapImagery;

constructor() {
    this.data = this.initData();

    this.tileImagery = new TileGeneratorMapImagery();

    const con: ShapeDataSource = new ShapeDataSource();

    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 HeatTileGenerator();
        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();
}

public initData(): any {
    const rows: any[] = [];
    for (let i = 0; i < 5; i++) {
        rows.push({
            index: i,
            name: "row" + i,
            state: "Initial... Initial... Initial... Initial... ",
            value: i * 10
        });
    }
    rows.push({
        index: 5,
        name: "row5",
        state: "Initial",
        value: undefined
    });
    return rows;
}