Web Components Geographic High Density Map

In Web Components map component, you can use the GeographicHighDensityScatterSeries to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time.

Web Components Geographic High Density Map Example

The demo above shows the GeographicHighDensityScatterSeries series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels.

Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays areas with the most data using a higher color density representing a cluster of data points.

Data Requirements

Similar to other types of scatter series in the map control, the GeographicHighDensityScatterSeries series has the DataSource property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the LongitudeMemberPath and LatitudeMemberPath properties to map these data columns.

Data Binding

The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding.

Heat Color Scale

The Heat Color Scale, an optional feature, determines the color pattern within the series. The following table summarizes the properties used for determining the color scale.

Code Example

The following code demonstrates how set the HeatMinimumColor and HeatMaximumColor properties of the GeographicHighDensityScatterSeries

<igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

import { IgcGeographicHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-maps';
//...
connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
    const url = "../data/Places.csv";

    fetch(url)
        .then((response) => response.text())
        .then(data => this.onDataLoaded(data));
}

onDataLoaded(csvData: string) {
    const csvLines = csvData.split("\n");
    const geoLocations: any[] = [];

    for (let i = 1; i < csvLines.length; i++) {
        const columns = csvLines[i].split(",");
        const location = {
            latitude:  Number(columns[2]),
            longitude: Number(columns[1]),
            name:  columns[0]
        };
        geoLocations.push(location);
    }

    // creating HD series with loaded data
    const geoSeries = new IgcGeographicHighDensityScatterSeriesComponent();
    geoSeries.dataSource = geoLocations;
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.latitudeMemberPath = "latitude";
    geoSeries.heatMaximumColor = "Red";
    geoSeries.heatMinimumColor = "Black";
    geoSeries.heatMinimum = 0;
    geoSeries.heatMaximum = 5;
    geoSeries.pointExtent = 1;
    // adding HD series to the geographic amp
    this.geoMap.series.add(geoSeries);
}

API References