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

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

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

データ例

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

CityName,Lat,Lon,Population
New York,40.6943,-73.9249,19354922
Los Angeles,34.1139,-118.4068,12815475

コード スニペット

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

<igx-geographic-map
    #geoMap
    height="100%"
    width="100%"
    zoomable="true">
</igx-geographic-map>

var map = this.geoMap;
var url = "https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv";
fetch(url)
    .then((response) => response.text())
    .then((csvData: string) => {
        var csvLines = csvData.split("\n");
        var geoLocations: any[] = [];
        // parsing CSV data and creating geographic locations
        for (var i = 1; i < csvLines.length; i++) {
            var columns = csvLines[i].split(",");
            if (columns.length < 4) continue;
            geoLocations.push({
                name: columns[0],
                latitude: Number(columns[1]),
                longitude: Number(columns[2]),
                population: Number(columns[3])
            });
        }
        // creating the series with the loaded data
        var series = new IgxGeographicHighDensityScatterSeriesComponent();
        series.name = "hdSeries";
        series.dataSource = geoLocations;
        series.latitudeMemberPath = "latitude";
        series.longitudeMemberPath = "longitude";
        series.heatMaximumColor = "Red";
        series.heatMinimumColor = "Black";
        series.heatMinimum = 0;
        series.heatMaximum = 5;
        series.pointExtent = 1;
        series.mouseOverEnabled = true;
        // adding the series to the geographic map
        map.series.add(series);

        // zooming to the bounds of the lower 48 states
        map.zoomToGeographic({
            left: -130,
            top: 15,
            width: Math.abs(-130 + 65),
            height: Math.abs(50 - 15)
        });
    });

API リファレンス