지리적 위치를 사용하여 CSV 파일을 바인딩하는 Web Components

Ignite UI for Web Components 맵 구성 요소를 사용하면 다양한 파일 유형에서 로드된 지리적 데이터를 플로팅할 수 있습니다. 예를 들어, 쉼표로 구분된 값(CSV) 파일에서 지리적 위치를 로드할 수 있습니다.

Web Components CSV 파일을 지리적 위치에 바인딩 예제

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

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

데이터 예시

다음은 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
ts

코드 조각

다음 코드는 지도 구성 요소의 IgcGeographicHighDensityScatterSeriesComponent 로드하고 지리적 위치가 포함된 로드된 CSV 파일에서 생성된 객체 배열에 바인딩합니다.

<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

지리적 위치를 사용하여 CSV 파일을 바인딩하는 Web Components

Web Components CSV 파일을 지리적 위치에 바인딩 예제

데이터 예시

코드 조각

API 참조