Web Components Displaying Heat Imagery
The Ignite UI for Web Components map control has the ability to show heat-map imagery through the use of the ShapeFileRecord that are generated by a IgcShapeDataSource 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.
Web Components Displaying Heat Imagery Example
When a IgcShapeDataSource loads its shape files, it converts that data into IgcShapefileRecord objects. These objects can be retrieved from the GetPointData() method of the IgcShapeDataSource and can then be used to create a heat-map through usage of a IgcTileGeneratorMapImagery object with a IgcHeatTileGenerator assigned to its TileGenerator property. This IgcTileGeneratorMapImagery can then be used in a IgcGeographicTileSeriesComponent as its tileImagery source.
The IgcHeatTileGenerator 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 IgcHeatTileGenerator 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 IgcHeatTileGenerator can also use a logarithmic scale. If you want to use this, you can set the useLogarithmicScale property to true.
Web Worker
The IgcHeatTileGenerator 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-webcomponents-core';
let worker: Worker = self as any;
worker.onmessage = HeatTileGeneratorWebWorker.onmessage;
HeatTileGeneratorWebWorker.postmessage = postMessageFunction;
HeatTileGeneratorWebWorker.start();
function postMessageFunction() {
self.postMessage.apply(self, Array.prototype.slice.call(arguments));
}
export default {} as typeof Worker & (new () => Worker);
Dependencies
import Worker from "./heatworker.worker"
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicTileSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHeatTileGenerator } from 'igniteui-webcomponents-core';
import { IgcTileGeneratorMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';
ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
Creating Heatmap
The following code snippet shows how to display a population based heat-map in the Ignite UI for Web Components map component:
private geoMap: IgcGeographicMapComponent;
public tileImagery: IgcTileGeneratorMapImagery;
constructor() {
super();
this.tileImagery = new IgcTileGeneratorMapImagery();
this.onDataLoaded = this.onDataLoaded.bind(this);
}
connectedCallback() {
this.innerHTML = templateHTML;
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.geoMap.zoomToGeographic({ left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
const url = AssetsUtils.getAssetsPath() + "/data/UsaCitiesPopulation.csv";
console.log("SB loading " + url);
fetch(url)
.then((response) => response.text())
.then(data => this.onDataLoaded(data));
}
public onDataLoaded(csvData: string) {
const csvLines = csvData.split("\n");
console.log("loaded UsaCitiesPopulation.csv " + csvLines.length);
const latitudes: number[] = [];
const longitudes: number[] = [];
const populations: number[] = [];
// parsing CSV data and creating geographic locations
for (let i = 1; i < csvLines.length; i++) {
const columns = csvLines[i].split(",");
latitudes.push(Number(columns[1]));
longitudes.push(Number(columns[2]));
populations.push(Number(columns[3]));
}
// generating heat map imagery tiles
const gen = new IgcHeatTileGenerator();
gen.xValues = longitudes;
gen.yValues = latitudes;
gen.values = populations;
gen.blurRadius = 6;
gen.maxBlurRadius = 20;
gen.useBlurRadiusAdjustedForZoom = true;
gen.minimumColor = "rgba(100, 255, 0, 0.5)";
gen.maximumColor = "rgba(255, 255, 0, 0.5)";
gen.useGlobalMinMax = true;
gen.useGlobalMinMaxAdjustedForZoom = true;
gen.useLogarithmicScale = true;
gen.useWebWorkers = true;
gen.webWorkerInstance = new Worker();
gen.scaleColors = [
"rgba(0, 0, 255, .251)", "rgba(0, 255, 255, .3765)",
"rgba(50,205,50, .2675)", "rgba(255, 255, 0, .7059)",
"rgba(255, 0, 0, .7843)"
];
this.tileImagery.tileGenerator = gen;
// generating heat map series
const series = new IgcGeographicTileSeriesComponent();
series.tileImagery = this.tileImagery;
// add heat map series to the map
this.geoMap.series.add(series);
}