지리적 위치가 포함된 Blazor 바인딩 CSV 파일

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

    Blazor 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

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

    @using IgniteUI.Blazor.Controls
    @inject HttpClient Http
    
    <IgbGeographicMap Height="100%" Width="100%" Zoomable="true">
        <IgbGeographicHighDensityScatterSeries DataSource="DataSource"
            LatitudeMemberPath="Lat"
            LongitudeMemberPath="Lon"
            HeatMaximumColor="Red"
            HeatMinimumColor="Black"
            HeatMinimum="0"
            HeatMaximum="5"
            PointExtent="1"
            MouseOverEnabled="true" />
    </IgbGeographicMap>
    
    @code {
        private List<WorldPlaceCsv> DataSource;
    
        protected override async Task OnInitializedAsync()
        {
            string url = "https://static.infragistics.com/xplatform/data/UsaCitiesPopulation.csv";
            string csv = await Http.GetStringAsync(url);
    
            string[] csvLines = csv.Split(Environment.NewLine);
    
            List<WorldPlaceCsv> dataItems = new List<WorldPlaceCsv>();
    
            for (int i = 1; i < csvLines.Length - 1; i++)
            {
                string[] columns = csvLines[i].Split(",");
    
                WorldPlaceCsv location = new WorldPlaceCsv() {
                    Lat=  double.Parse(columns[1]),
                    Lon= double.Parse(columns[2]),
                    Name= columns[0],
                    Pop= double.Parse(columns[3])
                };
    
                dataItems.Add(location);
            }
    
            this.DataSource = dataItems;
    
            await Task.Delay(1);
        }
    
        public class WorldPlaceCsv {
    
            public string Name { get; set; }
    
            public double Lat { get; set; }
    
            public double Lon { get; set; }
    
            public double Pop { get; set; }
    
            public string Country { get; set; }
            public bool Cap { get; set; }
        }
    }
    

    API References