Web Components Binding CSV Files with Geographic Locations

With the Ignite UI for Web Components map component, you can plot geographic data loaded from various file types. For example, you can load geographic locations from a comma separated values (CSV) file.

Web Components Binding CSV Files with Geographic Locations Example

import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-maps';
import { IgcGeographicHighDensityScatterSeriesModule } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule,
    IgcGeographicHighDensityScatterSeriesModule
);

export class MapBindingDataCSV {

    private geoMap: IgcGeographicMapComponent;

    constructor() {

        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;

        const url = 'https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv';
        fetch(url)
            .then((response) => response.text())
            .then(data => this.onDataLoaded(data));
    }

    disconnectedCallback() {
        this.geoMap.series.clear();
    }

    public onDataLoaded(csvData: string) {
        const csvLines = csvData.split('\n');
        console.log('SB loaded UsaCitiesPopulation.csv ' + csvLines.length);

        // parsing CSV data and creating geographic locations
        const geoLocations: any[] = [];
        for (let i: number = 1; i < csvLines.length; i++) {
            const columns: string[] = csvLines[i].split(',');
            const location: any = {
                name:  columns[0],
                latitude:  Number(columns[1]),
                longitude: Number(columns[2]),
                population: Number(columns[3])
            };
            geoLocations.push(location);
        }

        // creating HD series with loaded data
        const geoSeries = new IgcGeographicHighDensityScatterSeriesComponent();
        geoSeries.name = 'hdSeries';
        geoSeries.dataSource = geoLocations;
        geoSeries.latitudeMemberPath  = 'latitude';
        geoSeries.longitudeMemberPath = 'longitude';
        geoSeries.heatMaximumColor = 'Red';
        geoSeries.heatMinimumColor = 'Black';
        geoSeries.heatMinimum = 0;
        geoSeries.heatMaximum = 5;
        geoSeries.pointExtent = 1;
        // geoSeries.tooltipTemplate = this.createTooltip;
        geoSeries.mouseOverEnabled = true;

        // adding symbol series to the geographic amp
        this.geoMap.series.add(geoSeries);

        // zooming to bound of lower 48-states
        const geoBounds = {
            left: -130,
            top: 15,
            width: Math.abs(-130 + 65),
            height: Math.abs(50 - 15)
        };
        this.geoMap.zoomToGeographic(geoBounds);
    }
}

new MapBindingDataCSV();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>MapBindingDataCSV</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-geographic-map id="geoMap" width="100%" height="100%">

    </igc-geographic-map>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Data Example

Here is an example of data from CSV file:

City,Lat,Lon,State,Code,County,Density,Population
New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
ts

Code Snippet

The following code loads and binds IgcGeographicHighDensityScatterSeriesComponent in the map component to an array of objects created from loaded CSV file with geographic locations.

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

</igc-geographic-map>
html

connectedCallback() {
    this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;

    const url = "/data/UsaCitiesPopulation.csv";

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

onDataLoaded(csvData: string) {
    const csvLines = csvData.split("\n");
    // parsing CSV data and creating geographic locations
    const geoLocations: any[] = [];

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

    // creating HD series with loaded data
    const geoSeries = new IgcGeographicHighDensityScatterSeriesComponent();
    geoSeries.name = "hdSeries";
    geoSeries.dataSource = geoLocations;
    geoSeries.latitudeMemberPath  = "latitude";
    geoSeries.longitudeMemberPath = "longitude";
    geoSeries.heatMaximumColor = "Red";
    geoSeries.heatMinimumColor = "Black";
    geoSeries.heatMinimum = 0;
    geoSeries.heatMaximum = 5;
    geoSeries.pointExtent = 1;
    geoSeries.mouseOverEnabled = true;
    // adding symbol series to the geographic amp
    this.geoMap.series.add(geoSeries);
    // zooming to bound of lower 48-states
    const geoBounds = {
        left: -130,
        top: 15,
        width: Math.abs(-130 + 65),
        height: Math.abs(50 - 15)
    };

    this.geoMap.zoomToGeographic(geoBounds);
}
ts

Web Components Binding CSV Files with Geographic Locations