지리적 위치와 CSV 파일을 바인딩하는 Web Components

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

Web Components Binding CSV Files with Geographic Locations Example

Data Example

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

Code Snippet

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

<igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>

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);
}

지리적 위치와 CSV 파일을 바인딩하는 Web Components

Web Components Binding CSV Files with Geographic Locations Example

Data Example

Code Snippet

API References