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 リファレンス