React CSV ファイルを地理的な場所にバインド

Ignite UI for React Map コンポーネントを使用すると、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、カンマ区切り値 (CSV) ファイルから地理的な場所を読み込むことができます。

React CSV ファイルを地理的な場所にバインドの例

データ例

CSV ファイルからのデータの例:

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

コード スニペット

以下のコードは、マップコンポーネント内の IgrGeographicHighDensityScatterSeries を、ロードされた CSV ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。

import { IgrGeographicHighDensityScatterSeries } from 'igniteui-react-maps';
// ...

public componentDidMount() {
    // fetching CSV data with geographic locations from public folder
    fetch(url + "/Data/UsaCities.csv")
        .then((response) => response.text())
        .then(data => this.onDataLoaded(data));
}

public 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(",");
        // using CSV columns: City,Lat,Lon,State,Code,County,Density,Population
        const location = {
            name:  columns[0],
            latitude:  Number(columns[1]),
            longitude: Number(columns[2]),
            state: columns[3],
            code: columns[4],
            county: columns[5],
            density: Number(columns[6]),
            population: Number(columns[7])
        };
        geoLocations.push(location);
    }

    // creating HD series with loaded data
    const geoSeries = new IgrGeographicHighDensityScatterSeries( { 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);
}

API リファレンス