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

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

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

データ例

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

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

コード スニペット

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

<igc-geographic-map
    id="geoMap"
    height="100%"
    width="100%"
    zoomable="true">
</igc-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 IgcGeographicHighDensityScatterSeriesComponent();
        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 リファレンス